/* global React, ReactDOM, NavFooter, Pages, ContactPage */
const { useState, useEffect } = React;
const { Nav, Footer, CursorGlow, useReveal, useRoute, FONT_PAIRS, ACCENTS, TWEAK_DEFAULTS } = window.NavFooter;
const { HomePage, AboutPage, StoriesPage } = window.Pages;

function App() {
  const [route, navigate] = useRoute();
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // apply theme + accent + font
  useEffect(() => {
    document.documentElement.dataset.theme = t.theme || "light";
    document.documentElement.style.setProperty("--accent", t.accent);
    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.modern;
    document.documentElement.style.setProperty("--font-display", fp.display);
    document.documentElement.style.setProperty("--font-sans", fp.sans);
    if (window.__bg) {
      window.__bg.setAccent(t.accent);
      window.__bg.setTheme(t.theme || "light");
      window.__bg.setMode(t.bgMode || "shapes");
      window.__bg.setIntensity(t.intensity || 1);
    }
    // tune marquee speed by intensity
    document.documentElement.style.setProperty("--marq-dur", (60 - (t.intensity*20)) + "s");
  }, [t.theme, t.accent, t.fontPair, t.bgMode, t.intensity]);

  useReveal();
  // re-trigger reveals on route change
  useEffect(() => {
    const els = document.querySelectorAll(".reveal, .reveal-stagger");
    els.forEach(el => el.classList.add("pre"));
    const t = setTimeout(() => {
      document.querySelectorAll(".reveal.pre, .reveal-stagger.pre").forEach(el => el.classList.remove("pre"));
    }, 60);
    return () => clearTimeout(t);
  }, [route]);

  let page = null;
  if (route === "about") page = <AboutPage navigate={navigate} />;
  else if (route === "stories") page = <StoriesPage navigate={navigate} />;
  else if (route === "contact") page = <ContactPage navigate={navigate} />;
  else if (route === "demo") page = <window.DemoPage navigate={navigate} />;
  else page = <HomePage navigate={navigate} />;

  const TweaksPanel = window.TweaksPanel;
  const { TweakSection, TweakColor, TweakRadio, TweakSelect, TweakSlider, TweakToggle } = window;

  return (
    <>
      <CursorGlow />
      <div className="app-shell" data-screen-label={
        route === "about" ? "02 About" :
        route === "stories" ? "03 Stories" :
        route === "contact" ? "04 Contact" :
        route === "demo" ? "05 Demo" : "01 Home"
      }>
        <Nav route={route} navigate={navigate} />
        {page}
        <Footer navigate={navigate} />
      </div>
      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Accent">
            <TweakColor value={t.accent} onChange={(v)=>setTweak("accent", v)} options={ACCENTS} />
          </TweakSection>
          <TweakSection title="Background">
            <TweakSelect value={t.bgMode} onChange={(v)=>setTweak("bgMode", v)} options={[
              { value: "shapes", label: "Floating shapes" },
              { value: "particles", label: "Particle field" },
              { value: "grid", label: "Wireframe grid" },
              { value: "blobs", label: "Mesh blobs" },
            ]} />
          </TweakSection>
          <TweakSection title="Animation intensity">
            <TweakSlider value={t.intensity} onChange={(v)=>setTweak("intensity", v)} min={0.3} max={1.6} step={0.05} />
          </TweakSection>
          <TweakSection title="Theme">
            <TweakRadio value={t.theme} onChange={(v)=>setTweak("theme", v)} options={[
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" },
            ]} />
          </TweakSection>
          <TweakSection title="Font pairing">
            <TweakSelect value={t.fontPair} onChange={(v)=>setTweak("fontPair", v)} options={Object.keys(FONT_PAIRS).map(k => ({
              value: k, label: FONT_PAIRS[k].label,
            }))} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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