// Main app — routing, theme
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

const ROUTES = ["home", "platform", "bespoke", "pricing", "about", "contact", "faq", "security", "docs"];
// Case studies temporarily removed — page stashed at ../casestudy.jsx (above public_html).
// To re-add: restore the file + its index.php <script>, re-add CASE_SLUGS + the case/
// parseHash branch + the case render below, and put case studies back in the sitemap.

function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, "") || "home";
  if (h === "docs" || h.startsWith("docs/")) {
    const slug = h === "docs" ? "introduction" : h.replace("docs/", "");
    return { route: "docs", slug };
  }
  return { route: ROUTES.includes(h) ? h : "home", slug: null };
}

function App() {
  const [state, setState] = useStateApp(parseHash());
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
  }, [tweaks.theme]);

  useEffectApp(() => {
    const onHash = () => setState(parseHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Scroll-reveal: fade sections up as they enter the viewport.
  useEffectApp(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add("sr-in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.08 });
    const scan = () => {
      document.querySelectorAll("main section:not(.anat2):not(.sr)").forEach(el => {
        el.classList.add("sr");
        // Already in view? Reveal immediately (avoids blanking above-the-fold content).
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0) el.classList.add("sr-in");
        else io.observe(el);
      });
    };
    scan();
    const mo = new MutationObserver(scan);
    const root = document.getElementById("root");
    if (root) mo.observe(root, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  const navigate = (r) => {
    window.location.hash = "/" + (r === "home" ? "" : r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const openCaseStudy = (slug) => {
    window.location.hash = "/case/" + slug;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const toggleTheme = () => setTweak("theme", tweaks.theme === "dark" ? "light" : "dark");

  const headerRoute = state.route;

  return (
    <>
      <Header route={headerRoute} onNavigate={navigate} theme={tweaks.theme} onToggleTheme={toggleTheme} />
      <main key={state.route + (state.slug || "")}>
        {state.route === "home" && <HomePage onNavigate={navigate} openCaseStudy={openCaseStudy} />}
        {state.route === "platform" && <PlatformPage onNavigate={navigate} />}
        {state.route === "bespoke" && <BespokePage onNavigate={navigate} />}
        {state.route === "about" && <AboutPage onNavigate={navigate} openCaseStudy={openCaseStudy} />}
        {state.route === "contact" && <ContactPage onNavigate={navigate} />}
        {state.route === "faq" && <FAQPage onNavigate={navigate} />}
        {state.route === "pricing" && <PricingPage onNavigate={navigate} />}
        {state.route === "security" && <SecurityPage onNavigate={navigate} />}
        {state.route === "docs" && <DocsPage pageId={state.slug} onNavigate={navigate} />}
      </main>
      <Footer onNavigate={navigate} />
      <TweaksPanel>
        <TweakSection label="Appearance" />
        <TweakRadio
          label="Theme"
          value={tweaks.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)}
        />
      </TweaksPanel>
    </>
  );
}

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