// app.jsx — root, wires up tweaks + sections

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "earthy",
  "mode": "light",
  "type": "serif-sans",
  "heroVariant": "diagram",
  "planStructure": "three",
  "showCompare": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.dataset.theme = t.theme;
    document.body.dataset.mode = t.mode;
    document.body.dataset.type = t.type;
  }, [t.theme, t.mode, t.type]);

  return (
    <>
      <Nav />
      <Hero variant={t.heroVariant} />
      <Solutions />
      <HowItWorks />
      {t.showCompare && <Compare />}
      <Coverage />
      <Stories />
      <Plans structure={t.planStructure} />
      <Support />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Palette" value={t.theme}
          options={[
            { value: 'earthy', label: 'Earthy' },
            { value: 'technical', label: 'Tech' },
            { value: 'minimal', label: 'Minimal' },
          ]}
          onChange={(v) => setTweak('theme', v)} />
        <TweakRadio label="Mode" value={t.mode}
          options={[
            { value: 'light', label: 'Light' },
            { value: 'dark', label: 'Dark' },
          ]}
          onChange={(v) => setTweak('mode', v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Type pairing" value={t.type}
          options={[
            { value: 'serif-sans', label: 'Instrument Serif + Inter Tight' },
            { value: 'grotesk-plex', label: 'Space Grotesk + Plex Mono' },
            { value: 'plex-only', label: 'IBM Plex Serif (one family)' },
          ]}
          onChange={(v) => setTweak('type', v)} />

        <TweakSection label="Hero" />
        <TweakRadio label="Variant" value={t.heroVariant}
          options={[
            { value: 'diagram', label: 'Diagram' },
            { value: 'photo', label: 'Photo' },
            { value: 'map', label: 'Map' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)} />

        <TweakSection label="Plans" />
        <TweakRadio label="Structure" value={t.planStructure}
          options={[
            { value: 'three', label: '3 tiers' },
            { value: 'two', label: '2 tiers' },
            { value: 'one', label: 'Single' },
          ]}
          onChange={(v) => setTweak('planStructure', v)} />

        <TweakSection label="Sections" />
        <TweakToggle label="Show satellite comparison" value={t.showCompare}
          onChange={(v) => setTweak('showCompare', v)} />
      </TweaksPanel>
    </>
  );
}

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