// src/app.jsx
// Main app — routes between pages, swaps variation, drives the Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variation": "v1",
  "page": "home"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Page state is local — nav clicks shouldn't churn the persisted EDITMODE block.
  const [page, setPage] = React.useState(t.page || 'home');

  // Honor a tweak-driven page change (e.g. user sets the page via Tweaks panel)
  React.useEffect(() => {
    if (t.page && t.page !== page) setPage(t.page);
  }, [t.page]);

  const onNavigate = (id) => {
    setPage(id);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const isV2 = t.variation === 'v2';
  const Home       = isV2 ? V2Home       : V1Home;
  const Kit        = isV2 ? V2Kit        : V1Kit;
  const About      = isV2 ? V2About      : V1About;
  const Disclaimer = isV2 ? V2Disclaimer : V1Disclaimer;

  let Screen;
  if      (page === 'kit')        Screen = Kit;
  else if (page === 'about')      Screen = About;
  else if (page === 'disclaimer') Screen = Disclaimer;
  else                            Screen = Home;

  return (
    <>
      <Screen key={`${t.variation}-${page}`} onNavigate={onNavigate} />

      <TweaksPanel title="Tweaks · promptmode.io">
        <TweakSection label="Variation">
          <TweakRadio
            label="Direction"
            value={t.variation}
            options={[
              { value: 'v1', label: 'Field Report' },
              { value: 'v2', label: 'Terminal' },
            ]}
            onChange={(v) => setTweak('variation', v)}
          />
        </TweakSection>

        <TweakSection label="Page">
          <TweakSelect
            label="Show page"
            value={page}
            options={[
              { value: 'home',       label: 'Homepage' },
              { value: 'kit',        label: 'Free Starter Kit' },
              { value: 'about',      label: 'About' },
              { value: 'disclaimer', label: 'Disclaimer' },
            ]}
            onChange={(v) => { setPage(v); setTweak('page', v); }}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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