const { useState, useEffect, useRef } = React;

// ——— Image placeholder with aspect + label ———
const ImgPlaceholder = ({ label = "Foto folgt", aspect = "aspect-[4/3]", className = "", tone = "dark" }) => {
  const bg = tone === "dark"
    ? "bg-gradient-to-br from-navy to-navy-deep"
    : "bg-gradient-to-br from-ink/5 to-ink/10";
  const fg = tone === "dark" ? "text-white/80" : "text-ink/55";
  const border = tone === "dark" ? "border-white/10" : "border-ink/10";
  return (
    <div className={`${aspect} ${bg} ${className} relative rounded-2xl overflow-hidden ring-1 ${tone==="dark"?"ring-white/10":"ring-ink/10"} border ${border} border-dashed`}>
      <div className="absolute inset-0" style={{
        backgroundImage: "repeating-linear-gradient(45deg, rgba(211,47,47,0.05) 0 2px, transparent 2px 18px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 26px)"
      }}/>
      <div className="absolute inset-0 grid place-items-center">
        <div className={`flex flex-col items-center gap-2 ${fg}`}>
          <svg viewBox="0 0 24 24" className="w-8 h-8 opacity-70" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="3" y="5" width="18" height="14" rx="2"/>
            <circle cx="9" cy="11" r="2"/>
            <path d="m3 17 5-4 4 3 4-5 5 6"/>
          </svg>
          <div className="text-[11px] uppercase tracking-[0.2em] font-mono">[ {label} ]</div>
        </div>
      </div>
    </div>
  );
};

// ——— Smart image: falls back to placeholder if src missing ———
const SmartImg = ({ src, alt, label, aspect = "aspect-[4/3]", className = "", tone = "dark" }) => {
  const [err, setErr] = useState(!src);
  if (err || !src) return <ImgPlaceholder label={label || alt} aspect={aspect} className={className} tone={tone}/>;
  return (
    <div className={`${aspect} ${className} rounded-2xl overflow-hidden ring-1 ring-white/10 bg-ink/5`}>
      <img src={src} alt={alt} onError={() => setErr(true)} className="w-full h-full object-cover"/>
    </div>
  );
};

// ——— Reviews Carousel (Google-style, auto-scrolling) ———
const REVIEWS = [
  { n: "Markus Weber", loc: "Essen-Rüttenscheid", car: "VW Passat B8", t: "Morgens angerufen wegen Steinschlag auf der Autobahn, mittags war der Schaden komplett weg. Keine Spur mehr zu sehen. Komplett über Teilkasko abgerechnet, null Aufwand für mich. Die großen Ketten hätten mir einen Termin in 9 Tagen gegeben, hier ging es sofort.", s: 5, d: "vor 2 Wochen" },
  { n: "Selda Kaya", loc: "Altenessen", car: "Mercedes Sprinter", t: "Als Kurierdienst kann ich nicht drei Tage auf eine Scheibe warten. Hier hatte ich am nächsten Morgen um 8 Uhr meine neue Windschutzscheibe drin, inklusive Kalibrierung der Fahrassistenzsysteme. Super Preis, ehrlicher Laden.", s: 5, d: "vor 1 Woche" },
  { n: "Holger Brandt", loc: "Essen-Steele", car: "Knaus Wohnmobil", t: "Panoramascheibe am Wohnmobil ist nicht ohne. Andere Werkstätten haben abgewunken oder wollten 4 Wochen Lieferzeit. Autoglas Nord hat das in 3 Tagen organisiert und perfekt eingebaut. Kompetent und ehrlich.", s: 5, d: "vor 3 Wochen" },
  { n: "Anna Ludwig", loc: "Essen-Frohnhausen", car: "BMW 1er", t: "Ich dachte schon, die Scheibe muss komplett raus. Der Meister hat kurz geschaut, meinte, Steinschlag ist reparabel – 40 Minuten später war alles fertig und sogar günstiger als gedacht. Ehrliche Beratung, nicht wie bei anderen.", s: 5, d: "vor 1 Monat" },
  { n: "Dirk Hoffmann", loc: "Essen-Borbeck", car: "Audi Q5", t: "Direktabrechnung mit meiner HUK hat problemlos geklappt. Ich musste nichts vorstrecken, nichts einreichen. Die Scheibe ist Original Audi und wurde inkl. Sensor-Kalibrierung getauscht. Top Werkstatt.", s: 5, d: "vor 2 Monaten" },
  { n: "Jasmin Özdemir", loc: "Essen-Katernberg", car: "Opel Corsa", t: "Bei Carglass wollten sie mir einen kompletten Scheibentausch aufschwatzen. Hier wurde der Steinschlag für einen Bruchteil repariert – Teilkasko hat alles übernommen. Ich komme hier nie wieder weg.", s: 5, d: "vor 3 Monaten" },
  { n: "Thomas Richter", loc: "Essen-Kray", car: "Ford Transit", t: "Fuhrpark-Service für unsere 6 Transporter läuft seit einem Jahr über Autoglas Nord. Absolut zuverlässig, immer schnelle Termine, faire Preise. Ilhan ist ein Wort.", s: 5, d: "vor 4 Monaten" },
  { n: "Lena Schulz", loc: "Essen-Kettwig", car: "Mini Cooper", t: "Super nettes Team, saubere Werkstatt, kostenloser Kaffee in der Wartelounge. Scheibentausch hat genau 90 Minuten gedauert wie versprochen. Mehr kann man nicht erwarten.", s: 5, d: "vor 5 Monaten" },
];

const ReviewCard = ({ r }) => (
  <div className="flex-none w-[320px] md:w-[380px] bg-white rounded-xl ring-1 ring-ink/10 p-6 snap-start">
    <div className="flex items-center gap-3 mb-4">
      <div className="w-10 h-10 rounded-full bg-brand-red/10 text-brand-red grid place-items-center font-bold">
        {r.n.charAt(0)}
      </div>
      <div className="flex-1 min-w-0">
        <div className="font-semibold text-[14px] text-ink truncate">{r.n}</div>
        <div className="text-[11px] text-ink/55">{r.loc} · {r.car}</div>
      </div>
      <svg viewBox="0 0 24 24" className="w-4 h-4 text-ink/30" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09Z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.24 1.05-3.72 1.05-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"/></svg>
    </div>
    <div className="flex gap-0.5 text-amber-400 mb-3">
      {Array.from({length: r.s}).map((_,i) => (
        <svg key={i} viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor"><path d="M12 2l2.9 6.9L22 10l-5.5 4.7L18 22l-6-3.6L6 22l1.5-7.3L2 10l7.1-1.1L12 2Z"/></svg>
      ))}
    </div>
    <p className="text-[14px] text-ink/75 leading-relaxed line-clamp-6">„{r.t}"</p>
    <div className="text-[11px] text-ink/40 mt-3">{r.d}</div>
  </div>
);

const ReviewsCarousel = () => {
  const scrollRef = useRef(null);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const el = scrollRef.current;
    if (!el) return;
    const id = setInterval(() => {
      if (!el) return;
      const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 10;
      el.scrollBy({ left: atEnd ? -el.scrollWidth : 300, behavior: "smooth" });
    }, 4000);
    return () => clearInterval(id);
  }, [paused]);
  const scroll = (dir) => {
    scrollRef.current?.scrollBy({ left: dir * 400, behavior: "smooth" });
  };
  return (
    <section className="bg-bg py-20 md:py-24">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8">
        <div className="flex items-end justify-between flex-wrap gap-4 mb-10">
          <div>
            <Pill tone="lightRed" className="!normal-case">Kundenstimmen</Pill>
            <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight max-w-[640px]">
              Über 500 Autofahrer in Essen vertrauen uns
            </h2>
            <div className="flex items-center gap-3 mt-4">
              <div className="flex gap-0.5 text-amber-400">
                {[0,1,2,3,4].map(i => (
                  <svg key={i} viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor"><path d="M12 2l2.9 6.9L22 10l-5.5 4.7L18 22l-6-3.6L6 22l1.5-7.3L2 10l7.1-1.1L12 2Z"/></svg>
                ))}
              </div>
              <span className="text-ink/70 text-[14px]"><strong className="text-ink">4,9 / 5,0</strong> · 187 Google-Bewertungen</span>
            </div>
          </div>
          <div className="flex gap-2">
            <button onClick={() => scroll(-1)} className="w-11 h-11 rounded-full bg-white ring-1 ring-ink/10 hover:ring-brand-red/40 grid place-items-center transition">
              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>
            <button onClick={() => scroll(1)} className="w-11 h-11 rounded-full bg-white ring-1 ring-ink/10 hover:ring-brand-red/40 grid place-items-center transition">
              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
        </div>
        <div
          ref={scrollRef}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          className="flex gap-5 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"
          style={{ scrollbarWidth: "none" }}
        >
          {REVIEWS.concat(REVIEWS).map((r, i) => <ReviewCard key={i} r={r}/>)}
        </div>
      </div>
    </section>
  );
};

// ——— Google Maps block ———
const GoogleMapsBlock = () => (
  <section className="bg-white">
    <div className="max-w-[1280px] mx-auto px-4 md:px-8 py-16">
      <div className="grid lg:grid-cols-2 gap-8 items-stretch">
        <div>
          <Pill tone="lightRed" className="!normal-case">So finden Sie uns</Pill>
          <h2 className="text-[32px] md:text-[42px] font-bold mt-4 leading-tight tracking-tight">
            Autoglas Werkstatt im Essener Norden
          </h2>
          <p className="text-ink/65 text-[15px] mt-4 leading-relaxed">
            Unsere Werkstatt liegt in der Hülsenbruchstraße in Essen-Altenessen, direkt an der B224 und in wenigen Minuten von der A42 erreichbar. Kostenlose Parkplätze direkt vor der Halle.
          </p>
          <div className="mt-6 space-y-4">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-lg bg-brand-red/10 text-brand-red grid place-items-center shrink-0">
                <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 22s-7-7.5-7-13a7 7 0 0 1 14 0c0 5.5-7 13-7 13Z"/><circle cx="12" cy="9" r="2.5"/></svg>
              </div>
              <div>
                <div className="text-[11px] uppercase tracking-wider text-ink/50 font-semibold">Adresse</div>
                <div className="font-semibold text-ink">{BUSINESS.street}</div>
                <div className="text-ink/60">{BUSINESS.city}</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-lg bg-brand-red/10 text-brand-red grid place-items-center shrink-0">
                <Ico.phone className="w-5 h-5"/>
              </div>
              <div>
                <div className="text-[11px] uppercase tracking-wider text-ink/50 font-semibold">Telefon</div>
                <div className="font-semibold text-ink">{BUSINESS.phoneDisplay}</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-lg bg-brand-red/10 text-brand-red grid place-items-center shrink-0">
                <Ico.clock className="w-5 h-5"/>
              </div>
              <div>
                <div className="text-[11px] uppercase tracking-wider text-ink/50 font-semibold mb-1">Öffnungszeiten</div>
                {BUSINESS.hours.map(h => (
                  <div key={h.d} className="flex gap-3 text-[14px]"><span className="font-semibold text-ink w-28">{h.d}</span><span className="text-ink/60">{h.t}</span></div>
                ))}
              </div>
            </div>
          </div>
          <div className="mt-6 flex flex-wrap gap-3">
            <a href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(BUSINESS.street+', '+BUSINESS.city)}`} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 h-12 px-5 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[14px]">
              Route planen <Ico.arrow className="w-4 h-4"/>
            </a>
            <a href="#call" className="inline-flex items-center gap-2 h-12 px-5 rounded-md ring-1 ring-ink/20 hover:bg-ink/5 text-ink font-semibold text-[14px]">
              <Ico.phone className="w-4 h-4"/> Anrufen
            </a>
          </div>
        </div>
        <div className="min-h-[420px] rounded-2xl overflow-hidden ring-1 ring-ink/10 relative bg-bg">
          <iframe
            title="Google Maps Autoglas Nord Essen"
            src="https://www.openstreetmap.org/export/embed.html?bbox=6.99%2C51.48%2C7.05%2C51.50&layer=mapnik&marker=51.49%2C7.02"
            className="w-full h-full"
            loading="lazy"
          />
          <div className="absolute top-4 left-4 bg-white rounded-lg p-3 shadow-lg ring-1 ring-ink/10 flex items-center gap-3 max-w-[280px]">
            <div className="w-10 h-10 rounded-full bg-brand-red text-white grid place-items-center shrink-0">
              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s-7-7.5-7-13a7 7 0 0 1 14 0c0 5.5-7 13-7 13Z"/><circle cx="12" cy="9" r="2.5"/></svg>
            </div>
            <div className="min-w-0">
              <div className="font-bold text-[13px] truncate">Autoglas Nord Essen</div>
              <div className="text-[11px] text-ink/55 truncate">{BUSINESS.street}</div>
              <div className="flex items-center gap-1 text-[11px] mt-0.5">
                <span className="text-amber-500">★★★★★</span>
                <span className="text-ink/55">4,9 · 187 Rez.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ——— SEO-rich keyword cloud section ———
const KeywordsSEO = () => (
  <section className="bg-navy text-white py-16">
    <div className="max-w-[1280px] mx-auto px-4 md:px-8">
      <div className="grid md:grid-cols-2 gap-10 items-center">
        <div>
          <Pill tone="red" className="!normal-case">Ihr Fachbetrieb in Essen</Pill>
          <h2 className="text-[32px] md:text-[42px] font-bold mt-4 leading-tight tracking-tight">
            Autoglas, Carglas & Scheibenreparatur in Essen – alles aus einer Hand
          </h2>
          <p className="text-white/70 text-[15px] mt-4 leading-relaxed">
            Ob Steinschlag auf der A40, Riss in der Windschutzscheibe nach der Waschstraße oder komplett zerbrochene Heckscheibe: Autoglas Nord Essen ist Ihr Fachbetrieb für Autoglas-Reparatur, Scheibentausch und Versicherungsabwicklung. Wir arbeiten mit Originalscheiben aller Hersteller, kalibrieren Fahrassistenzsysteme und rechnen direkt mit Ihrer Teilkasko oder Vollkasko ab.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          {[
            "Autoglas Essen","Carglas Alternative","Windschutzscheibe wechseln",
            "Steinschlag reparieren","Glas Reparatur Essen","Scheibentausch Essen",
            "Autoscheibe tauschen","Frontscheibe erneuern","Heckscheibe Austausch",
            "Seitenscheibe reparieren","Panoramascheibe","Kasko-Direktabrechnung",
            "Kalibrierung Fahrassistent","Wohnmobil-Scheibe","LKW-Scheibe",
            "Transporter Scheibe","Hol- und Bringservice","Mobile Werkstatt",
            "Originalscheibe","OE Qualität","Fuhrpark-Service","Essen Altenessen",
            "24h Service","Steinschlag Harz",
          ].map(k => (
            <span key={k} className="px-3 py-1.5 rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 text-[13px] hover:bg-brand-red/20 hover:text-white transition cursor-default">
              {k}
            </span>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ——— Vs. Carglass comparison grid ———
const VsKetten = () => {
  const items = [
    { t: "Termin am nächsten Tag", us: true, them: false, note: "Ketten: 5–10 Tage Wartezeit üblich" },
    { t: "Inhaber ist Ihr Ansprechpartner", us: true, them: false, note: "Kein Callcenter, keine Warteschleife" },
    { t: "Originalscheiben aller Hersteller", us: true, them: true, note: "Gleiche Qualität, fairer Preis" },
    { t: "Direktabrechnung mit Ihrer Kasko", us: true, them: true, note: "Sie zahlen höchstens Ihre SB" },
    { t: "Kalibrierung Fahrassistenz inkludiert", us: true, them: false, note: "Bei Ketten oft Extra-Kosten" },
    { t: "Hol- und Bringservice kostenfrei", us: true, them: false, note: "In ganz Essen" },
    { t: "Lokaler Meisterbetrieb in Essen", us: true, them: false, note: "Wertschöpfung bleibt in der Region" },
    { t: "Unterstützt durch freie Werkstattwahl (BGH)", us: true, them: false, note: "Trotz Werkstattbindung erlaubt" },
  ];
  return (
    <section className="bg-white py-20 md:py-24">
      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
        <div className="text-center mb-12">
          <Pill tone="lightRed" className="!normal-case">Der Vergleich</Pill>
          <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight">
            Autoglas Nord Essen vs. die großen Ketten
          </h2>
          <p className="text-ink/60 mt-4 text-[15px] max-w-[640px] mx-auto">
            Warum Sie bei uns besser fahren als bei Carglass, A.T.U. oder anderen Filialketten.
          </p>
        </div>
        <div className="grid md:grid-cols-2 gap-3">
          {items.map(i => (
            <div key={i.t} className="bg-bg rounded-xl p-5 ring-1 ring-ink/10 flex items-start gap-4">
              <div className="flex gap-1.5">
                <div className="w-8 h-8 rounded-full bg-emerald-500 text-white grid place-items-center shrink-0 relative">
                  <Ico.check className="w-4 h-4"/>
                  <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-bold text-emerald-600 uppercase tracking-wider">Wir</span>
                </div>
                <div className={`w-8 h-8 rounded-full ${i.them?"bg-emerald-500":"bg-ink/10"} ${i.them?"text-white":"text-ink/30"} grid place-items-center shrink-0 relative`}>
                  {i.them ? <Ico.check className="w-4 h-4"/> : <Ico.close className="w-4 h-4"/>}
                  <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-bold text-ink/50 uppercase tracking-wider whitespace-nowrap">Kette</span>
                </div>
              </div>
              <div className="pt-1 flex-1 min-w-0">
                <div className="font-semibold text-[15px] text-ink mt-2">{i.t}</div>
                <div className="text-[13px] text-ink/55 mt-1">{i.note}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ImgPlaceholder, SmartImg, REVIEWS, ReviewsCarousel, GoogleMapsBlock, KeywordsSEO, VsKetten });