// Wov3 — app shell with simple route state + Tweaks integration
const { useState, useEffect } = React;

function App() {
  // Read URL hash for initial route
  const ROUTES = ["home","collection","technology","conditions","blog","about","contact","team-barry","team-bruce","team-philip","team-lucy"];
  const initial = (window.location.hash || "#home").replace("#", "");
  const [route, setRoute] = useState(ROUTES.includes(initial) ? initial : "home");

  // Tweaks
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "bone",
    "layout": "standard",
    "accent": "#4f7ffa",
    "gridGap": "clamp(28px, 4vw, 64px)"
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette + layout on body
  useEffect(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.layout = t.layout;
    // Allow accent override only in onyx mode (preset palettes pin their own accent)
    if (t.palette === "onyx") {
      document.documentElement.style.setProperty("--accent", t.accent);
    } else {
      document.documentElement.style.removeProperty("--accent");
    }
  }, [t.palette, t.layout, t.accent]);

  // Apply grid gap separately (no route dependency)
  useEffect(() => {
    document.documentElement.style.setProperty("--ortho-grid-gap", t.gridGap);
  }, [t.gridGap]);

  // Navigate (also updates hash, scrolls to top)
  const onNavigate = (id) => {
    setRoute(id);
    window.history.pushState(null, "", "#" + id);
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  };

  // Listen for back/forward
  useEffect(() => {
    const onPop = () => {
      const r = (window.location.hash || "#home").replace("#", "");
      setRoute(ROUTES.includes(r) ? r : "home");
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // Re-run scroll reveals after each route switch
  useScrollReveal();
  // Re-bind whenever route changes (new DOM)
  useEffect(() => {
    // Force a reflow tick so the IO has fresh elements
    const id = requestAnimationFrame(() => {
      document.querySelectorAll(".reveal").forEach((el) => {
        // No-op: useScrollReveal hook above will pick them up next render
      });
    });
    return () => cancelAnimationFrame(id);
  }, [route]);

  let Page = SportsPage; // SportsPage is now Home
  if (route === "collection") Page = CollectionPage;
  else if (route === "technology") Page = TechnologyPage;
  else if (route === "conditions") Page = ConditionsPage;
  else if (route === "blog") Page = BlogPage;
  else if (route === "about") Page = AboutPage;
  else if (route === "contact") Page = ContactPage;
  else if (route.startsWith("team-")) Page = TeamMemberPage;

  return (
    <div className="shell">
      <PromoBanner />
      <Nav route={route} onNavigate={onNavigate} />
      <Page onNavigate={onNavigate} key={route} memberId={route.startsWith("team-") ? route.slice(5) : undefined} />
      <Footer onNavigate={onNavigate} />
      <LatticeLab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            label="Theme"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "onyx", label: "Onyx" },
              { value: "bone", label: "Bone" },
              { value: "cobalt", label: "Cobalt" },
              { value: "sand", label: "Sand" },
            ]}
          />
          {t.palette === "onyx" && (
            <TweakColor
              label="Accent"
              value={t.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#4f7ffa", "#22c55e", "#f59e0b", "#ec4899", "#a855f7"]}
            />
          )}
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Grid style"
            value={t.layout}
            onChange={(v) => setTweak("layout", v)}
            options={[
              { value: "standard", label: "Standard" },
              { value: "magazine", label: "Magazine" },
              { value: "compact", label: "Compact" },
            ]}
          />
          <TweakRadio
            label="Grid spacing"
            value={t.gridGap}
            onChange={(v) => setTweak("gridGap", v)}
            options={[
              { value: "clamp(28px, 4vw, 64px)", label: "Standard" },
              { value: "clamp(20px, 3vw, 48px)", label: "Compact" },
              { value: "clamp(16px, 2.5vw, 40px)", label: "Tight" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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