// app.jsx — Main app shell, router, tweaks panel

const { useState: useState_a, useEffect: useEffect_a } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "corporate",
  "heroLayout": "carousel",
  "palette": "steel",
  "typePreset": "corporate",
  "density": "regular",
  "darkMode": false,
  "servicesLanding": "split"
}/*EDITMODE-END*/;

function parseRoute() {
  const h = (window.location.hash || '').replace(/^#\/?/, '').replace(/\/$/, '');
  return h || 'home';
}

function useRoute() {
  const [route, setRoute] = useState_a(parseRoute);
  useEffect_a(() => {
    const on = () => { setRoute(parseRoute()); window.scrollTo({ top: 0, behavior: 'auto' }); };
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  const nav = (target) => {
    if (target === 'home' || target === '' || target === '/') {
      history.pushState(null, '', '#/');
    } else {
      history.pushState(null, '', `#/${target}`);
    }
    setRoute(target === 'home' ? 'home' : target);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };
  return [route, nav];
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, onNav] = useRoute();
  const theme = buildTheme(t);

  useEffect_a(() => {
    Object.entries(theme.cssVars).forEach(([k, v]) => {
      document.documentElement.style.setProperty(k, v);
    });
    document.body.style.background = theme.c.bg;
    document.body.style.color = theme.c.fg;
    document.documentElement.style.colorScheme = theme.dark ? 'dark' : 'light';
  }, [theme]);

  const parts = route.split('/');
  let page;
  if (route === 'home' || route === '') page = <HomePage tweaks={t} onNav={onNav} />;
  else if (parts[0] === 'about') page = <AboutPage onNav={onNav} />;
  else if (parts[0] === 'capabilities' && parts[1] === 'epcm') page = <EPCMPage onNav={onNav} />;
  else if (parts[0] === 'capabilities' && parts[1] === 'rd') page = <RDPage onNav={onNav} />;
  else if (parts[0] === 'capabilities' && parts[1]) page = <CapabilityDetail id={parts[1]} onNav={onNav} />;
  else if (parts[0] === 'capabilities') page = <ServicesLanding onNav={onNav} tweaks={t} />;
  else if (parts[0] === 'careers') page = <CareersPage onNav={onNav} />;
  else if (parts[0] === 'contact') page = <ContactPage onNav={onNav} />;
  else page = <NotFound onNav={onNav} />;

  return (
    <>
      <Header route={route} onNav={onNav} />
      <main style={{
        background: 'var(--bg)',
        color: 'var(--fg)',
        fontFamily: 'var(--ff-body)',
        minHeight: '100vh',
      }}>
        {page}
      </main>
      <Footer onNav={onNav} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Direction" />
        <TweakRadio label="Style" value={t.direction} options={[
          { value: 'corporate', label: 'Corporate' },
          { value: 'heritage',  label: 'Heritage' },
        ]} onChange={(v) => {
          // Heritage uses serif headlines on warm cream by default
          setTweak({
            direction: v,
            typePreset: v === 'heritage' ? 'heritage' : 'corporate',
          });
        }} />
        <TweakRadio label="Hero" value={t.heroLayout} options={[
          { value: 'carousel',  label: 'Carousel' },
          { value: 'split',     label: 'Split' },
          { value: 'editorial', label: 'Editorial' },
        ]} onChange={(v) => setTweak('heroLayout', v)} />

        <TweakSection label="Color" />
        <TweakColor label="Accent" value={t.palette}
                    options={['steel', 'navy', 'slate', 'rust', 'forest'].map((id) => PALETTES[id].hero)}
                    onChange={(hex) => {
                      const id = Object.keys(PALETTES).find((k) => PALETTES[k].hero === hex);
                      if (id) setTweak('palette', id);
                    }} />
        <TweakToggle label="Dark mode" value={t.darkMode}
                     onChange={(v) => setTweak('darkMode', v)} />

        <TweakSection label="Typography" />
        <TweakRadio label="Type" value={t.typePreset}
                    options={[
                      { value: 'corporate', label: 'Sans' },
                      { value: 'heritage',  label: 'Serif' },
                      { value: 'workhorse', label: 'Geometric' },
                    ]} onChange={(v) => setTweak('typePreset', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
                    options={[
                      { value: 'compact', label: 'Compact' },
                      { value: 'regular', label: 'Regular' },
                      { value: 'comfy',   label: 'Comfy' },
                    ]} onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Services page" />
        <TweakRadio label="EPCM / R&D landing" value={t.servicesLanding}
                    options={[
                      { value: 'split',     label: 'Split' },
                      { value: 'cards',     label: 'Cards' },
                      { value: 'editorial', label: 'Editorial' },
                    ]} onChange={(v) => setTweak('servicesLanding', v)} />
      </TweaksPanel>
    </>
  );
}

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