// Root app — composes screens + wires Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "canvas": "field",
  "wordmarkAccent": "alem",
  "headlineAccent": "deliberate evolution",
  "showOrb": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Surface background flips between aubergine field and bone ground.
  const onLight = t.canvas === 'ground';
  const bg = onLight ? 'var(--ground)' : 'var(--field)';
  const fg = onLight ? 'var(--field)' : 'var(--ground)';

  React.useEffect(() => {
    document.documentElement.style.setProperty('background', bg);
    document.body.style.background = bg;
    document.body.style.color = fg;
  }, [bg, fg]);

  return (
    <div style={{ background: bg, color: fg, minHeight: '100vh' }}>
      <Header wordmarkAccent={t.wordmarkAccent} page="home" />
      <Hero showOrb={t.showOrb} headlineAccent={t.headlineAccent} />
      <Engagement />
      <Footer wordmarkAccent={t.wordmarkAccent} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Canvas">
          <TweakRadio
            label="Surface"
            value={t.canvas}
            onChange={(v) => setTweak('canvas', v)}
            options={[
              { value: 'field', label: 'Aubergine' },
              { value: 'ground', label: 'Bone' },
            ]}
          />
          <TweakToggle
            label="Orb in hero"
            value={t.showOrb}
            onChange={(v) => setTweak('showOrb', v)}
          />
        </TweakSection>

        <TweakSection label="Accent placement">
          <TweakRadio
            label="Wordmark accent"
            value={t.wordmarkAccent}
            onChange={(v) => setTweak('wordmarkAccent', v)}
            options={[
              { value: 'mouhamad', label: 'mouhamad' },
              { value: 'alem', label: 'alem' },
            ]}
          />
          <TweakSelect
            label="Headline accent"
            value={t.headlineAccent}
            onChange={(v) => setTweak('headlineAccent', v)}
            options={[
              { value: 'deliberate evolution', label: '"deliberate evolution"' },
              { value: 'how work gets done', label: '"how work gets done"' },
              { value: 'moments of inflection', label: '"moments of inflection"' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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