// app.jsx — root app, router, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "violet",
  "hero": "A",
  "typo": "mix"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const initRoute = (() => {
    const path = window.location.pathname;
    const hash = window.location.hash.replace('#', '');
    // Support legacy hash routes and convert them
    if (hash && hash !== '/') {
      const clean = hash.replace(/^\/post\//, '/blog/').replace(/^\/tool\//, '/tools/');
      window.history.replaceState({}, '', clean);
      return clean;
    }
    return path || '/';
  })();
  const [route, setRoute] = React.useState(initRoute);
  const lang = 'en';

  React.useEffect(() => {
    document.body.setAttribute('data-palette', t.palette);
    document.body.setAttribute('data-typo', t.typo);
  }, [t.palette, t.typo]);

  // History API popstate listener
  React.useEffect(() => {
    const onPop = () => setRoute(window.location.pathname || '/');
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const go = (path) => {
    window.history.pushState({}, '', path);
    setRoute(path);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const i18n = window.I18N.en;

  const ctxValue = { route, go, t: i18n, lang };

  let Page;
  if (route === '/' || route === '') Page = <HomePage heroVariant={t.hero} />;
  else if (route === '/blog') Page = <BlogPage />;
  else if (route.startsWith('/blog/')) Page = <PostPage slug={route.split('/blog/')[1]} />;
  else if (route === '/tools') Page = <ToolsPage />;
  else if (route.startsWith('/tools/')) Page = <ToolPage slug={route.split('/tools/')[1]} />;
  else if (route === '/newsletter') Page = <NewsletterPage />;
  else if (route === '/about') Page = <AboutPage />;
  else if (route === '/field-guide') Page = <FieldGuidePage />;
  else if (route === '/privacy-policy' || route === '/privacy') Page = <PrivacyPolicyPage />;
  else if (route === '/terms-of-service' || route === '/terms') Page = <TermsOfServicePage />;
  else if (route === '/affiliate-disclosure') Page = <AffiliateDisclosurePage />;
  else Page = <HomePage heroVariant={t.hero} />;

  return (
    <AppCtx.Provider value={ctxValue}>
      <Header />
      <main key={route}>{Page}</main>
      <Footer />
      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Color"
          value={t.palette}
          options={['violet', 'mono', 'warm']}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Variant"
          value={t.hero}
          options={['A', 'B', 'C']}
          onChange={(v) => setTweak('hero', v)}
        />
        <TweakSection label="Typography" />
        <TweakRadio
          label="Display"
          value={t.typo}
          options={['mix', 'serif', 'sans']}
          onChange={(v) => setTweak('typo', v)}
        />
      </TweaksPanel>
    </AppCtx.Provider>
  );
}

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