// App entry — composes everything + tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF5B22",
  "bg": "#F1ECE3",
  "showSubtleGrain": true,
  "darkBooking": true,
  "headlineMode": "small-sharp"
}/*EDITMODE-END*/;

function App() {
  React.useEffect(() => { injectGlobalCSS(); }, []);
  const [tweaks, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);

  // apply tweaks → CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--bg', tweaks.bg);
    // bg-2 derived (slightly darker)
    const bg2 = shade(tweaks.bg, -6);
    document.documentElement.style.setProperty('--bg-2', bg2);
  }, [tweaks.accent, tweaks.bg]);

  return (
    <>
      <Nav />
      <Hero />
      <Services />
      <Process />
      <Work />
      <About />
      <Pricing />
      <Writing />
      <Booking />
      <Contact />
      <Footer />

      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="palette">
            <TweakRadio
              label="accent"
              value={tweaks.accent}
              onChange={v => setTweak('accent', v)}
              options={[
                { value: '#FF5B22', label: 'signal' },
                { value: '#1F4FE5', label: 'electric' },
                { value: '#1F7A3A', label: 'forest' },
                { value: '#B0231C', label: 'red' },
              ]}
            />
            <TweakRadio
              label="paper"
              value={tweaks.bg}
              onChange={v => setTweak('bg', v)}
              options={[
                { value: '#F1ECE3', label: 'warm' },
                { value: '#F4F4F2', label: 'cool' },
                { value: '#FAF7F0', label: 'cream' },
                { value: '#EAEAEA', label: 'paper' },
              ]}
            />
          </TweakSection>
          <TweakSection label="hero">
            <TweakRadio
              label="headline"
              value={tweaks.headlineMode}
              onChange={v => setTweak('headlineMode', v)}
              options={[
                { value: 'small-sharp', label: 'small + sharp' },
                { value: 'plain', label: 'plain' },
              ]}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

// hex color shade helper
function shade(hex, percent) {
  const h = hex.replace('#','');
  const num = parseInt(h.length === 3 ? h.split('').map(c=>c+c).join('') : h, 16);
  let r = (num >> 16) + Math.round((percent/100) * 255);
  let g = ((num >> 8) & 0xff) + Math.round((percent/100) * 255);
  let b = (num & 0xff) + Math.round((percent/100) * 255);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('');
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);