// app.jsx — root + router
const { useEffect: uE_a } = React;

function App() {
  const route = useHashRoute();
  uE_a(() => {
    document.title = titleFor(route);
    window.scrollTo(0, 0);
    requestAnimationFrame(() => {
      window.scrollTo(0, 0);
      if (typeof ScrollTrigger !== "undefined") ScrollTrigger.refresh();
    });
  }, [route]);
  uE_a(() => {
    let cancelled = false;
    const triggers = [];
    const splits = [];
    document.fonts.ready.then(() => {
      if (cancelled) return;
      requestAnimationFrame(() => {
        if (cancelled) return;
        document.querySelectorAll("h1.h1, h2.h2").forEach((el) => {
          if (el.dataset.splitDone === "1") return;
          el.dataset.splitDone = "1";
          const split = new SplitText(el, { type: "chars,words" });
          splits.push({ el, split });
          const tween = gsap.from(split.chars, {
            y: 60, opacity: 0, duration: 0.6, stagger: 0.02, ease: "power3.out",
            scrollTrigger: { trigger: el, start: "top 85%", once: true }
          });
          if (tween.scrollTrigger) triggers.push(tween.scrollTrigger);
        });
      });
    });
    return () => {
      cancelled = true;
      triggers.forEach((t) => t.kill());
      splits.forEach(({ el, split }) => { try { split.revert(); } catch (e) {} delete el.dataset.splitDone; });
    };
  }, [route]);
  let page;
  switch (route) {
    case "/menu": page = <MenuPage defaultCat="all"/>; break;
    case "/menu/case": page = <MenuPage defaultCat="case"/>; break;
    case "/menu/vegan": page = <MenuPage defaultCat="vegan"/>; break;
    case "/order": page = <OrderPage/>; break;
    case "/weddings": page = <WeddingsPage/>; break;
    case "/about": page = <AboutPage/>; break;
    case "/gallery": page = <GalleryPage/>; break;
    case "/faqs": page = <FAQsPage/>; break;
    case "/contact": page = <ContactPage/>; break;
    case "/recipes": page = <RecipesPage/>; break;
    case "/take-and-bake": page = <TakeAndBakePage/>; break;
    default: page = <HomePage/>;
  }
  return (
    <>
      <Navbar/>
      <main key={route} style={{ animation: "pageIn 400ms var(--ease-out-expo) both" }}>{page}</main>
      <Footer/>
      <MobileOrderBar hide={route === "/order"}/>
      <MelindasTweaks/>
      <style>{`@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </>
  );
}
function titleFor(r) {
  const map = {
    "/menu": "Menu | Melinda's Gluten-Free Bakery",
    "/menu/case": "Bakery Case | Melinda's Gluten-Free Bakery",
    "/menu/vegan": "Vegan Menu | Melinda's Gluten-Free Bakery",
    "/order": "Order for Pickup | Melinda's Gluten-Free Bakery",
    "/weddings": "Wedding Cakes | Melinda's Gluten-Free Bakery",
    "/about": "About | Melinda's Gluten-Free Bakery",
    "/gallery": "Gallery | Melinda's Gluten-Free Bakery",
    "/faqs": "FAQs | Melinda's Gluten-Free Bakery",
    "/contact": "Contact | Melinda's Gluten-Free Bakery",
    "/recipes": "Recipes | Melinda's Gluten-Free Bakery",
    "/take-and-bake": "How to Take & Bake | Melinda's Gluten-Free Bakery",
  };
  return map[r] || "Melinda's Gluten-Free Bakery | Capitola, CA";
}

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