const { useState, useEffect } = React;

// ——— URL <-> route ———
const ROUTE_PATHS = window.ROUTE_PATHS;          // { route: "/path", ... }
const PATH_ROUTES = window.PATH_ROUTES;          // { "/path": "route", ... }

function pathToRoute(pathname) {
  const clean = pathname.replace(/\/+$/, "") || "/";
  if (PATH_ROUTES[clean]) return PATH_ROUTES[clean];
  // Stadtteil-Detail: /stadtteil/altenessen
  const m = clean.match(/^\/stadtteil\/(.+)$/);
  if (m) return "stadtteil-" + decodeURIComponent(m[1]);
  return "home";
}

function routeToPath(route) {
  if (route === "home") return "/";
  if (route.startsWith("stadtteil-")) return "/stadtteil/" + encodeURIComponent(route.slice(10).toLowerCase());
  return ROUTE_PATHS[route] || "/" + route;
}

function App() {
  const [route, setRoute] = useState(() => pathToRoute(window.location.pathname));

  useEffect(() => {
    const onPop = () => setRoute(pathToRoute(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  useEffect(() => {
    if (window.applySeoForRoute) window.applySeoForRoute(route);
    window.scrollTo({ top: 0 });
  }, [route]);

  const goto = (k) => {
    const path = routeToPath(k);
    if (window.location.pathname !== path) {
      window.history.pushState({ route: k }, "", path);
    }
    setRoute(k);
  };

  let page;
  if (route === "pkw") return (
    <div className="min-h-screen flex flex-col bg-bg pb-[56px] md:pb-0">
      <AnnouncementBar/><Navbar goto={goto} current={route}/>
      <main className="flex-1"><PkwPage goto={goto}/></main>
      <Footer goto={goto}/><StickyMobile/><WhatsAppFloat/>
    </div>
  );
  if (route === "transporter") return (
    <div className="min-h-screen flex flex-col bg-bg pb-[56px] md:pb-0">
      <AnnouncementBar/><Navbar goto={goto} current={route}/>
      <main className="flex-1"><TransporterPage goto={goto}/></main>
      <Footer goto={goto}/><StickyMobile/><WhatsAppFloat/>
    </div>
  );
  if (route === "lkw") return (
    <div className="min-h-screen flex flex-col bg-bg pb-[56px] md:pb-0">
      <AnnouncementBar/><Navbar goto={goto} current={route}/>
      <main className="flex-1"><LkwPage goto={goto}/></main>
      <Footer goto={goto}/><StickyMobile/><WhatsAppFloat/>
    </div>
  );
  if (route === "wohnmobil") return (
    <div className="min-h-screen flex flex-col bg-bg pb-[56px] md:pb-0">
      <AnnouncementBar/><Navbar goto={goto} current={route}/>
      <main className="flex-1"><WohnmobilPage goto={goto}/></main>
      <Footer goto={goto}/><StickyMobile/><WhatsAppFloat/>
    </div>
  );
  if (route === "busse") return (
    <div className="min-h-screen flex flex-col bg-bg pb-[56px] md:pb-0">
      <AnnouncementBar/><Navbar goto={goto} current={route}/>
      <main className="flex-1"><BussePage goto={goto}/></main>
      <Footer goto={goto}/><StickyMobile/><WhatsAppFloat/>
    </div>
  );
  if (route === "home") {
    page = (<>
      <Hero goto={goto}/>
      <LiveTicker/>
      <StatsBar/>
      <Services goto={goto}/>
      <About goto={goto}/>
      <Process goto={goto}/>
      <window.ReviewMarquee/>
      <ReviewsCarousel/>
      <VsKetten/>
      <KeywordsSEO/>
      <FAQ/>
      <GoogleMapsBlock/>
      <BookingSection/>
    </>);
  } else if (route === "leistungen") page = <LeistungenPage goto={goto}/>;
  else if (route === "steinschlag") page = <SteinschlagPageLong goto={goto}/>;
  else if (route === "versicherung") page = <VersicherungPageLong goto={goto}/>;
  else if (route === "warum") page = <WarumPage goto={goto}/>;
  else if (route === "standorte") page = <StadtteilePage goto={goto}/>;
  else if (route === "kalibrierung") page = <KalibrierungPage goto={goto}/>;
  else if (route === "glasarten") page = <GlasartenPage goto={goto}/>;
  else if (route === "hersteller") page = <HerstellerPage goto={goto}/>;
  else if (route === "saison") page = <SaisonPage goto={goto}/>;
  else if (route === "selbstbeteiligung") page = <SelbstbeteiligungPage goto={goto}/>;
  else if (route === "parkschaden") page = <ParkschadenPage goto={goto}/>;
  else if (route === "warum-ext") page = <WarumExtPage goto={goto}/>;
  else if (route === "kontakt-ext") page = <KontaktExtPage goto={goto}/>;
  else if (route === "folien") page = <FolienPage goto={goto}/>;
  else if (route === "versiegelung") page = <VersiegelungPage goto={goto}/>;
  else if (route === "gutachten") page = <GutachtenPage goto={goto}/>;
  else if (route === "eauto") page = <EAutoPage goto={goto}/>;
  else if (route === "oldtimer") page = <OldtimerPage goto={goto}/>;
  else if (route === "flotte") page = <FlottePage goto={goto}/>;
  else if (route === "ratgeber") page = <RatgeberHubPage goto={goto}/>;
  else if (route === "suv") page = <SuvPage goto={goto}/>;
  else if (route === "gewerbevertrag") page = <GewerbevertragPage goto={goto}/>;
  else if (route === "notfall") page = <NotfallPage goto={goto}/>;
  else if (route === "herstellerkunde") page = <HerstellerkundePage goto={goto}/>;
  else if (route === "glossar") page = <GlossarPage goto={goto}/>;
  else if (route === "faqhub") page = <FaqHubPage goto={goto}/>;
  else if (route === "unfall") page = <UnfallratgeberPage goto={goto}/>;
  else if (route === "qualitaet") page = <QualitaetPage goto={goto}/>;
  else if (route === "motorrad") page = <MotorradPage goto={goto}/>;
  else if (route === "traktor") page = <TraktorPage goto={goto}/>;
  else if (route === "boot") page = <BootPage goto={goto}/>;
  else if (route === "wischer") page = <WischerPage goto={goto}/>;
  else if (route === "pflege") page = <PflegePage goto={goto}/>;
  else if (route === "versicherer") page = <VersichererPage goto={goto}/>;
  else if (route === "hu") page = <HuPage goto={goto}/>;
  else if (route === "leasing") page = <LeasingPage goto={goto}/>;
  else if (route === "gewaehr") page = <GewaehrleistungPage goto={goto}/>;
  else if (route === "werkstatttour") page = <WerkstatttourPage goto={goto}/>;
  else if (route === "jahreszeiten") page = <JahreszeitenPage goto={goto}/>;
  else if (route === "tagesgeschaeft") page = <TagesgeschaeftPage goto={goto}/>;
  else if (route === "erfahrungen") page = <ErfahrungsberichtePage goto={goto}/>;
  else if (route === "vorhernachher") page = <VorherNachherPage goto={goto}/>;
  else if (route === "team") page = <TeamPage goto={goto}/>;
  else if (route === "geschichte") page = <GeschichtePage goto={goto}/>;
  else if (route === "nachbarschaft") page = <NachbarschaftPage goto={goto}/>;
  else if (route === "nachhaltigkeit") page = <NachhaltigkeitPage goto={goto}/>;
  else if (route === "ausbildung") page = <AusbildungPage goto={goto}/>;
  else if (route === "socialmedia") page = <SocialMediaPage goto={goto}/>;
  else if (route === "vw-golf") page = <VwGolfPage goto={goto}/>;
  else if (route === "vw-passat") page = <VwPassatPage goto={goto}/>;
  else if (route === "vw-tiguan") page = <VwTiguanPage goto={goto}/>;
  else if (route === "vw-touran") page = <VwTouranPage goto={goto}/>;
  else if (route === "vw-t6") page = <VwT6Page goto={goto}/>;
  else if (route === "bmw-3") page = <Bmw3Page goto={goto}/>;
  else if (route === "bmw-5") page = <Bmw5Page goto={goto}/>;
  else if (route === "bmw-x1") page = <BmwX1Page goto={goto}/>;
  else if (route === "bmw-x3") page = <BmwX3Page goto={goto}/>;
  else if (route === "bmw-x5") page = <BmwX5Page goto={goto}/>;
  else if (route === "tesla-3") page = <TeslaModel3Page goto={goto}/>;
  else if (route === "tesla-y") page = <TeslaModelYPage goto={goto}/>;
  else if (route === "vw-id3") page = <VwId3Page goto={goto}/>;
  else if (route === "vw-id4") page = <VwId4Page goto={goto}/>;
  else if (route === "porsche-taycan") page = <PorscheTaycanPage goto={goto}/>;
  else if (route === "autobahn-steinschlag") page = <AutobahnSteinschlagPage goto={goto}/>;
  else if (route === "einbruch") page = <EinbruchPage goto={goto}/>;
  else if (route === "marderbiss") page = <MarderbissPage goto={goto}/>;
  else if (route === "hagelschaden") page = <HagelschadenPage goto={goto}/>;
  else if (route === "winter") page = <WinterPage goto={goto}/>;
  else if (route === "fruehling") page = <FruehlingPage goto={goto}/>;
  else if (route === "sommer") page = <SommerPage goto={goto}/>;
  else if (route === "herbst") page = <HerbstPage goto={goto}/>;
  else if (route === "pollenflug") page = <PollenflugPage goto={goto}/>;
  else if (route === "verbundglas") page = <VerbundglasPage goto={goto}/>;
  else if (route === "akustik-folie") page = <AkustikFoliePage goto={goto}/>;
  else if (route === "hud") page = <HeadUpDisplayPage goto={goto}/>;
  else if (route === "beheizte-scheiben") page = <BeheizteScheibenPage goto={goto}/>;
  else if (route === "regensensor") page = <RegensensorPage goto={goto}/>;
  else if (route === "online-termin") page = <OnlineTerminPage goto={goto}/>;
  else if (route === "diagnose-ablauf") page = <DiagnoseAblaufPage goto={goto}/>;
  else if (route === "hol-bring-service") page = <HolBringServicePage goto={goto}/>;
  else if (route === "leihwagen") page = <LeihwagenPage goto={goto}/>;
  else if (route === "express-service") page = <ExpressServicePage goto={goto}/>;
  else if (route === "hersteller-garantie") page = <HerstellerGarantiePage goto={goto}/>;
  else if (route === "sikaflex") page = <SikaflexPage goto={goto}/>;
  else if (route === "montage-standards") page = <MontageStandardsPage goto={goto}/>;
  else if (route === "werkstatt-ausstattung") page = <WerkstattAusstattungPage goto={goto}/>;
  else if (route === "meisterbetrieb") page = <MeisterbetriebPage goto={goto}/>;
  else if (route === "merc-a") page = <MercAPage goto={goto}/>;
  else if (route === "merc-c") page = <MercCPage goto={goto}/>;
  else if (route === "merc-e") page = <MercEPage goto={goto}/>;
  else if (route === "merc-s") page = <MercSPage goto={goto}/>;
  else if (route === "merc-sprinter") page = <MercSprinterPage goto={goto}/>;
  else if (route === "kontakt") page = <KontaktPage goto={goto}/>;
  else if (route.startsWith("stadtteil-")) {
    const n = route.replace("stadtteil-","");
    // Match district name case-insensitively against the data dicts
    const findKey = (dict) => dict ? Object.keys(dict).find(k => k.toLowerCase() === n.toLowerCase()) : null;
    const k1 = findKey(window.DISTRICT_DATA_1);
    const k2 = findKey(window.DISTRICT_DATA_2);
    if (k1) page = <DistrictDetailPage goto={goto} name={k1}/>;
    else if (k2) page = <DistrictDetailPage2 goto={goto} name={k2}/>;
    else page = <StadtteilPage goto={goto} name={n}/>;
  }
  else page = <div className="p-20 text-center"><h1 className="text-[40px] font-bold">Seite nicht gefunden</h1><p className="mt-4 text-ink/65">Die angeforderte Seite existiert nicht. <button onClick={() => goto("home")} className="text-brand-red font-semibold underline">Zur Startseite</button></p></div>;

  return (
    <div className="min-h-screen flex flex-col bg-bg pb-[56px] md:pb-0">
      <AnnouncementBar/>
      <Navbar goto={goto} current={route}/>
      <main className="flex-1">{page}</main>
      <Footer goto={goto}/>
      <StickyMobile/>
      <WhatsAppFloat/>
    </div>
  );
}

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