const ROUTE_PATHS = {
  home: "/",
  services: "/services",
  about: "/about",
  "getting-started": "/getting-started",
  contact: "/contact",
  privacy: "/privacy",
  terms: "/terms",
  accessibility: "/accessibility",
};
const PATH_ROUTES = Object.fromEntries(Object.entries(ROUTE_PATHS).map(([r, p]) => [p, r]));
const ROUTE_TITLES = {
  home: "Bloom Well Therapy | Pediatric Speech, OT, PT & Feeding Therapy",
  services: "Services | Bloom Well Therapy",
  about: "About | Bloom Well Therapy",
  "getting-started": "Getting Started | Bloom Well Therapy",
  contact: "Contact | Bloom Well Therapy",
  privacy: "Privacy Policy | Bloom Well Therapy",
  terms: "Terms of Use | Bloom Well Therapy",
  accessibility: "Accessibility Statement | Bloom Well Therapy",
};

function routeFromPath(pathname) {
  const p = pathname.replace(/\/+$/, "") || "/";
  return PATH_ROUTES[p] || "home";
}

function HomePage({ onBook, navigate }) {
  return (
    <React.Fragment>
      <Hero onBook={onBook} navigate={navigate} />
      <Services navigate={navigate} />
      <Approach navigate={navigate} />
      <Testimonial />
      <CTA onBook={onBook} navigate={navigate} />
    </React.Fragment>
  );
}

function App() {
  const [booking, setBooking] = React.useState(false);
  const [route, setRoute] = React.useState(() => routeFromPath(window.location.pathname));

  // Normalize the URL on first load: clean up the legacy /ui_kits/website/ path
  // and any trailing slash so the address bar shows the canonical route.
  React.useEffect(() => {
    const canonical = ROUTE_PATHS[routeFromPath(window.location.pathname)] || "/";
    if (window.location.pathname !== canonical) {
      window.history.replaceState({ route }, "", canonical);
    }
    const onPop = () => setRoute(routeFromPath(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  React.useEffect(() => { document.title = ROUTE_TITLES[route] || ROUTE_TITLES.home; }, [route]);

  React.useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    document.body.classList.add("bw-motion-ready");
    const targets = document.querySelectorAll(".bw-service-detail, footer");
    targets.forEach((el) => el.classList.add("bw-reveal"));
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.14, rootMargin: "0px 0px -8% 0px" });
    targets.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, [route]);
  const open = () => setBooking(true);
  const navigate = (id) => {
    const path = ROUTE_PATHS[id] || "/";
    if (window.location.pathname !== path) {
      window.history.pushState({ route: id }, "", path);
    }
    setRoute(id);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  let page;
  switch (route) {
    case "services":        page = <ServicesPage onBook={open} navigate={navigate} />; break;
    case "about":           page = <AboutPage onBook={open} navigate={navigate} />; break;
    case "getting-started": page = <GettingStartedPage onBook={open} navigate={navigate} />; break;
    case "contact":         page = <ContactPage onBook={open} navigate={navigate} />; break;
    case "privacy":         page = <PrivacyPage />; break;
    case "terms":           page = <TermsPage />; break;
    case "accessibility":   page = <AccessibilityPage />; break;
    default:                page = <HomePage onBook={open} navigate={navigate} />;
  }

  return (
    <React.Fragment>
      <Header onBook={open} route={route} navigate={navigate} />
      <main>{page}</main>
      <Footer navigate={navigate} />
      <BookingModal open={booking} onClose={() => setBooking(false)} />
    </React.Fragment>
  );
}
window.App = App;