/* global React, ReactDOM */
// App shell — router, tweaks, renders active page

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 226,
  "accentChroma": 0.13,
  "fontPair": "geo",
  "density": "regular",
  "grain": true,
  "heroVariant": "editorial"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useLang();
  const { route, navigate } = useRouter();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  const t = window.AXIOM_I18N[lang] || window.AXIOM_I18N['pt-BR'];

  // Apply tweaks to body / root
  useEffect(() => {
    document.body.dataset.density = tw.density;
    document.body.dataset.font = tw.fontPair;
    document.body.dataset.grain = tw.grain ? 'on' : 'off';
    // Accent color driven by hue
    const h = tw.accentHue;
    const c = tw.accentChroma;
    document.documentElement.style.setProperty('--accent', `oklch(0.71 ${c} ${h})`);
    document.documentElement.style.setProperty('--accent-dim', `oklch(0.55 ${c * 0.85} ${h})`);
    document.documentElement.style.setProperty('--accent-glow', `oklch(0.71 ${c} ${h} / 0.18)`);
    document.documentElement.style.setProperty('--accent-soft', `oklch(0.71 ${c} ${h} / 0.07)`);
  }, [tw]);

  // Update document title/meta when page or lang changes
  useEffect(() => {
    const titles = {
      home: t.meta.default,
      services: `${t.services.title} — ${t.meta.siteName}`,
      about: `${t.about.eyebrow} — ${t.meta.siteName}`,
      certifications: `${t.certifications.title} — ${t.meta.siteName}`,
      contact: `${t.contact.eyebrow} — ${t.meta.siteName}`,
    };
    document.title = `${t.meta.siteName} — ${titles[route.page] || t.meta.tagline}`;
    const desc = document.querySelector('meta[name="description"]');
    if (desc) desc.setAttribute('content', t.meta.default);
  }, [route, lang, t]);

  let page;
  switch (route.page) {
    case 'services':
      page = <ServicesPage t={t} navigate={navigate} slug={route.slug}/>; break;
    case 'about':
      page = <AboutPage t={t} navigate={navigate}/>; break;
    case 'certifications':
      page = <CertificationsPage t={t} navigate={navigate}/>; break;
    case 'contact':
      page = <ContactPage t={t}/>; break;
    case 'home':
    default:
      page = <Home t={t} navigate={navigate} tweaks={tw}/>;
  }

  // Page-level screen label for comment context
  const labels = {
    home: '01 Home',
    services: route.slug ? `03 Service · ${route.slug}` : '02 Services',
    about: '04 About',
    certifications: '05 Certifications',
    contact: '06 Contact',
  };

  return (
    <div data-screen-label={labels[route.page] || route.page}>
      <Header lang={lang} setLang={setLang} route={route} navigate={navigate} t={t}/>
      {page}
      <Footer t={t} navigate={navigate} lang={lang} setLang={setLang}/>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color"/>
        <TweakSlider label="Hue" value={tw.accentHue} min={0} max={360} step={5}
          onChange={(v) => setTweak('accentHue', v)}/>
        <TweakSlider label="Saturation" value={Math.round(tw.accentChroma * 100)} min={0} max={20} step={1} unit="%"
          onChange={(v) => setTweak('accentChroma', v / 100)}/>
        <TweakSection label="Typography"/>
        <TweakRadio label="Pairing" value={tw.fontPair}
          options={['neo', 'geo', 'editorial', 'mono']}
          onChange={(v) => setTweak('fontPair', v)}/>
        <TweakSection label="Layout"/>
        <TweakRadio label="Density" value={tw.density}
          options={['compact', 'regular', 'comfortable']}
          onChange={(v) => setTweak('density', v)}/>
        <TweakSection label="Effects"/>
        <TweakToggle label="Grain overlay" value={tw.grain}
          onChange={(v) => setTweak('grain', v)}/>
        <TweakRadio label="Hero variant" value={tw.heroVariant}
          options={['editorial', 'split']}
          onChange={(v) => setTweak('heroVariant', v)}/>
      </TweaksPanel>
    </div>
  );
}

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