// app.jsx — root router + tweaks integration for LifeAfterCall.

const { LAC, F } = window;
const {
  Topbar, Footer,
  Homepage, LatestPage, ArchivePage, AboutPage, SubscribePage, ContactPage,
} = window;
const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks } = window;

function SiteApp() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [route, _setRoute] = React.useState('home');

  // The chrome (Topbar + Footer) wraps every page. Top nav is sticky;
  // route changes scroll the page back to the top.
  const onNav = (r) => {
    _setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const page = (() => {
    switch (route) {
      case 'latest':    return <LatestPage onNav={onNav} />;
      case 'archive':   return <ArchivePage onNav={onNav} />;
      case 'about':     return <AboutPage onNav={onNav} />;
      case 'subscribe': return <SubscribePage onNav={onNav} />;
      case 'contact':   return <ContactPage onNav={onNav} />;
      default:          return <Homepage onNav={onNav} hero={t.homeHero} />;
    }
  })();

  return (
    <React.Fragment>
      <Topbar route={route} onNav={onNav} />
      {page}
      <Footer onNav={onNav} />

      <TweaksPanel title="Site Tweaks">
        <TweakSection label="Home hero">
          <TweakRadio
            label="Variant"
            value={t.homeHero}
            options={[
              { value: 'masthead', label: 'Masthead' },
              { value: 'cover',    label: 'Cover' },
              { value: 'minimal',  label: 'Minimal' },
            ]}
            onChange={(v) => { _setRoute('home'); setTweak('homeHero', v); window.scrollTo({ top: 0, behavior: 'instant' }); }}
          />
        </TweakSection>
        <TweakSection label="Navigation">
          <TweakRadio
            label="Jump to"
            value={route}
            options={[
              { value: 'home',      label: 'Home' },
              { value: 'latest',    label: 'Issue' },
              { value: 'archive',   label: 'Archive' },
            ]}
            onChange={onNav}
          />
          <TweakRadio
            label=" "
            value={route}
            options={[
              { value: 'about',     label: 'About' },
              { value: 'subscribe', label: 'Subscribe' },
              { value: 'contact',   label: 'Contact' },
            ]}
            onChange={onNav}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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