const { useState } = React;

// ——— LEISTUNGEN: expanded ———
const LeistungenPage = ({ goto }) => {
  const cats = [
    { route: "pkw", icon: Ico.car, t: "PKW-Autoglas", d: "Für alle Marken und Modelle. Original oder OE-Qualität, Kalibrierung inklusive.", time: "24 Stunden", long: "Vom Kleinwagen bis zur Oberklasse: Wir tauschen und reparieren Windschutzscheiben, Seiten- und Heckscheiben aller PKW-Hersteller. Volkswagen, Audi, BMW, Mercedes, Opel, Ford, Toyota, Hyundai, Renault und viele mehr.", features: ["Originalscheiben OEM","OE-Qualität günstiger","Regen- und Lichtsensor","Heizbare Scheiben","Head-Up-Display"] },
    { route: "transporter", icon: Ico.van, t: "Transporter & Lieferwagen", d: "Sprinter, Crafter, Vito, Transit, Ducato. Handwerker bleiben mobil.", time: "24 Stunden", long: "Ihre Zeit ist Geld. Wir priorisieren Handwerker- und Lieferfahrzeuge und haben die gängigsten Transporter-Scheiben am Lager.", features: ["Mercedes Sprinter","VW Crafter & Transporter","Ford Transit","Fiat Ducato","Iveco Daily","Renault Master"] },
    { route: "lkw", icon: Ico.truck, t: "LKW-Autoglas", d: "Frontscheiben für 7,5 bis 40 Tonnen. Flottenservice auf Abruf.", time: "24 bis 48h", long: "Für LKW und Zugmaschinen beschaffen wir Scheiben auch für ältere Modelle. Mobiler Einbau im Depot auf Anfrage.", features: ["MAN TGX & TGS","Mercedes Actros","Volvo FH & FM","Scania R-Serie","DAF XF","Flottenverträge"] },
    { route: "wohnmobil", icon: Ico.rv, t: "Wohnmobil & Caravan", d: "Panorama-Frontscheiben, Heckfenster, Alkoven, teilintegriert.", time: "2 bis 5 Tage", long: "Wohnmobil-Scheiben sind speziell. Wir kennen die Besonderheiten von Alkoven, Teilintegrierten und Liner-Modellen.", features: ["Hymer","Dethleffs","Bürstner","Knaus","Carthago","Frankia"] },
    { route: "busse", icon: Ico.bus, t: "Busse & Shuttle", d: "Reisebus, Kleinbus, Shuttle. Feste Ansprechperson für Betreiber.", time: "auf Absprache", long: "Busunternehmen brauchen Zuverlässigkeit. Wir arbeiten als fester Partner mit Betreibern im Ruhrgebiet zusammen.", features: ["Mercedes Tourismo","Setra ComfortClass","MAN Lion's Coach","Neoplan","VDL Futura","Van Hool"] },
    { route: "steinschlag", icon: Ico.crack, t: "Steinschlag & Risse", d: "Harzverfüllung in 40 Minuten. Oft kostenfrei bei Vollkasko.", time: "40 Minuten", long: "Ein kleiner Steinschlag ist kein Weltuntergang – wenn man schnell handelt. Wir prüfen, ob eine Reparatur möglich ist und sparen Ihnen so den teuren Tausch.", features: ["Sofort-Termin möglich","2-Euro-Regel Check","Harzverfüllung nach DIN","Eigenanteilsfrei bei Vollkasko","Sichtfeld-Prüfung","Garantie auf Reparatur"] },
  ];
  return (
    <SimplePage goto={goto} title="Unsere Leistungen" subtitle="Vom Kleinwagen bis zum 40-Tonner – wir kümmern uns um jedes Fahrzeug. Originalscheiben, zertifizierter Einbau, Direktabrechnung mit Ihrer Versicherung.">
      <section className="bg-white py-16 md:py-20">
        <div className="max-w-[1280px] mx-auto px-4 md:px-8 space-y-6">
          {cats.map((c, i) => (
            <div key={c.t} className={`grid md:grid-cols-[auto,1fr,auto] gap-6 md:gap-10 p-6 md:p-8 rounded-2xl ring-1 ring-ink/10 hover:ring-brand-red/30 transition ${i%2===0?"bg-bg":"bg-white"}`}>
              <div className="w-16 h-16 rounded-xl bg-brand-red text-white grid place-items-center shrink-0">
                <c.icon className="w-8 h-8"/>
              </div>
              <div>
                <div className="flex items-center gap-3 flex-wrap">
                  <h3 className="text-[24px] md:text-[28px] font-bold">{c.t}</h3>
                  <Pill tone="lightRed" className="!normal-case">{c.time}</Pill>
                </div>
                <p className="text-ink/65 text-[15px] mt-3 leading-relaxed">{c.long}</p>
                <div className="mt-4 flex flex-wrap gap-2">
                  {c.features.map(f => (
                    <span key={f} className="px-3 py-1 rounded-full bg-ink/5 ring-1 ring-ink/10 text-ink/70 text-[12px]">{f}</span>
                  ))}
                </div>
              </div>
              <div className="md:self-center flex md:flex-col gap-2">
                {c.route && (
                  <button onClick={() => goto(c.route)} className="inline-flex items-center gap-2 h-11 px-5 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[13px] whitespace-nowrap">
                    Mehr erfahren <Ico.arrow className="w-4 h-4"/>
                  </button>
                )}
                <a href="#call" className="inline-flex items-center gap-2 h-11 px-5 rounded-md bg-ink hover:bg-ink-soft text-white font-semibold text-[13px] whitespace-nowrap">
                  <Ico.phone className="w-4 h-4"/> Anfragen
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>
      <ReviewsCarousel/>
      <GoogleMapsBlock/>
    </SimplePage>
  );
};

// ——— STEINSCHLAG: deep-dive ———
const SteinschlagPage = ({ goto }) => (
  <SimplePage goto={goto} title="Steinschlag-Reparatur in 40 Minuten"
    subtitle="Ein kleiner Treffer wird schnell zum Riss – besonders bei Temperaturunterschieden. Wir verfüllen den Schaden mit Originalharz, meist eigenanteilsfrei über Ihre Vollkasko.">
    <section className="bg-white py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
        <h2 className="text-[32px] md:text-[40px] font-bold leading-tight tracking-tight">Die 2-Euro-Regel</h2>
        <p className="text-ink/65 text-[15px] mt-3 max-w-[720px]">Ob ein Steinschlag repariert werden kann, entscheiden drei Faktoren: Größe, Lage und Art des Treffers. Als Faustregel gilt die 2-Euro-Regel.</p>
        <div className="mt-8 grid md:grid-cols-3 gap-4">
          {[
            {t: "Reparatur möglich", d: "Treffer kleiner als ein 2-Euro-Stück, nicht im direkten Sichtfeld des Fahrers, kein Riss zum Rand der Scheibe.", tone: "ok"},
            {t: "Prüfen lassen", d: "Im Sichtfeld oder am Rand der Scheibe. Wir prüfen vor Ort und beraten Sie ehrlich.", tone: "mid"},
            {t: "Tausch nötig", d: "Riss über 5 cm, mehrere Einschläge nah beieinander oder bis zur Kante gerissen.", tone: "bad"},
          ].map(c => (
            <div key={c.t} className={`p-6 rounded-xl ring-1 ${c.tone==="ok"?"bg-emerald-50 ring-emerald-200":c.tone==="bad"?"bg-brand-red/5 ring-brand-red/20":"bg-bg ring-ink/10"}`}>
              <div className={`w-10 h-10 rounded-full grid place-items-center ${c.tone==="ok"?"bg-emerald-500 text-white":c.tone==="bad"?"bg-brand-red text-white":"bg-ink/10"}`}>
                {c.tone==="ok" ? <Ico.check className="w-5 h-5"/> : c.tone==="bad" ? <Ico.close className="w-4 h-4"/> : <Ico.clock className="w-4 h-4"/>}
              </div>
              <h3 className="text-[18px] font-bold mt-4">{c.t}</h3>
              <p className="text-[14px] text-ink/65 mt-2 leading-relaxed">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section className="bg-bg py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8 grid md:grid-cols-2 gap-10 items-center">
        <div>
          <Pill tone="lightRed" className="!normal-case">Der Ablauf</Pill>
          <h2 className="text-[32px] md:text-[40px] font-bold mt-4 leading-tight tracking-tight">So funktioniert die Reparatur</h2>
          <ol className="mt-6 space-y-4">
            {[
              {t: "Prüfung und Reinigung", d: "Wir säubern den Einschlag und saugen Schmutz und Feuchtigkeit ab."},
              {t: "Vakuum anlegen", d: "Das Harz muss tief in den kleinsten Riss eindringen – dafür sorgt Unterdruck."},
              {t: "Harz injizieren", d: "Originalharz füllt den Schaden blasenfrei aus."},
              {t: "UV-Aushärtung", d: "Spezial-Lampe härtet das Harz in wenigen Minuten vollständig aus."},
              {t: "Politur und Endkontrolle", d: "Überschüssiges Harz wird abgezogen, die Oberfläche poliert."},
            ].map((s, i) => (
              <li key={s.t} className="flex gap-4">
                <div className="w-9 h-9 rounded-full bg-brand-red text-white grid place-items-center font-bold shrink-0">{i+1}</div>
                <div>
                  <div className="font-bold text-[16px]">{s.t}</div>
                  <div className="text-[14px] text-ink/65 mt-0.5">{s.d}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
        <ImgPlaceholder label="Harzverfüllung Close-Up" aspect="aspect-[4/5]" tone="light"/>
      </div>
    </section>
    <section className="bg-white py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
        <h2 className="text-[32px] md:text-[40px] font-bold text-center">Warum schnell handeln wichtig ist</h2>
        <div className="mt-8 grid md:grid-cols-3 gap-4">
          {[
            {t: "Temperaturwechsel", d: "Warmer Motor, kalte Scheibe: Der Riss wandert."},
            {t: "Feuchtigkeit", d: "Wasser dringt ein, macht eine Reparatur unmöglich."},
            {t: "Vibrationen", d: "Jede Bodenwelle verlängert den Riss."},
          ].map(x => (
            <div key={x.t} className="p-6 rounded-xl bg-bg ring-1 ring-ink/10">
              <h3 className="font-bold text-[18px]">{x.t}</h3>
              <p className="text-[14px] text-ink/65 mt-2">{x.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </SimplePage>
);

// ——— VERSICHERUNG: expanded ———
const VersicherungPage = ({ goto }) => (
  <SimplePage goto={goto} title="Versicherung & Kosten" subtitle="Autoglas ist Sache der Kaskoversicherung. Wir erklären transparent, was welche Versicherung zahlt – und übernehmen die komplette Abwicklung für Sie.">
    <section className="bg-white py-16 md:py-20">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8 grid md:grid-cols-3 gap-4">
        {[
          {t: "Teilkasko", p: "zahlt Glasschäden", d: "Steinschlag und Scheibentausch sind Teilkasko-Kernleistung. Keine Rückstufung in der Schadenfreiheitsklasse. Selbstbeteiligung laut Police, meist 150 €.", features: ["Keine Rückstufung","Übernahme komplett","SB meist 150 €"]},
          {t: "Vollkasko", p: "noch besser", d: "Enthält Teilkasko plus mehr. Steinschlag-Reparatur oft komplett eigenanteilsfrei – die Versicherung spart sich den teuren Tausch.", features: ["Reparatur oft 0 € SB","Keine Rückstufung","Komplette Übernahme"], highlight: true},
          {t: "Selbstzahler", p: "fair kalkuliert", d: "Kein Kasko? Wir erstellen ein transparentes Festpreis-Angebot innerhalb einer Stunde. Ratenzahlung auf Anfrage möglich.", features: ["Festpreis","Ratenzahlung","Keine versteckten Kosten"]},
        ].map(x => (
          <div key={x.t} className={`p-8 rounded-xl ${x.highlight?"bg-brand-red text-white shadow-xl shadow-brand-red/20":"bg-bg ring-1 ring-ink/10"}`}>
            <div className={`text-[11px] uppercase tracking-wider font-semibold ${x.highlight?"text-white/70":"text-ink/50"}`}>{x.p}</div>
            <h3 className="text-[28px] font-bold mt-2">{x.t}</h3>
            <p className={`text-[14px] mt-4 leading-relaxed ${x.highlight?"text-white/85":"text-ink/65"}`}>{x.d}</p>
            <ul className="mt-5 space-y-2">
              {x.features.map(f => (
                <li key={f} className="flex items-center gap-2 text-[13px]">
                  <Ico.check className={`w-4 h-4 shrink-0 ${x.highlight?"text-white":"text-brand-red"}`}/> {f}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
    <section className="bg-bg py-16 md:py-20">
      <div className="max-w-[900px] mx-auto px-4 md:px-8">
        <h2 className="text-[32px] md:text-[40px] font-bold text-center">Wir übernehmen für Sie</h2>
        <div className="mt-8 space-y-3">
          {[
            {t: "Schadensmeldung an Ihre Versicherung", d: "Wir informieren Ihre Kasko direkt mit allen notwendigen Unterlagen."},
            {t: "Kostenvoranschlag und Freigabe", d: "Wir holen die Freigabe ein – keine Vorleistung von Ihnen nötig."},
            {t: "Reparatur oder Scheibentausch", d: "Fachgerechter Einbau nach Herstellervorgaben, Kalibrierung inklusive."},
            {t: "Direktabrechnung mit der Versicherung", d: "Sie zahlen nur die Selbstbeteiligung (falls vorhanden), alles andere geht direkt an uns."},
          ].map((s,i) => (
            <div key={s.t} className="flex gap-4 p-5 rounded-xl bg-white ring-1 ring-ink/10">
              <div className="w-10 h-10 rounded-full bg-brand-red text-white grid place-items-center font-bold shrink-0">{i+1}</div>
              <div>
                <div className="font-bold text-[16px]">{s.t}</div>
                <div className="text-[14px] text-ink/65 mt-1">{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section className="bg-white py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
        <h2 className="text-[32px] md:text-[40px] font-bold text-center">Wir arbeiten mit allen Versicherern</h2>
        <p className="text-ink/60 text-[15px] text-center mt-3 max-w-[640px] mx-auto">Egal bei welcher Kasko Sie versichert sind – wir übernehmen die komplette Abwicklung.</p>
        <div className="mt-10 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
          {["HUK24","HUK-Coburg","Allianz","AXA","DEVK","ERGO","R+V","Gothaer","VHV","Württembergische","LVM","Generali","Zurich","Helvetia","CosmosDirekt","DA Direkt"].map(v => (
            <div key={v} className="h-16 rounded-lg bg-bg ring-1 ring-ink/10 grid place-items-center text-[13px] font-semibold text-ink/70">
              {v}
            </div>
          ))}
        </div>
      </div>
    </section>
  </SimplePage>
);

// ——— WARUM WIR: expanded ———
const WarumPage = ({ goto }) => (
  <SimplePage goto={goto} title="Warum Autoglas Nord Essen" subtitle="Warum 9 Tage auf einen Termin warten, wenn die Scheibe morgen drin sein kann? Hier die wichtigsten Gründe im Detail.">
    <VsKetten/>
    <section className="bg-navy text-white py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
        <h2 className="text-[32px] md:text-[42px] font-bold text-center">Freie Werkstattwahl – Ihr gutes Recht</h2>
        <p className="text-white/70 text-[15px] text-center mt-4 max-w-[720px] mx-auto leading-relaxed">
          Auch wenn Ihre Versicherung eine Werkstattbindung oder Partnerwerkstätten vorsieht: Laut höchstrichterlicher Rechtsprechung (BGH-Urteil) haben Sie das Recht, jede anerkannte Fachwerkstatt zu wählen. Wir klären das im Schadensfall direkt mit Ihrer Versicherung – keine Diskussion nötig.
        </p>
        <div className="mt-10 grid md:grid-cols-3 gap-4">
          {[
            {t: "§ 1 der KFZ-Haftpflicht", d: "Freie Wahl der Werkstatt ist gesetzlich garantiert."},
            {t: "BGH-Urteil", d: "Bei gleichwertiger Qualität darf die Versicherung nicht auf einer Partnerwerkstatt bestehen."},
            {t: "Unsere Zertifizierungen", d: "Meisterbetrieb mit allen notwendigen Freigaben."},
          ].map(x => (
            <div key={x.t} className="p-6 rounded-xl bg-white/5 ring-1 ring-white/10">
              <h3 className="font-bold text-[18px]">{x.t}</h3>
              <p className="text-[14px] text-white/65 mt-2">{x.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
    <ReviewsCarousel/>
  </SimplePage>
);

// ——— STADTTEILE OVERVIEW ———
const STADTTEILE = [
  {n: "Altenessen", ref: "Standort Nord", min: "0 Min – unser Zuhause"},
  {n: "Stoppenberg", ref: "Nachbar-Stadtteil", min: "5 Min"},
  {n: "Katernberg", ref: "Nachbar-Stadtteil", min: "6 Min"},
  {n: "Borbeck", ref: "Essen-West", min: "10 Min über A42"},
  {n: "Frohnhausen", ref: "Essen-West", min: "12 Min"},
  {n: "Rüttenscheid", ref: "Szene-Viertel", min: "12 Min"},
  {n: "Kray", ref: "Essen-Ost", min: "10 Min über A40"},
  {n: "Steele", ref: "Essen-Ost", min: "12 Min"},
  {n: "Holsterhausen", ref: "Essen-Zentrum", min: "10 Min"},
  {n: "Bergerhausen", ref: "Essen-Süd", min: "15 Min"},
  {n: "Kettwig", ref: "Essen-Süd", min: "20 Min"},
  {n: "Werden", ref: "Essen-Süd", min: "18 Min"},
  {n: "Burgaltendorf", ref: "Essen-Ost", min: "16 Min"},
  {n: "Huttrop", ref: "Essen-Ost", min: "10 Min"},
];

const StadtteilePage = ({ goto }) => (
  <div>
    <section className="relative bg-navy text-white overflow-hidden">
      <div className="relative w-full" style={{ aspectRatio: "16/9", maxHeight: "78vh" }}>
        <img
          src="assets/hero/autoglas-in-essen-fuer-alle-stadtteile.png"
          alt="Skyline von Essen mit Hauptbahnhof und Hochhäusern"
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-navy/85 via-navy/55 to-navy/10"/>
        <div className="absolute inset-0 bg-gradient-to-t from-navy/80 via-transparent to-navy/30"/>
        <div className="relative max-w-[1280px] mx-auto px-4 md:px-8 h-full flex items-end md:items-center">
          <div className="pb-10 md:pb-0 max-w-[680px]">
            <div className="text-[12px] text-white/60 tracking-wider uppercase mb-4 font-semibold">
              <button onClick={() => goto("home")} className="hover:text-white">Start</button>
              <span className="mx-2 opacity-30">/</span> Stadtteile
            </div>
            <h1 className="text-[40px] md:text-[64px] font-bold leading-[1.02] tracking-tight">
              Autoglas in Essen –<br/>für alle Stadtteile.
            </h1>
            <p className="text-white/80 text-[16px] md:text-[18px] mt-5 leading-relaxed">
              14 Stadtteile, eine Werkstatt. Über A40, A42 und B224 sind wir aus ganz Essen in wenigen Minuten erreichbar. Hol- und Bringservice auf Anfrage kostenfrei.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section className="bg-white py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {STADTTEILE.map(s => (
          <button key={s.n} onClick={() => goto("stadtteil-"+s.n)} className="group text-left p-5 rounded-xl ring-1 ring-ink/10 hover:ring-brand-red/40 hover:bg-brand-red/5 transition">
            <div className="flex items-start justify-between gap-3">
              <div>
                <div className="text-[19px] font-bold">{s.n}</div>
                <div className="text-[12px] text-ink/50 mt-0.5">{s.ref}</div>
              </div>
              <Ico.arrow className="w-4 h-4 text-ink/30 group-hover:text-brand-red mt-1.5 shrink-0"/>
            </div>
            <div className="mt-4 pt-3 border-t border-ink/10 flex items-center gap-2 text-[12px]">
              <Ico.clock className="w-3.5 h-3.5 text-brand-red"/>
              <span className="text-ink/60">{s.min}</span>
            </div>
          </button>
        ))}
      </div>
    </section>
    <GoogleMapsBlock/>
  </div>
);

// ——— STADTTEIL DETAIL: full SEO page per neighborhood ———
const StadtteilPage = ({ goto, name }) => {
  const s = STADTTEILE.find(x => x.n === name) || {n: name, ref: "Essen", min: "wenige Minuten"};
  return (
    <SimplePage goto={goto} title={`Autoglas in Essen-${s.n}`}
      subtitle={`Ihr Autoglas-Fachbetrieb für ${s.n} und Umgebung. Steinschlag heute, Scheibentausch morgen – unsere Werkstatt in Altenessen ist von ${s.n} aus in ${s.min} erreichbar.`}>
      <section className="bg-white py-16 md:py-20">
        <div className="max-w-[1100px] mx-auto px-4 md:px-8 grid md:grid-cols-2 gap-10 items-start">
          <div>
            <h2 className="text-[28px] md:text-[36px] font-bold leading-tight tracking-tight">
              Schnelle Anfahrt von {s.n} nach Altenessen
            </h2>
            <p className="text-ink/65 text-[15px] mt-4 leading-relaxed">
              Unsere Werkstatt in der Hülsenbruchstraße 5 liegt verkehrsgünstig im Essener Norden. Aus {s.n} sind Sie über die B224 und A42 in der Regel in {s.min} bei uns. Kostenlose Parkplätze direkt vor der Halle, ÖPNV-Anbindung über die Buslinien in Altenessen.
            </p>
            <h3 className="text-[20px] font-bold mt-8">Unsere Services für Autofahrer aus {s.n}</h3>
            <ul className="mt-4 space-y-3 text-[15px]">
              {[
                "Steinschlag-Reparatur in 40 Minuten – oft noch am selben Tag",
                "Scheibentausch innerhalb von 24 Stunden",
                "Hol- und Bringservice aus "+s.n+" auf Anfrage kostenfrei",
                "Wartebereich mit Kaffee, WLAN und Lademöglichkeiten",
                "Ersatzwagen auf Wunsch reservierbar",
                "Direktabrechnung mit Ihrer Kaskoversicherung",
              ].map(x => (
                <li key={x} className="flex gap-3 items-start"><span className="w-5 h-5 rounded-full bg-brand-red grid place-items-center shrink-0 mt-0.5"><Ico.check className="w-3 h-3 text-white"/></span><span>{x}</span></li>
              ))}
            </ul>
            <div className="mt-8 flex flex-wrap gap-3">
              <a href="#call" className="inline-flex items-center gap-2 h-12 px-6 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[14px]"><Ico.phone className="w-4 h-4"/> {BUSINESS.phoneDisplay}</a>
              <a href="#wa" className="inline-flex items-center gap-2 h-12 px-6 rounded-md bg-wa hover:bg-wa-dark text-white font-semibold text-[14px]"><Ico.wa className="w-4 h-4"/> WhatsApp</a>
            </div>
          </div>
          <div className="aspect-[4/3] rounded-2xl overflow-hidden ring-1 ring-ink/10 bg-bg relative">
            <iframe
              title={`Route von ${s.n}`}
              src="https://www.openstreetmap.org/export/embed.html?bbox=6.95%2C51.45%2C7.10%2C51.52&layer=mapnik&marker=51.49%2C7.02"
              className="w-full h-full"
              loading="lazy"
            />
            <div className="absolute top-4 left-4 bg-white/95 backdrop-blur rounded-lg p-3 shadow-lg ring-1 ring-ink/10">
              <div className="text-[11px] uppercase tracking-wider text-ink/50 font-semibold">Von {s.n}</div>
              <div className="text-[14px] font-bold">{s.min}</div>
            </div>
          </div>
        </div>
      </section>
      <section className="bg-bg py-16 md:py-20">
        <div className="max-w-[1100px] mx-auto px-4 md:px-8">
          <h2 className="text-[28px] md:text-[36px] font-bold">Häufige Autoglas-Themen in {s.n}</h2>
          <div className="mt-8 grid md:grid-cols-2 gap-4">
            {[
              {t: "Steinschlag auf der A40 / A42", d: "Die Hauptverkehrsadern rund um "+s.n+" sind berüchtigt für Steinschläge. Wir sind in wenigen Minuten der nächste Spezialist."},
              {t: "Parkplatzschaden nach Einbruch", d: "Seitenscheibe kaputt nach Einbruchversuch? Wir tauschen kurzfristig und helfen bei der Schadensmeldung."},
              {t: "Versicherungsabwicklung", d: "Direktabrechnung mit HUK, Allianz, AXA und allen anderen – keine Vorkasse nötig."},
              {t: "Kalibrierung Fahrassistenz", d: "Moderne Fahrzeuge brauchen nach jedem Scheibentausch eine Kalibrierung. Bei uns inklusive."},
            ].map(x => (
              <div key={x.t} className="p-6 rounded-xl bg-white ring-1 ring-ink/10">
                <h3 className="font-bold text-[17px]">{x.t}</h3>
                <p className="text-[14px] text-ink/65 mt-2 leading-relaxed">{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <ReviewsCarousel/>
    </SimplePage>
  );
};

const KontaktPage = ({ goto }) => (
  <div>
    <section className="relative bg-navy text-white overflow-hidden">
      <div className="relative w-full" style={{ aspectRatio: "16/9", maxHeight: "78vh" }}>
        <img
          src="assets/hero/kontakt.png"
          alt="Kontakt zu Autoglas Nord Essen – Kundenempfang mit Blick in die Werkstatt"
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-navy/85 via-navy/55 to-navy/10"/>
        <div className="absolute inset-0 bg-gradient-to-t from-navy/80 via-transparent to-navy/30"/>
        <div className="relative max-w-[1280px] mx-auto px-4 md:px-8 h-full flex items-end md:items-center">
          <div className="pb-10 md:pb-0 max-w-[640px]">
            <div className="text-[12px] text-white/60 tracking-wider uppercase mb-4 font-semibold">
              <button onClick={() => goto("home")} className="hover:text-white">Start</button>
              <span className="mx-2 opacity-30">/</span> Kontakt
            </div>
            <h1 className="text-[40px] md:text-[64px] font-bold leading-[1.02] tracking-tight">
              Direkt zum Inhaber.
            </h1>
            <p className="text-white/80 text-[16px] md:text-[18px] mt-5 leading-relaxed">
              Ohne Warteschleife, ohne Callcenter. Schreiben Sie uns auf WhatsApp, rufen Sie an oder kommen Sie spontan vorbei – wir sind ein Familienbetrieb in Essen-Altenessen.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <a href="#call" className="inline-flex items-center gap-2 h-12 px-6 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[14px]">
                <Ico.phone className="w-4 h-4"/> {BUSINESS.phoneDisplay}
              </a>
              <a href="#wa" className="inline-flex items-center gap-2 h-12 px-6 rounded-md bg-wa hover:bg-wa-dark text-white font-semibold text-[14px]">
                <Ico.wa className="w-4 h-4"/> WhatsApp
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <BookingSection/>
    <GoogleMapsBlock/>
  </div>
);

Object.assign(window, { LeistungenPage, SteinschlagPage, VersicherungPage, WarumPage, StadtteilePage, StadtteilPage, KontaktPage, STADTTEILE });