/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect,
   Nav, Footer, FooterBar, HomePage, PlatformPage, CollaborationPage, AboutPage, PrivacyPage, DemoPage, ContactPage */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#F3B43B",
  "headFont": "Archivo",
  "heroStyle": "outcome"
}/*EDITMODE-END*/;

/* Pick the Gold — the three brand-sanctioned golds (Color System v2).
   fill = bright gold for button fills; onLight = AA-safe deep gold for text on light. */
const ACCENTS = {
  "#F3B43B": { name: 'Aurum',     fill: '#F3B43B', onLight: '#94620C' },
  "#E0972A": { name: 'Bronze',    fill: '#E0972A', onLight: '#7C5410' },
  "#F6CA6B": { name: 'Champagne', fill: '#F6CA6B', onLight: '#9A6A10' },
};

function applyTheme(t) {
  const root = document.documentElement;
  root.setAttribute('data-theme', t.theme);
  const a = ACCENTS[t.accent] || ACCENTS["#F3B43B"];
  /* bright gold always fills buttons/chips; text gold flips to deep gold on light */
  root.style.setProperty('--accent-fill', a.fill);
  root.style.setProperty('--accent', t.theme === 'light' ? a.onLight : a.fill);
  root.style.setProperty('--accent-ink', '#0A0E1A');
  root.style.setProperty('--font-head', `"${t.headFont}", system-ui, sans-serif`);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateA('home');

  useEffectA(() => { applyTheme(t); }, [t.theme, t.accent, t.headFont]);
  useEffectA(() => {
    document.documentElement.setAttribute('data-route', route);
    window.dispatchEvent(new CustomEvent('xaint:route', { detail: route }));
  }, [route]);

  const go = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  const Page = { home: HomePage, platform: PlatformPage, collaboration: CollaborationPage,
                 about: AboutPage, privacy: PrivacyPage, demo: DemoPage, contact: ContactPage }[route] || HomePage;

  return (
    <>
      <Nav route={route} go={go} />
      <Page key={route} t={t} go={go} />
      <Footer go={go} />
      <FooterBar go={go} route={route} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Pick the gold" />
        <TweakColor label="Accent" value={t.accent}
          options={Object.keys(ACCENTS)} onChange={v => setTweak('accent', v)} />

        <TweakSection label="Theme" />
        <TweakRadio label="Surface" value={t.theme} options={['dark', 'light']}
          onChange={v => setTweak('theme', v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Headings" value={t.headFont}
          options={['Archivo', 'Saira', 'Chakra Petch', 'Space Grotesk']}
          onChange={v => setTweak('headFont', v)} />

        <TweakSection label="Hero direction" />
        <TweakSelect label="Style" value={t.heroStyle}
          options={[{ value: 'outcome', label: 'Outcome-led' }, { value: 'genesis', label: 'AI & speed' }]}
          onChange={v => setTweak('heroStyle', v)} />
      </TweaksPanel>
    </>
  );
}

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