// ─── SPA Router ───────────────────────────────────────────────
// Hash-based routing: /#product, /#faq, etc.
// Empty hash or bare "#" → home page.

const TWEAK_DEFAULTS = {
  "heroVariant":      "simplified",
  "showLogos":        true,
  "showStats":        true,
  "showTestimonials": true,
  "showSponsorSplit":  true,
};

function HomePage() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Hero tweaks={tweaks} />
      <ThreePillars />
      <Benefits />
      <CtaSection />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero copy">
          <TweakRadio
            label="Hero direction"
            value={tweaks.heroVariant}
            options={[
              { label: "Simplified", value: "simplified" },
              { label: "Operations", value: "operations" },
              { label: "Partner",    value: "partner" },
            ]}
            onChange={v => setTweak("heroVariant", v)}
          />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Customer logos" value={tweaks.showLogos} onChange={v => setTweak("showLogos", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function getPage() {
  const hash = window.location.hash.replace(/^#/, "").trim();
  return hash || "home";
}

function SpaApp() {
  const [page, setPage] = React.useState(getPage);

  React.useEffect(() => {
    const handler = () => {
      const next = getPage();
      setPage(next);
    };
    window.addEventListener("hashchange", handler);
    return () => window.removeEventListener("hashchange", handler);
  }, []);

  // Scroll to top and update <title> whenever the page changes
  const PAGE_TITLES = {
    home:          "Primo Ticketing — Tickets Simplified",
    product:       "Product — Primo Ticketing",
    "cheer-dance": "For Cheer & Dance — Primo Ticketing",
    "why-primo":   "Why Primo — Primo Ticketing",
    pricing:       "Pricing — Primo Ticketing",
    faq:           "FAQs — Primo Ticketing",
  };
  React.useEffect(() => {
    window.scrollTo(0, 0);
    document.title = PAGE_TITLES[page] || "Primo Ticketing";
  }, [page]);

  return (
    <>
      <Nav currentPage={page} />

      {page === "home"        && <HomePage />}
      {page === "product"     && <ProductPage />}
      {page === "cheer-dance" && <CheerDancePage />}
      {page === "why-primo"   && <WhyPrimoPage />}
      {page === "pricing"     && <PricingPage />}
      {page === "faq"         && <FaqPage />}

      <Footer />
      <PrototypeModal />
      <PrototypeGate />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<SpaApp />);