/* global React, ReactDOM, Nav, Footer, HomePage, ArchivePage, HauteCouturePage, BridalPage, ReadyToWearPage, JewelleryPage, FragrancePage, FoundersPage, AppointmentsPage, ContactPage, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakSelect */
// ============== APP ROOT + TWEAKS ==============

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "lumiere",
  "accent": "#B89456",
  "density": "standard",
  "displayFont": "Italiana"
}/*EDITMODE-END*/;

const DISPLAY_FONTS = {
  "Italiana":     "'Italiana', 'Didot', serif",
  "Bodoni Moda":  "'Bodoni Moda', 'Didot', serif",
  "Marcellus":    "'Marcellus', serif",
  "Forum":        "'Forum', serif",
};

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

  const setRoute = (r) => {
    setRouteState(r);
    // Snap to top on route change
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  // Apply tweaks to DOM root
  useEffectApp(() => {
    const body = document.body;
    body.dataset.mode = t.mode;
    body.dataset.density = t.density;
    document.documentElement.style.setProperty('--champagne', t.accent);
    // Recompute deep accent automatically
    document.documentElement.style.setProperty('--champagne-deep', t.accent);
    // Display font
    if (DISPLAY_FONTS[t.displayFont]) {
      document.documentElement.style.setProperty('--display', DISPLAY_FONTS[t.displayFont]);
    }
    // Load alternate fonts on demand
    if (t.displayFont !== 'Italiana' && !document.getElementById('alt-display-font')) {
      const link = document.createElement('link');
      link.id = 'alt-display-font';
      link.rel = 'stylesheet';
      link.href = 'https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500&family=Marcellus&family=Forum&display=swap';
      document.head.appendChild(link);
    }
  }, [t.mode, t.accent, t.density, t.displayFont]);

  const pages = {
    'home':           <HomePage setRoute={setRoute} />,
    'haute-couture':  <HauteCouturePage setRoute={setRoute} />,
    'bridal':         <BridalPage setRoute={setRoute} />,
    'ready-to-wear':  <ReadyToWearPage setRoute={setRoute} />,
    'jewellery':      <JewelleryPage setRoute={setRoute} />,
    'fragrance':      <FragrancePage setRoute={setRoute} />,
    'archive':        <ArchivePage setRoute={setRoute} />,
    'founders':       <FoundersPage setRoute={setRoute} />,
    'appointments':   <AppointmentsPage setRoute={setRoute} />,
    'contact':        <ContactPage setRoute={setRoute} />,
  };

  return (
    <div>
      <Nav route={route} setRoute={setRoute} />
      <main key={route}>{pages[route] || pages['home']}</main>
      <Footer setRoute={setRoute} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Mode">
          <TweakRadio label="Atelier" value={t.mode} onChange={v => setTweak('mode', v)}
            options={['lumiere', 'noir']} />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakColor label="Metallic" value={t.accent} onChange={v => setTweak('accent', v)}
            options={['#B89456','#C9A668','#8E6F3C','#5C2226','#5A6C56']} />
        </TweakSection>
        <TweakSection label="Display type">
          <TweakSelect label="Face" value={t.displayFont} onChange={v => setTweak('displayFont', v)}
            options={Object.keys(DISPLAY_FONTS)} />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio label="Pace" value={t.density} onChange={v => setTweak('density', v)}
            options={['standard', 'airy']} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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