const ROUTE_PATHS = {
  home: "/",
  services: "/services",
  about: "/about",
  "getting-started": "/getting-started",
  contact: "/contact",
  privacy: "/privacy",
  terms: "/terms",
  accessibility: "/accessibility",
  "speech-therapy": "/services/speech-therapy",
  "occupational-therapy": "/services/occupational-therapy",
  "physical-therapy": "/services/physical-therapy",
  "feeding-therapy": "/services/feeding-therapy",
};
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",
  "speech-therapy": "Pediatric Speech Therapy in Orland Park, IL | Bloom Well Therapy",
  "occupational-therapy": "Pediatric Occupational Therapy in Orland Park, IL | Bloom Well Therapy",
  "physical-therapy": "Pediatric Physical Therapy in Orland Park, IL | Bloom Well Therapy",
  "feeding-therapy": "Pediatric Feeding Therapy in Orland Park, IL | Bloom Well Therapy",
};

// Per-route meta description + canonical, kept in sync on navigation. This is a
// client-rendered site, so crawlers that execute JS pick these up; there is no SSR.
const ROUTE_DESCRIPTIONS = {
  "speech-therapy": "Pediatric speech therapy in Orland Park, IL. We support speech sound skills, language, fluency, voice, oral motor and myofunctional needs, and AAC for children of all ages.",
  "occupational-therapy": "Pediatric occupational therapy in Orland Park, IL. Support for sensory processing and integration, fine motor and visual-motor skills, executive function, handwriting, and self-care routines.",
  "physical-therapy": "Pediatric physical therapy in Orland Park, IL. Support for gross motor development, strength, balance, coordination, gait, torticollis, and early intervention.",
  "feeding-therapy": "Pediatric feeding therapy in Orland Park, IL. Pressure-free support for picky eating, texture aversions, dysphagia and swallowing difficulties, oral-motor skills, and pre and post frenectomy care.",
};

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;
    const desc = ROUTE_DESCRIPTIONS[route];
    if (desc) {
      const tag = document.querySelector('meta[name="description"]');
      if (tag) {
        if (!tag.dataset.bwDefault) tag.dataset.bwDefault = tag.getAttribute("content") || "";
        tag.setAttribute("content", desc);
      }
    } else {
      const tag = document.querySelector('meta[name="description"]');
      if (tag && tag.dataset.bwDefault) tag.setAttribute("content", tag.dataset.bwDefault);
    }
    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) canonical.setAttribute("href", "https://bloomwelltherapy.org" + (ROUTE_PATHS[route] || "/"));
  }, [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;
    case "speech-therapy":
    case "occupational-therapy":
    case "physical-therapy":
    case "feeding-therapy":
      page = <ServicePage slug={route} onBook={open} navigate={navigate} />; 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>
  );
}
// Exposed so Header/Footer can render real hrefs (crawlable, right-click friendly).
window.ROUTE_PATHS = ROUTE_PATHS;
window.App = App;