// Root app — composes everything, owns palette/type/layout from tweaks.

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "forest",
    "typePair": "geist",
    "pillarsLayout": "grid",
    "showGrain": true
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = React.useState('site'); // 'site' | 'apply'

  const palette = PALETTES[t.palette] || PALETTES.forest;
  const typePair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS.saol;

  // Inject CSS variables onto :root
  const cssVars = {
    '--bg': palette.bg,
    '--bg-alt': palette.bgAlt,
    '--fg': palette.fg,
    '--fg-dim': palette.fgDim,
    '--accent': palette.accent,
    '--line': palette.line,
    '--display': typePair.display,
    '--sans': typePair.sans,
    '--mono': typePair.mono,
    '--display-w': typePair.weight,
    '--display-tr': typePair.tracking,
  };

  React.useEffect(() => {
    const root = document.documentElement;
    Object.entries(cssVars).forEach(([k, v]) => root.style.setProperty(k, v));
    document.body.style.background = palette.bg;
    document.body.style.color = palette.fg;
  }, [t.palette, t.typePair]);

  React.useEffect(() => {
    document.body.style.setProperty('--grain-opacity', t.showGrain ? '0.035' : '0');
    document.body.classList.toggle('no-grain', !t.showGrain);
  }, [t.showGrain]);

  const openApply = () => {
    setView('apply');
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const closeApply = () => {
    setView('site');
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  return (
    <>
      {view === 'site' && (
        <main>
          <Nav onApply={openApply} />
          <Hero onApply={openApply} />
          <Invitation onApply={openApply} />
          <PillarsSection layout={t.pillarsLayout} />
          <Experience />
          <Membership onApply={openApply} />
          <FinalCTA onApply={openApply} />
          <Footer />
        </main>
      )}
      {view === 'apply' && <ApplicationFlow onClose={closeApply} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="View" />
        <TweakRadio
          label="Page"
          value={view}
          options={[{ value: 'site', label: 'Site' }, { value: 'apply', label: 'Apply' }]}
          onChange={(v) => v === 'apply' ? openApply() : closeApply()}
        />
        <TweakSection label="Palette" />
        <TweakRadio
          label="Tone"
          value={t.palette}
          options={[
            { value: 'forest', label: 'Forest' },
            { value: 'ash',    label: 'Ash' },
            { value: 'bone',   label: 'Bone' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Typography" />
        <TweakRadio
          label="Pair"
          value={t.typePair}
          options={[
            { value: 'geist', label: 'Geist' },
            { value: 'inter', label: 'Inter' },
            { value: 'space', label: 'Space' },
          ]}
          onChange={(v) => setTweak('typePair', v)}
        />
        <TweakSection label="Pillars layout" />
        <TweakRadio
          label="Style"
          value={t.pillarsLayout}
          options={[
            { value: 'grid',   label: 'Grid' },
            { value: 'index',  label: 'Index' },
            { value: 'pinned', label: 'Pinned' },
          ]}
          onChange={(v) => setTweak('pillarsLayout', v)}
        />
        <TweakSection label="Treatment" />
        <TweakToggle
          label="Film grain"
          value={t.showGrain}
          onChange={(v) => setTweak('showGrain', v)}
        />
      </TweaksPanel>
    </>
  );
}

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