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

const BUSINESS = {
  name: "Autoglas Nord Essen",
  owner: "Ilhan Bicici",
  street: "Hülsenbruchstraße 5",
  city: "45326 Essen",
  phone: "+49 201 4360 3306",
  phoneDisplay: "0201 4360 3306",
  email: "info@www.autoglasnord.info",
  hours: [
    { d: "Mo bis Fr", t: "09:00 bis 18:00 Uhr" },
    { d: "Samstag", t: "10:00 bis 16:00 Uhr" },
    { d: "Sonntag", t: "geschlossen" },
  ],
};

// ——— Unsplash photos (free, commercial use) ———
const IMG = {
  hero: "https://images.unsplash.com/photo-1625047509168-a7026f36de04?auto=format&fit=crop&w=1200&q=80",
  workshop: "https://images.unsplash.com/photo-1625047509168-a7026f36de04?auto=format&fit=crop&w=1200&q=80",
  team: "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=1200&q=80",
};
// Reusable photo placeholder (works offline, styled as workshop scene)
const PhotoPlaceholder = ({ label = "Werkstatt-Foto", className = "" }) => (
  <div className={`relative overflow-hidden ${className}`} style={{
    background: "linear-gradient(135deg, #1e293b 0%, #334155 100%)",
  }}>
    <div className="absolute inset-0" style={{
      backgroundImage: "repeating-linear-gradient(45deg, rgba(211,47,47,0.04) 0 2px, transparent 2px 16px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 24px)"
    }}/>
    <svg viewBox="0 0 400 300" className="absolute inset-0 w-full h-full opacity-25" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="car-grad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#ffffff" stopOpacity="0.5"/>
          <stop offset="1" stopColor="#ffffff" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M40 220 Q 60 150 120 130 L 280 130 Q 340 150 360 220 L 360 250 L 40 250 Z" fill="url(#car-grad)" stroke="#ffffff" strokeWidth="2" opacity="0.7"/>
      <path d="M120 130 L 150 100 L 250 100 L 280 130" fill="#ffffff" opacity="0.3"/>
      <circle cx="100" cy="240" r="22" fill="#0f172a" stroke="#ffffff" strokeWidth="2"/>
      <circle cx="300" cy="240" r="22" fill="#0f172a" stroke="#ffffff" strokeWidth="2"/>
      <path d="M200 105 L 210 115 L 206 120 L 215 128 L 200 122 L 205 115 Z" fill="#D32F2F"/>
    </svg>
    <div className="absolute bottom-4 left-4 px-3 py-1.5 rounded-md bg-black/40 backdrop-blur text-white/85 text-[11px] font-mono tracking-wider">
      [ {label} ]
    </div>
  </div>
);

const Ico = {
  phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.8 12.8 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.8 12.8 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>,
  wa: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2.1 3.1 5 4.4.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>,
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6 9 17l-5-5"/></svg>,
  clock: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  shield: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg>,
  car: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 13 5 7a2 2 0 0 1 2-1h10a2 2 0 0 1 2 1l2 6"/><path d="M3 13h18v5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H7v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5Z"/><circle cx="7.5" cy="16" r="1"/><circle cx="16.5" cy="16" r="1"/></svg>,
  truck: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M1 7h12v10H1z"/><path d="M13 10h5l3 3v4h-8"/><circle cx="6" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>,
  van: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2 17V6h14l5 5v6"/><path d="M2 17h20"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>,
  rv: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2 17V7a1 1 0 0 1 1-1h14l5 5v6M2 17h20"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>,
  bus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="3" width="16" height="15" rx="2"/><path d="M4 11h16M9 18v2M15 18v2"/></svg>,
  crack: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3 9 10l4 1-3 6 5-8-4-1 2-5Z"/></svg>,
  wrench: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-2.5 2.5-2.5Z"/></svg>,
  mobile: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 17V7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>,
  pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><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>,
  menu: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  close: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>,
  star: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><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>,
  plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
};

// Logo: white rounded tile with full cropped logo
const LogoMark = ({ className = "w-12 h-12" }) => (
  <div className={`${className} rounded-lg bg-white grid place-items-center shrink-0 p-1.5`}>
    <img src="assets/logo-cropped.png" alt="Autoglas Nord Logo" className="w-full h-full object-contain"/>
  </div>
);

const Wordmark = ({ invert = true, size = "md" }) => {
  const s = size === "lg" ? "text-[22px]" : "text-[18px]";
  return (
    <div className="flex items-center gap-3">
      <LogoMark className={size === "lg" ? "w-14 h-14" : "w-12 h-12"}/>
      <div>
        <div className={`${s} font-bold tracking-tight leading-none ${invert ? "text-white" : "text-ink"}`}>
          Autoglas <span className="text-brand-red">Nord</span>
        </div>
        <div className={`text-[10px] font-semibold tracking-[0.22em] uppercase mt-1.5 ${invert ? "text-white/55" : "text-ink/55"}`}>
          Essen · seit 2026
        </div>
      </div>
    </div>
  );
};

const Pill = ({ children, tone = "default", className = "" }) => {
  const map = {
    default: "bg-white/5 text-white/70 ring-white/10",
    red: "bg-brand-red/15 text-brand-red-light ring-brand-red/30",
    green: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/30",
    light: "bg-ink/5 text-ink/70 ring-ink/10",
    lightRed: "bg-brand-red/8 text-brand-red ring-brand-red/20",
  };
  return <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full ring-1 text-[11px] font-semibold tracking-wide uppercase ${map[tone]} ${className}`}>{children}</span>;
};

const LiveDot = ({ color = "emerald" }) => (
  <span className="relative inline-flex w-2 h-2">
    <span className={`absolute inset-0 rounded-full bg-${color}-400 animate-ping opacity-60`}/>
    <span className={`relative w-2 h-2 rounded-full bg-${color}-400`}/>
  </span>
);

const AnnouncementBar = () => (
  <div className="bg-brand-red text-white text-[13px] font-medium">
    <div className="max-w-[1280px] mx-auto px-4 md:px-8 py-2.5 flex items-center justify-between gap-4">
      <div className="flex items-center gap-2">
        <LiveDot/>
        <span>Heute noch Termin frei · Jetzt anrufen</span>
      </div>
      <a href="#call" className="flex items-center gap-1.5 hover:underline">
        <Ico.phone className="w-3.5 h-3.5"/> {BUSINESS.phoneDisplay}
      </a>
    </div>
  </div>
);

const Navbar = ({ goto, current }) => {
  const [open, setOpen] = useState(false);
  const nav = [
    { k: "home", label: "Start" },
    { k: "leistungen", label: "Leistungen" },
    { k: "steinschlag", label: "Steinschlag" },
    { k: "versicherung", label: "Versicherung" },
    { k: "warum", label: "Warum wir" },
    { k: "standorte", label: "Stadtteile" },
    { k: "kontakt", label: "Kontakt" },
  ];
  return (
    <header className="sticky top-0 z-40 bg-navy/95 backdrop-blur border-b border-white/10">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8 h-[72px] flex items-center justify-between gap-4">
        <button onClick={() => goto("home")} className="flex items-center gap-3">
          <Wordmark invert size="md"/>
        </button>
        <nav className="hidden lg:flex items-center gap-1">
          {nav.slice(1).map(n => (
            <button key={n.k} onClick={() => goto(n.k)}
              className={`px-3.5 py-2 rounded-md text-[14px] font-medium transition ${current === n.k ? "text-white bg-white/10" : "text-white/70 hover:text-white"}`}>
              {n.label}
            </button>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <a href="#call" className="hidden sm:inline-flex items-center gap-2 h-10 px-4 rounded-md bg-brand-red hover:bg-brand-red-dark text-white font-semibold text-[13px] transition">
            <Ico.phone className="w-4 h-4"/> <span className="hidden md:inline">{BUSINESS.phoneDisplay}</span><span className="md:hidden">Anrufen</span>
          </a>
          <button onClick={() => setOpen(!open)} className="lg:hidden w-10 h-10 grid place-items-center rounded-md ring-1 ring-white/15 text-white">
            {open ? <Ico.close className="w-5 h-5"/> : <Ico.menu className="w-5 h-5"/>}
          </button>
        </div>
      </div>
      {open && (
        <div className="lg:hidden border-t border-white/10 bg-navy">
          <div className="px-4 py-2">
            {nav.map(n => (
              <button key={n.k} onClick={() => { goto(n.k); setOpen(false); }}
                className="w-full text-left px-3 py-3 rounded-md hover:bg-white/5 text-white text-[15px]">{n.label}</button>
            ))}
          </div>
        </div>
      )}
    </header>
  );
};

// ——— Hero ———
const Hero = ({ goto }) => (
  <section className="relative bg-navy text-white overflow-hidden">
    <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle at 1px 1px, white 1px, transparent 0)", backgroundSize: "28px 28px" }}/>
    <div className="relative max-w-[1280px] mx-auto px-4 md:px-8 pt-14 md:pt-20 pb-14 md:pb-20 grid md:grid-cols-12 gap-8 md:gap-12 items-center">
      <div className="md:col-span-7">
        <Pill tone="red" className="!normal-case !tracking-normal"><LiveDot color="red"/> Jetzt Termin frei in Essen</Pill>
        <h1 className="mt-5 text-[40px] sm:text-[54px] md:text-[68px] font-bold leading-[1.02] tracking-tight">
          Autoglas-Reparatur<br/>
          <span className="text-brand-red">& Austausch</span><br/>
          <span className="text-white">in Essen</span>
        </h1>
        <ul className="mt-7 space-y-2.5 text-[15px] md:text-[16px] text-white/85">
          {[
            "Steinschlag-Reparatur in 40 Minuten",
            "Scheibentausch in 24 Stunden",
            "Direktabrechnung mit Ihrer Kaskoversicherung",
            "Moderne Ausstattung, erfahrene Meister",
          ].map(x => (
            <li key={x} className="flex items-center gap-3">
              <span className="w-5 h-5 rounded-full bg-brand-red grid place-items-center shrink-0"><Ico.check className="w-3 h-3 text-white"/></span>
              {x}
            </li>
          ))}
        </ul>
        <div className="mt-8 flex flex-wrap gap-3">
          <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] transition">
            <Ico.phone className="w-5 h-5"/> {BUSINESS.phoneDisplay}
          </a>
          <a href="#wa" className="inline-flex items-center gap-2 h-13 px-6 py-3.5 rounded-md bg-wa hover:bg-wa-dark text-white font-semibold text-[15px] transition">
            <Ico.wa className="w-5 h-5"/> WhatsApp
          </a>
        </div>
      </div>
      <div className="md:col-span-5 relative">
        <div className="aspect-[4/5] rounded-2xl overflow-hidden ring-1 ring-white/10">
          <img src="assets/hero-technician.png" alt="Autoglas-Techniker bei der Arbeit" className="w-full h-full object-cover"/>
        </div>
        <div className="absolute -bottom-6 -left-6 bg-white rounded-xl shadow-2xl p-4 text-ink flex items-center gap-3">
          <div className="w-11 h-11 rounded-full bg-brand-red/10 text-brand-red grid place-items-center">
            <Ico.clock className="w-5 h-5"/>
          </div>
          <div>
            <div className="text-[11px] uppercase tracking-wide text-ink/50 font-semibold">Durchschnitt</div>
            <div className="text-[18px] font-bold">40 Min. Reparatur</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ——— Animated counter (inlined here so hooks share scope with StatsBar) ———
const CountUp = ({ to = 100, duration = 1800, suffix = "", prefix = "", className = "" }) => {
  const [val, setVal] = useState(0);
  const [started, setStarted] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Fallback: if IO doesn't fire within 600ms (iframe previews, some older browsers),
    // just start the animation.
    const fallback = setTimeout(() => setStarted(true), 600);
    let obs;
    try {
      obs = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          clearTimeout(fallback);
          setStarted(true);
        }
      }, { threshold: 0.1 });
      obs.observe(el);
    } catch (e) {
      clearTimeout(fallback);
      setStarted(true);
    }
    return () => { clearTimeout(fallback); if (obs) obs.disconnect(); };
  }, []);
  useEffect(() => {
    if (!started) return;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(eased * to));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [started, to, duration]);
  return <span ref={ref} className={className}>{prefix}{val.toLocaleString("de-DE")}{suffix}</span>;
};

// ——— Live activity ticker ———
const LiveTicker = () => {
  const events = [
    "🔧 Steinschlag-Reparatur bei VW Golf abgeschlossen (Essen-Nord)",
    "📞 Anruf aus Altenessen – Termin morgen 9 Uhr",
    "✅ Scheibentausch BMW 3er fertig (Rüttenscheid)",
    "🚐 Mobiler Service-Einsatz in Kray unterwegs",
    "⚡ Express-Reparatur Mercedes C-Klasse in 28 Minuten erledigt",
    "📋 Kostenvoranschlag Audi Q5 an Versicherung versendet",
    "🔔 Neue Google-Bewertung: 5 Sterne von Familie M.",
    "🎯 Kalibrierung Spurhalteassistent Tesla Model Y abgeschlossen",
    "🚛 Sprinter-Scheibe für Lieferdienst in 2h eingebaut",
  ];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % events.length), 3800);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="bg-navy-deep border-t border-b border-white/10 overflow-hidden">
      <div className="max-w-[1280px] mx-auto px-4 md:px-8 py-3 flex items-center gap-4">
        <div className="flex items-center gap-2 shrink-0">
          <span className="relative flex h-2.5 w-2.5">
            <span className="absolute inline-flex h-full w-full rounded-full bg-brand-red opacity-75 animate-ping"/>
            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-brand-red"/>
          </span>
          <span className="text-[11px] uppercase tracking-widest font-bold text-brand-red">Live</span>
        </div>
        <div className="flex-1 min-w-0 overflow-hidden">
          <div key={idx} className="text-[13px] md:text-[14px] text-white/85 truncate" style={{ animation: "agn-slide 0.5s ease-out" }}>
            {events[idx]}
          </div>
        </div>
        <div className="hidden md:block text-[11px] text-white/40 shrink-0">vor wenigen Minuten</div>
      </div>
      <style>{`@keyframes agn-slide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </div>
  );
};

// ——— Stats strip (like reference) — now with animated count-up ———
const StatsBar = () => {
  const items = [
    { to: 500, suffix: "+", l: "Zufriedene Kunden" },
    { to: 40, suffix: "min", l: "Reparaturzeit" },
    { to: 100, suffix: "%", l: "Direktabrechnung" },
    { to: 24, suffix: "h", l: "Scheibentausch" },
  ];
  return (
    <section className="bg-navy border-t border-white/10 relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{
        backgroundImage: "radial-gradient(circle at 25% 30%, #fff 1.5px, transparent 1.5px), radial-gradient(circle at 75% 70%, #fff 1.5px, transparent 1.5px)",
        backgroundSize: "60px 60px, 90px 90px"
      }}/>
      <div className="relative max-w-[1280px] mx-auto px-4 md:px-8 py-10 md:py-14 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10">
        {items.map(i => (
          <div key={i.l} className="text-center">
            <div className="text-[44px] md:text-[56px] font-bold text-brand-red leading-none tabular-nums">
              <CountUp to={i.to} suffix={i.suffix}/>
            </div>
            <div className="text-[13px] text-white/60 mt-2 uppercase tracking-wider font-medium">{i.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ——— Services ———
const Services = ({ goto }) => {
  const cards = [
    { icon: Ico.crack, t: "Scheiben-Reparatur", d: "Steinschlag und kleine Risse in 40 Minuten fachgerecht repariert.", img: "assets/chip-macro.png" },
    { icon: Ico.wrench, t: "Scheibentausch", d: "Windschutzscheibe in 24 Stunden mit Originalmaterial getauscht.", img: "assets/repair-closeup.png" },
    { icon: Ico.shield, t: "Versicherungsabwicklung", d: "Wir rechnen direkt mit Ihrer Kasko ab. Kein Papierkram für Sie.", img: "assets/versicherung.png" },
    { icon: Ico.mobile, t: "Mobile Service", d: "Auf Wunsch kommen wir zu Ihnen. Hol- und Bringservice in Essen.", img: "assets/mobile-van.png" },
  ];
  return (
    <section className="bg-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="lightRed" className="!normal-case">Unsere Leistungen</Pill>
          <h2 className="text-[36px] md:text-[48px] font-bold mt-4 leading-tight tracking-tight">
            Alles rund um Ihr Autoglas
          </h2>
          <p className="text-ink/60 mt-4 text-[15px]">
            Vom kleinen Steinschlag bis zum kompletten Scheibentausch, wir kümmern uns um jedes Anliegen schnell und zuverlässig.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {cards.map(c => (
            <div key={c.t} className="bg-white rounded-xl ring-1 ring-ink/10 hover:ring-brand-red/40 hover:-translate-y-1 transition overflow-hidden flex flex-col">
              {c.img ? (
                <div className="aspect-[4/3] overflow-hidden bg-ink/5">
                  <img src={c.img} alt={c.t} className="w-full h-full object-cover"/>
                </div>
              ) : (
                <div className="aspect-[4/3] bg-gradient-to-br from-navy to-ink grid place-items-center">
                  <c.icon className="w-14 h-14 text-brand-red/80"/>
                </div>
              )}
              <div className="p-6 flex-1">
                <div className="w-10 h-10 rounded-lg bg-brand-red/10 text-brand-red grid place-items-center">
                  <c.icon className="w-5 h-5"/>
                </div>
                <h3 className="text-[18px] font-bold mt-4">{c.t}</h3>
                <p className="text-ink/60 text-[14px] mt-2 leading-relaxed">{c.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— About/Team block ———
const About = ({ goto }) => (
  <section className="bg-bg py-20 md:py-24">
    <div className="max-w-[1280px] mx-auto px-4 md:px-8 grid md:grid-cols-2 gap-10 md:gap-16 items-center">
      <div className="aspect-[4/3] rounded-2xl overflow-hidden ring-1 ring-ink/10">
        <img src="assets/team.png" alt="Team Autoglas Nord Essen" className="w-full h-full object-cover"/>
      </div>
      <div>
        <Pill tone="lightRed" className="!normal-case">Über uns</Pill>
        <h2 className="text-[36px] md:text-[44px] font-bold mt-4 leading-tight tracking-tight">
          Ihr vertrauenswürdiger Partner für Autoglas
        </h2>
        <p className="text-ink/65 text-[15px] mt-5 leading-relaxed">
          Moderne Ausstattung, erfahrene Meister – so einfach wie persönlich. Als neuer inhabergeführter Fachbetrieb in Essen verbinden wir aktuellste Technik mit jahrzehntelanger Erfahrung unserer Meister. Wir kennen jede Scheibe, jede Versicherung und jeden Kniff, der Ihnen Zeit und Geld spart.
        </p>
        <ul className="mt-6 space-y-3">
          {[
            "Inhabergeführt von Ilhan Bicici persönlich",
            "Zertifizierte Meisterwerkstatt in Essen",
            "Originalscheiben aller Hersteller verfügbar",
            "Kalibrierung aller Fahrassistenzsysteme",
          ].map(x => (
            <li key={x} className="flex items-center gap-3 text-[15px]">
              <span className="w-5 h-5 rounded-full bg-brand-red grid place-items-center shrink-0"><Ico.check className="w-3 h-3 text-white"/></span>
              {x}
            </li>
          ))}
        </ul>
        <button onClick={() => goto("kontakt")} className="mt-8 inline-flex items-center gap-2 h-12 px-6 rounded-md bg-ink hover:bg-ink-soft text-white font-semibold text-[14px]">
          Mehr über uns <Ico.arrow className="w-4 h-4"/>
        </button>
      </div>
    </div>
  </section>
);

Object.assign(window, { BUSINESS, IMG, Ico, LogoMark, Wordmark, Pill, LiveDot, AnnouncementBar, Navbar, Hero, StatsBar, Services, About });
