const { useState, useEffect, useRef, useMemo } = React;

// ——— Process (3 steps) ———
const Process = ({ goto }) => {
  const steps = [
    { n: "01", t: "Kontakt aufnehmen", d: "Rufen Sie uns an oder schreiben Sie per WhatsApp. Wir beraten Sie kostenlos und unverbindlich." },
    { n: "02", t: "Termin vereinbaren", d: "Wir finden einen Termin, der zu Ihnen passt. Meist schon am nächsten Werktag." },
    { n: "03", t: "Reparatur / Austausch", d: "Schnelle und fachgerechte Arbeit. Direktabrechnung mit Ihrer Versicherung inklusive." },
  ];
  return (
    <section className="bg-navy text-white py-20 md:py-24">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8">
        <div className="text-center max-w-[720px] mx-auto mb-14">
          <Pill tone="red" className="!normal-case">So einfach geht es</Pill>
          <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight">
            In 3 Schritten zur neuen Scheibe
          </h2>
        </div>
        <div className="grid md:grid-cols-3 gap-6 relative">
          {steps.map((s, i) => (
            <div key={s.n} className="relative">
              <div className="bg-white/5 rounded-xl p-7 ring-1 ring-white/10 hover:ring-brand-red/40 transition h-full">
                <div className="w-14 h-14 rounded-full bg-brand-red grid place-items-center font-bold text-[18px]">
                  {s.n}
                </div>
                <h3 className="text-[20px] font-bold mt-5">{s.t}</h3>
                <p className="text-white/65 text-[14px] mt-3 leading-relaxed">{s.d}</p>
              </div>
              {i < 2 && (
                <Ico.arrow className="hidden md:block absolute top-1/2 -right-3 -translate-y-1/2 w-6 h-6 text-brand-red bg-navy rounded-full p-0.5"/>
              )}
            </div>
          ))}
        </div>
        <div className="text-center mt-12">
          <a href="#call" className="inline-flex items-center gap-2 h-13 px-6 py-3.5 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[15px]">
            <Ico.phone className="w-5 h-5"/> Jetzt anrufen: {BUSINESS.phoneDisplay}
          </a>
        </div>
      </div>
    </section>
  );
};

// ——— Testimonials ———
const Testimonials = () => {
  const reviews = [
    { n: "Markus W.", o: "Essen · VW Passat", t: "Morgens angerufen, mittags war der Steinschlag weg. Kein Papierkram, alles ging direkt über die Versicherung. So soll es sein!", s: 5 },
    { n: "Selda K.", o: "Altenessen · Mercedes Sprinter", t: "Als Lieferdienst kann ich nicht drei Tage warten. Hier hatte ich am nächsten Morgen meine neue Scheibe drin. Super schnell und freundlich.", s: 5 },
    { n: "Holger B.", o: "Steele · Wohnmobil", t: "Die Panoramascheibe am Wohnmobil war eine Herausforderung, aber die Werkstatt hat top geliefert. Kommunikation 1A.", s: 5 },
    { n: "Anna L.", o: "Frohnhausen · BMW 1er", t: "Sehr freundliches Team, ehrliche Beratung. Steinschlag konnte repariert werden, kein teurer Tausch nötig. Absolut empfehlenswert!", s: 5 },
  ];
  return (
    <section className="bg-navy text-white py-20 md:py-24 border-t border-white/10">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8">
        <div className="text-center max-w-[720px] mx-auto mb-12">
          <Pill tone="red" className="!normal-case">Kundenstimmen</Pill>
          <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight">
            Das sagen unsere Kunden
          </h2>
          <div className="flex justify-center items-center gap-2 mt-4">
            <div className="flex gap-0.5 text-amber-400">
              {[0,1,2,3,4].map(i => <Ico.star key={i} className="w-5 h-5"/>)}
            </div>
            <span className="text-white/70 text-[14px]">4,9 aus 187 Google-Bewertungen</span>
          </div>
        </div>
        <div className="grid md:grid-cols-2 gap-5">
          {reviews.map(r => (
            <div key={r.n} className="bg-white/5 rounded-xl p-7 ring-1 ring-white/10">
              <div className="flex gap-0.5 text-amber-400 mb-4">
                {Array.from({length: r.s}).map((_,i) => <Ico.star key={i} className="w-4 h-4"/>)}
              </div>
              <p className="text-white/85 text-[15px] leading-relaxed">„{r.t}"</p>
              <div className="mt-5 pt-4 border-t border-white/10 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-brand-red/20 text-brand-red-light grid place-items-center font-bold">
                  {r.n.charAt(0)}
                </div>
                <div>
                  <div className="font-semibold text-[14px]">{r.n}</div>
                  <div className="text-[12px] text-white/55">{r.o}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— FAQ ———
const FAQ = () => {
  const faqs = [
    { q: "Wie lange dauert eine Steinschlag-Reparatur?", a: "In der Regel 30 bis 40 Minuten. Wir prüfen zuerst, ob die Reparatur möglich ist. Bei kleinen Treffern ist sie fast immer die bessere Wahl als ein Scheibentausch." },
    { q: "Rechnen Sie direkt mit meiner Versicherung ab?", a: "Ja. Wir übernehmen die komplette Abwicklung mit allen großen Kasko-Versicherern. Sie zahlen maximal Ihre Selbstbeteiligung." },
    { q: "Brauche ich einen Termin oder kann ich einfach vorbeikommen?", a: "Bei Steinschlag-Reparaturen reicht oft ein Anruf und Sie können direkt vorbeikommen. Für Scheibentausch vereinbaren wir einen festen Termin, meist am nächsten Werktag." },
    { q: "Verliere ich durch Werkstattbindung meinen Versicherungsschutz?", a: "Nein. Laut BGH-Rechtsprechung haben Sie auch bei Werkstattbindung das Recht auf freie Werkstattwahl. Wir klären das im Schadensfall direkt mit Ihrer Versicherung." },
    { q: "Kalibrieren Sie auch die Fahrassistenzsysteme?", a: "Ja, das ist bei modernen Fahrzeugen nach jedem Scheibentausch Pflicht. Wir erledigen das direkt in unserer Werkstatt mit." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="bg-white py-20 md:py-24">
      <div className="max-w-[900px] mx-auto px-4 md:px-8">
        <div className="text-center mb-12">
          <Pill tone="lightRed" className="!normal-case">Häufige Fragen</Pill>
          <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight">FAQ</h2>
        </div>
        <div className="space-y-3">
          {faqs.map((f, i) => (
            <div key={i} className="rounded-xl ring-1 ring-ink/10 bg-white overflow-hidden">
              <button onClick={() => setOpen(open === i ? -1 : i)} className="w-full text-left p-5 md:p-6 flex items-center justify-between gap-6">
                <span className="text-[16px] md:text-[17px] font-semibold text-ink">{f.q}</span>
                <span className={`w-8 h-8 rounded-full grid place-items-center shrink-0 transition ${open === i ? "bg-brand-red text-white rotate-45" : "bg-ink/5"}`}>
                  <Ico.plus className="w-4 h-4"/>
                </span>
              </button>
              {open === i && (
                <div className="px-5 md:px-6 pb-5 md:pb-6 text-[14px] md:text-[15px] text-ink/70 leading-relaxed">
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— Booking Section (inline, not modal) ———
const BookingSection = () => {
  const [sent, setSent] = useState(false);
  return (
    <section className="bg-navy text-white py-20 md:py-24">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8">
        <div className="text-center max-w-[720px] mx-auto mb-12">
          <Pill tone="red" className="!normal-case">Termin anfragen</Pill>
          <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight">
            Jetzt Termin vereinbaren
          </h2>
          <p className="text-white/65 mt-4 text-[15px]">
            Rufen Sie an, schreiben Sie per WhatsApp, oder füllen Sie das Formular aus. Wir melden uns innerhalb von 24 Stunden.
          </p>
        </div>
        <div className="grid md:grid-cols-[1.1fr,1fr] gap-8 max-w-[1000px] mx-auto">
          <div className="bg-white/5 rounded-xl p-6 md:p-8 ring-1 ring-white/10">
            {!sent ? (
            <>
              <div className="grid sm:grid-cols-2 gap-3">
                <input placeholder="Name*" className="h-12 px-4 rounded-md bg-white/5 ring-1 ring-white/15 focus:ring-brand-red outline-none text-[14px] text-white placeholder:text-white/40"/>
                <input placeholder="Telefon*" className="h-12 px-4 rounded-md bg-white/5 ring-1 ring-white/15 focus:ring-brand-red outline-none text-[14px] text-white placeholder:text-white/40"/>
                <input placeholder="E-Mail" className="h-12 px-4 rounded-md bg-white/5 ring-1 ring-white/15 focus:ring-brand-red outline-none text-[14px] text-white placeholder:text-white/40 sm:col-span-2"/>
                <select className="h-12 px-4 rounded-md bg-white/5 ring-1 ring-white/15 focus:ring-brand-red outline-none text-[14px] text-white sm:col-span-2">
                  <option className="text-ink">Schadensart wählen</option>
                  <option className="text-ink">Steinschlag</option>
                  <option className="text-ink">Riss in der Scheibe</option>
                  <option className="text-ink">Scheibentausch nötig</option>
                </select>
                <textarea placeholder="Beschreibung (optional)" className="p-4 rounded-md bg-white/5 ring-1 ring-white/15 focus:ring-brand-red outline-none text-[14px] text-white placeholder:text-white/40 sm:col-span-2 min-h-[100px]"/>
              </div>
              <button onClick={() => setSent(true)} className="mt-5 w-full h-13 py-3.5 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[15px] inline-flex items-center justify-center gap-2">
                Termin anfragen <Ico.arrow className="w-4 h-4"/>
              </button>
            </>
            ) : (
              <div className="text-center py-8">
                <div className="w-14 h-14 mx-auto rounded-full bg-emerald-500/20 text-emerald-300 grid place-items-center"><Ico.check className="w-7 h-7"/></div>
                <h3 className="text-[24px] font-bold mt-5">Vielen Dank!</h3>
                <p className="text-white/65 mt-2 text-[14px]">Wir melden uns innerhalb von 24 Stunden.</p>
              </div>
            )}
          </div>
          <div className="space-y-3">
            <a href="#call" className="flex items-center gap-4 p-5 rounded-xl bg-white/5 ring-1 ring-white/10 hover:ring-brand-red/40 hover:bg-white/[0.08] transition">
              <div className="w-12 h-12 rounded-full bg-brand-red grid place-items-center shrink-0"><Ico.phone className="w-5 h-5"/></div>
              <div>
                <div className="text-[11px] uppercase tracking-wide text-white/50 font-semibold">Telefon</div>
                <div className="font-bold text-[16px] mt-0.5">{BUSINESS.phoneDisplay}</div>
              </div>
            </a>
            <a href="#wa" className="flex items-center gap-4 p-5 rounded-xl bg-white/5 ring-1 ring-white/10 hover:ring-wa/50 hover:bg-white/[0.08] transition">
              <div className="w-12 h-12 rounded-full bg-wa grid place-items-center shrink-0"><Ico.wa className="w-5 h-5"/></div>
              <div>
                <div className="text-[11px] uppercase tracking-wide text-white/50 font-semibold">WhatsApp</div>
                <div className="font-bold text-[16px] mt-0.5">Schnelle Antwort</div>
              </div>
            </a>
            <div className="flex items-start gap-4 p-5 rounded-xl bg-white/5 ring-1 ring-white/10">
              <div className="w-12 h-12 rounded-full bg-white/10 grid place-items-center shrink-0"><Ico.pin className="w-5 h-5"/></div>
              <div>
                <div className="text-[11px] uppercase tracking-wide text-white/50 font-semibold">Adresse</div>
                <div className="font-semibold text-[15px] mt-0.5">{BUSINESS.street}</div>
                <div className="text-[13px] text-white/60">{BUSINESS.city}</div>
              </div>
            </div>
            <div className="flex items-start gap-4 p-5 rounded-xl bg-white/5 ring-1 ring-white/10">
              <div className="w-12 h-12 rounded-full bg-white/10 grid place-items-center shrink-0"><Ico.clock className="w-5 h-5"/></div>
              <div>
                <div className="text-[11px] uppercase tracking-wide text-white/50 font-semibold mb-1">Öffnungszeiten</div>
                {BUSINESS.hours.map(h => (
                  <div key={h.d} className="flex justify-between gap-4 text-[13px]">
                    <span className="text-white/80">{h.d}</span>
                    <span className="text-white/55">{h.t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ——— Footer ———
const Footer = ({ goto }) => (
  <footer className="bg-navy-deep text-white/60 pt-14 pb-8 border-t border-white/10">
    <div className="max-w-[1280px] mx-auto px-4 md:px-8 grid md:grid-cols-12 gap-10">
      <div className="md:col-span-3">
        <Wordmark invert size="lg"/>
        <p className="text-[14px] mt-5 max-w-[320px] leading-relaxed">
          Ihr inhabergeführter Autoglas-Fachbetrieb in Essen. Moderne Ausstattung, erfahrene Meister – schnell, persönlich und zuverlässig.
        </p>
      </div>
      <div className="md:col-span-2">
        <div className="text-[12px] uppercase tracking-wider text-white/40 font-semibold mb-4">Leistungen</div>
        {[["PKW","pkw"],["Transporter","transporter"],["LKW","lkw"],["Wohnmobil","wohnmobil"],["Busse","busse"],["SUV","suv"],["Steinschlag","steinschlag"],["Folien","folien"],["Versiegelung","versiegelung"]].map(([x,k]) => (
          <button key={x} onClick={() => goto(k)} className="block text-[14px] py-1.5 hover:text-white text-left">{x}</button>
        ))}
      </div>
      <div className="md:col-span-2">
        <div className="text-[12px] uppercase tracking-wider text-white/40 font-semibold mb-4">Ratgeber</div>
        {[["Ratgeber-Hub","ratgeber"],["Kalibrierung","kalibrierung"],["Glasarten","glasarten"],["Hersteller","hersteller"],["Selbstbeteiligung","selbstbeteiligung"],["Parkschaden","parkschaden"],["Unfall","unfall"],["Saison","saison"],["Glossar","glossar"],["FAQ","faqhub"]].map(([x,k]) => (
          <button key={x} onClick={() => goto(k)} className="block text-[14px] py-1.5 hover:text-white text-left">{x}</button>
        ))}
      </div>
      <div className="md:col-span-2">
        <div className="text-[12px] uppercase tracking-wider text-white/40 font-semibold mb-4">Spezial</div>
        {[["E-Auto","eauto"],["Oldtimer","oldtimer"],["Flotte","flotte"],["Gewerbevertrag","gewerbevertrag"],["Notfall","notfall"],["Gutachten","gutachten"],["Qualit\u00e4t","qualitaet"],["Warum wir","warum-ext"],["Stadtteile","standorte"]].map(([x,k]) => (
          <button key={x} onClick={() => goto(k)} className="block text-[14px] py-1.5 hover:text-white text-left">{x}</button>
        ))}
      </div>
      <div className="md:col-span-3">
        <div className="text-[12px] uppercase tracking-wider text-white/40 font-semibold mb-4">Kontakt</div>
        <div className="space-y-2 text-[14px]">
          <div>{BUSINESS.street}, {BUSINESS.city}</div>
          <a href="#call" className="flex items-center gap-2 hover:text-white"><Ico.phone className="w-4 h-4"/> {BUSINESS.phoneDisplay}</a>
          <div>{BUSINESS.email}</div>
          <button onClick={() => goto("kontakt-ext")} className="block text-[14px] py-1.5 hover:text-white text-left mt-2">Anfahrt &amp; Öffnungszeiten</button>
        </div>
      </div>
    </div>
    <div className="max-w-[1280px] mx-auto px-4 md:px-8 mt-10 pt-6 border-t border-white/10 flex flex-wrap justify-between gap-4 text-[12px] text-white/40">
      <div>© 2026 Autoglas Nord Essen · Inhaber Ilhan Bicici</div>
      <div className="flex gap-5">
        <span>Impressum</span><span>Datenschutz</span><span>AGB</span>
      </div>
    </div>
  </footer>
);

// ——— Sticky mobile CTA + WhatsApp float ———
const StickyMobile = () => (
  <div className="md:hidden fixed bottom-0 left-0 right-0 z-30 bg-navy border-t border-white/10 grid grid-cols-2 gap-0 pb-[env(safe-area-inset-bottom)]">
    <a href="#call" className="py-3.5 bg-brand-red text-white text-[13px] font-semibold flex items-center justify-center gap-2"><Ico.phone className="w-4 h-4"/> Anrufen</a>
    <a href="#wa" className="py-3.5 bg-wa text-white text-[13px] font-semibold flex items-center justify-center gap-2"><Ico.wa className="w-4 h-4"/> WhatsApp</a>
  </div>
);

const WhatsAppFloat = () => (
  <a href="#wa" className="hidden md:flex fixed bottom-6 right-6 z-30 w-14 h-14 rounded-full bg-wa hover:bg-wa-dark text-white items-center justify-center shadow-2xl transition">
    <Ico.wa className="w-6 h-6"/>
    <span className="absolute inset-0 rounded-full bg-wa animate-ping opacity-25"/>
  </a>
);

// ——— Simple subpage shell — with auto hero image placeholder ———
const slugifyTitle = (s) => s
  .toLowerCase()
  .replace(/ä/g, "ae").replace(/ö/g, "oe").replace(/ü/g, "ue").replace(/ß/g, "ss")
  .replace(/[„""''`]/g, "")
  .replace(/[^a-z0-9]+/g, "-")
  .replace(/^-+|-+$/g, "")
  .slice(0, 80);

const heroSlugFor = (title) => slugifyTitle(title);

const SimplePageHero = ({ title, prompt }) => {
  const IP = window.ImagePrompt;
  const [failed, setFailed] = React.useState(false);
  const slug = heroSlugFor(title);
  const src = `assets/hero/${slug}.png`;
  if (failed) return IP ? <IP prompt={prompt} aspect="4/3" tone="dark"/> : null;
  return (
    <div className="relative rounded-2xl overflow-hidden ring-1 ring-white/10 shadow-2xl" style={{ aspectRatio: "4/3" }}>
      <img
        src={src}
        alt={title}
        loading="lazy"
        onError={() => setFailed(true)}
        className="w-full h-full object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-navy/40 via-transparent to-transparent pointer-events-none"/>
    </div>
  );
};

const SimplePage = ({ title, subtitle, children, goto, heroPrompt }) => {
  const autoPrompt = heroPrompt || `Professionelles redaktionelles Foto zum Thema „${title}", in einer Autoglas-Werkstatt oder im Straßenkontext Essen/Ruhrgebiet, natürliches Licht, warme Farbstimmung, 16:9`;
  return (
    <div>
      <section className="bg-navy text-white pt-14 pb-16 relative overflow-hidden">
        <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{
          backgroundImage: "radial-gradient(circle at 20% 30%, #fff 1px, transparent 1px), radial-gradient(circle at 80% 70%, #fff 1px, transparent 1px)",
          backgroundSize: "50px 50px, 80px 80px"
        }}/>
        <div className="max-w-[1280px] mx-auto px-4 md:px-8 relative">
          <div className="text-[12px] text-white/50 tracking-wider uppercase mb-4 font-semibold">
            <button onClick={() => goto("home")} className="hover:text-white">Start</button> <span className="mx-2 opacity-30">/</span> {title}
          </div>
          <div className="grid md:grid-cols-[1.25fr,1fr] gap-10 items-center">
            <div>
              <h1 className="text-[40px] md:text-[56px] font-bold leading-[1.05] tracking-tight max-w-[900px]">{title}</h1>
              {subtitle && <p className="text-white/65 text-[16px] mt-4 max-w-[640px] leading-relaxed">{subtitle}</p>}
            </div>
            <div className="mt-6 md:mt-0">
              <SimplePageHero title={title} prompt={autoPrompt}/>
            </div>
          </div>
        </div>
      </section>
      {children}
    </div>
  );
};

Object.assign(window, { Process, Testimonials, FAQ, BookingSection, Footer, StickyMobile, WhatsAppFloat, SimplePage });