// EU-strip voor Nederlandse kentekenplaat — blauw vlak, 12 gele sterren in cirkel, "NL" label.
function EuPlateStrip() {
  // 12 sterren in cirkel — typische EU-vlag layout
  const stars = Array.from({ length: 12 }).map((_, i) => {
    const angle = (i / 12) * Math.PI * 2 - Math.PI / 2;
    const cx = 50 + Math.cos(angle) * 30;
    const cy = 50 + Math.sin(angle) * 30;
    return { cx, cy };
  });
  return (
    <div style={{
      position: "absolute", left: 0, top: 0, bottom: 0, width: 50,
      background: "#003399",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between",
      borderRadius: "5px 0 0 5px",
      borderRight: "3px solid #0a0a0a",
      padding: "8px 0 6px",
      pointerEvents: "none",
    }}>
      <svg viewBox="0 0 100 100" width="32" height="32" aria-hidden="true">
        {stars.map((s, i) => (
          <Star key={i} cx={s.cx} cy={s.cy} r={4.5} fill="#FFCC00"/>
        ))}
      </svg>
      <div style={{
        color: "white",
        fontFamily: "var(--font-display)",
        fontWeight: 800,
        fontSize: 14,
        letterSpacing: "0.05em",
        lineHeight: 1,
        marginBottom: 2,
      }}>NL</div>
    </div>
  );
}

function Star({ cx, cy, r, fill }) {
  // Vijfpuntige ster
  const points = [];
  for (let i = 0; i < 10; i++) {
    const angle = (i / 10) * Math.PI * 2 - Math.PI / 2;
    const radius = i % 2 === 0 ? r : r * 0.4;
    points.push(`${cx + Math.cos(angle) * radius},${cy + Math.sin(angle) * radius}`);
  }
  return <polygon points={points.join(" ")} fill={fill}/>;
}

// Keurmerk-badge — uniform formaat, gebruikt eigen logo-bestand of fallback
// Drop logo-bestand in: photos/logos/keurmerken/[file]   (bv. apk.png, rdw.png, bovag.png)
function KeurmerkBadge({ label, sub, Icon, logo }) {
  const [imgFailed, setImgFailed] = React.useState(false);
  const showImage = logo && !imgFailed;
  return (
    <div style={{
      width: 220,
      padding: "20px 18px",
      display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
      borderRadius: 14,
      border: "1px solid var(--border)",
      background: "var(--surface-2)",
      transition: "border-color .2s ease, transform .2s ease",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = "color-mix(in oklab, var(--accent) 40%, var(--border))"; e.currentTarget.style.transform = "translateY(-2px)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.transform = "translateY(0)"; }}
    >
      {showImage ? (
        // Witte tile achter het logo zodat zwarte tekst leesbaar blijft op donkere theme
        <div style={{
          width: "100%",
          height: 110,
          background: "#ffffff",
          borderRadius: 10,
          border: "1px solid rgba(255,255,255,0.06)",
          display: "flex", alignItems: "center", justifyContent: "center",
          padding: "12px 16px",
          flexShrink: 0,
        }}>
          <img
            src={logo}
            alt={label}
            onError={() => setImgFailed(true)}
            style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}
          />
        </div>
      ) : (
        <div style={{
          width: 72, height: 72, borderRadius: 14,
          background: "linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, var(--surface-2)) 0%, var(--surface-2) 100%)",
          border: "1px solid color-mix(in oklab, var(--accent) 35%, var(--border))",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--accent)", flexShrink: 0,
          margin: "16px 0 8px",
        }}>
          {Icon && <Icon size={30}/>}
        </div>
      )}
      <div style={{ textAlign: "center", lineHeight: 1.3 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, letterSpacing: "-0.01em" }}>
          {label}
        </div>
        <div className="text-muted" style={{ fontSize: 13, marginTop: 3 }}>{sub}</div>
      </div>
    </div>
  );
}

// Brand marquee — automerken in oneindige scroll
// Drop logo-bestanden in: photos/logos/merken/[slug].svg  (bv. bmw.svg, mercedes.svg)
// Als bestand niet bestaat, valt component automatisch terug op tekst.
const CAR_BRANDS = [
  { name: "BMW",            slug: "bmw",          weight: 800, letterSpacing: "0.18em" },
  { name: "Mercedes-Benz",  slug: "mercedes",     weight: 600, letterSpacing: "0.06em", italic: true },
  { name: "AUDI",           slug: "audi",         weight: 700, letterSpacing: "0.22em" },
  { name: "Volkswagen",     slug: "volkswagen",   weight: 700, letterSpacing: "0.04em" },
  { name: "VOLVO",          slug: "volvo",        weight: 700, letterSpacing: "0.32em" },
  { name: "Ford",           slug: "ford",         weight: 800, letterSpacing: "0.02em", italic: true },
  { name: "RENAULT",        slug: "renault",      weight: 700, letterSpacing: "0.16em" },
  { name: "PEUGEOT",        slug: "peugeot",      weight: 800, letterSpacing: "0.04em" },
  { name: "TOYOTA",         slug: "toyota",       weight: 800, letterSpacing: "0.18em" },
  { name: "HYUNDAI",        slug: "hyundai",      weight: 800, letterSpacing: "0.12em" },
  { name: "OPEL",           slug: "opel",         weight: 800, letterSpacing: "0.16em" },
  { name: "CITROËN",        slug: "citroen",      weight: 700, letterSpacing: "0.18em" },
  { name: "TESLA",          slug: "tesla",        weight: 700, letterSpacing: "0.22em" },
  { name: "NISSAN",         slug: "nissan",       weight: 800, letterSpacing: "0.16em" },
  { name: "MAZDA",          slug: "mazda",        weight: 800, letterSpacing: "0.16em" },
  { name: "KIA",            slug: "kia",          weight: 800, letterSpacing: "0.18em" },
  { name: "SEAT",           slug: "seat",         weight: 800, letterSpacing: "0.18em" },
  { name: "ŠKODA",          slug: "skoda",        weight: 700, letterSpacing: "0.16em" },
  { name: "MINI",           slug: "mini",         weight: 800, letterSpacing: "0.18em" },
  { name: "Fiat",           slug: "fiat",         weight: 800, letterSpacing: "0.04em", italic: true },
];

function BrandLogo({ brand }) {
  const [failed, setFailed] = React.useState(false);
  if (!failed) {
    return (
      <img
        src={`photos/logos/merken/${brand.slug}.svg`}
        alt={brand.name}
        title={brand.name}
        onError={() => setFailed(true)}
        style={{
          height: 52, maxWidth: 130,
          objectFit: "contain",
          opacity: 0.9,
          transition: "opacity .25s ease, transform .25s ease, filter .25s ease",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.transform = "scale(1.08)"; e.currentTarget.style.filter = "brightness(1.15)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.opacity = "0.9"; e.currentTarget.style.transform = "scale(1)"; e.currentTarget.style.filter = "brightness(1)"; }}
      />
    );
  }
  return (
    <span style={{
      color: "var(--text)",
      fontFamily: "var(--font-display)",
      fontSize: 22,
      fontWeight: brand.weight,
      letterSpacing: brand.letterSpacing,
      fontStyle: brand.italic ? "italic" : "normal",
      whiteSpace: "nowrap",
      opacity: 0.7,
      transition: "opacity .25s ease",
    }}
    onMouseEnter={(e) => e.currentTarget.style.opacity = "1"}
    onMouseLeave={(e) => e.currentTarget.style.opacity = "0.7"}
    >
      {brand.name}
    </span>
  );
}

function BrandMarquee() {
  const items = [...CAR_BRANDS, ...CAR_BRANDS];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((b, i) => (
          <div key={i} style={{
            padding: "0 40px",
            display: "flex", alignItems: "center", justifyContent: "center",
            minWidth: 180,
          }}>
            <BrandLogo brand={b}/>
          </div>
        ))}
      </div>
    </div>
  );
}

// Google Reviews — fetcht echte reviews via Places API (cached server-side)
function GoogleReviewsSection() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (!window.api) { setLoading(false); return; }
    window.api.get('/reviews/google')
      .then(d => { setData(d); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  // Fallback waardes als API niet werkt of nog niet geconfigureerd
  const rating = data?.rating || 4.9;
  const total = data?.total || 247;
  const reviews = data?.reviews || [];
  const fallback = [
    { author: "Sanne D.", rating: 5, text: "Eindelijk een garage die uitlegt wat ze doen. Vaste prijs, opgehaald op tijd. Top." },
    { author: "Marco V.", rating: 5, text: "Diagnose op mijn BMW die 3 andere garages niet vonden. Echt vakwerk." },
    { author: "Linde K.", rating: 5, text: "APK in 40 minuten, koffie was prima. Reminder gekregen 4 weken voor verloop." },
    { author: "Joris H.", rating: 4, text: "Goed werk, eerlijk advies. Wel even wachten op afspraak — populair." },
  ];
  const display = reviews.length > 0 ? reviews.slice(0, 4) : fallback;
  const isReal = reviews.length > 0;

  return (
    <section style={{ padding: "100px 0" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "center" }}>
          <div>
            <SectionHead eyebrow={isReal ? "Klanten over ons" : "Klanten over ons"} title="Vertrouwd door 1.200+ rijders in Noord-Holland."/>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 28 }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 64, fontWeight: 800, color: "var(--accent)", letterSpacing: "-0.04em", lineHeight: 1 }}>
                {rating.toFixed(1)}
              </div>
              <div>
                <div style={{ display: "flex", gap: 2, marginBottom: 4 }}>
                  {[1,2,3,4,5].map(i => <I.Star key={i} size={16} stroke={0} style={{ fill: "var(--accent)", color: "var(--accent)" }}/>)}
                </div>
                <div className="text-muted" style={{ fontSize: 14 }}>{total} Google reviews</div>
              </div>
            </div>
            {data?.mapUrl && (
              <a href={data.mapUrl} target="_blank" rel="noopener noreferrer"
                 className="btn btn-ghost btn-sm" style={{ marginTop: 20 }}>
                Bekijk alle reviews op Google <I.ArrowRight size={14}/>
              </a>
            )}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {display.map((r, i) => (
              <div key={i} className="card" style={{ padding: 22 }}>
                <div style={{ display: "flex", gap: 2, marginBottom: 10 }}>
                  {Array.from({ length: r.rating || 5 }).map((_, j) =>
                    <I.Star key={j} size={13} stroke={0} style={{ fill: "var(--accent)", color: "var(--accent)" }}/>)}
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.6, margin: 0, marginBottom: 12 }}>
                  "{(r.text || '').slice(0, 220)}{(r.text || '').length > 220 ? '…' : ''}"
                </p>
                <div className="text-muted" style={{ fontSize: 13, fontWeight: 500, display: "flex", alignItems: "center", gap: 8 }}>
                  {r.photo && <img src={r.photo} alt="" style={{ width: 18, height: 18, borderRadius: 999 }}/>}
                  — {r.author || r.name}
                  {r.timeAgo && <span style={{ opacity: 0.6 }}>· {r.timeAgo}</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Home screen — premium & strak split-hero with kenteken-snelboeking
function Home({ onNav, brand }) {
  const [plate, setPlate] = React.useState("");
  const [vehicle, setVehicle] = React.useState(null); // van RDW lookup
  const [vehicleLoading, setVehicleLoading] = React.useState(false);
  const [vehicleError, setVehicleError] = React.useState(null);

  // RDW lookup wanneer kenteken minimaal 6 tekens telt
  React.useEffect(() => {
    const clean = plate.replace(/[^A-Z0-9]/gi, "");
    if (clean.length < 6) { setVehicle(null); setVehicleError(null); return; }
    setVehicleLoading(true);
    setVehicleError(null);
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      try {
        const data = await window.api.kenteken.lookup(plate);
        setVehicle(data);
      } catch (e) {
        setVehicle(null);
        setVehicleError(e.status === 404 ? "Geen voertuig gevonden" : null);
      } finally {
        setVehicleLoading(false);
      }
    }, 400);
    return () => { clearTimeout(t); ctrl.abort(); };
  }, [plate]);

  const services = [
    { id: "apk", icon: I.Apk, name: "APK keuring", duration: "45 min", price: 55, hot: true,
      desc: "RDW-erkend keuringsstation. Inclusief uitgebreid rapport." },
    { id: "klein", icon: I.Wrench, name: "Onderhoudsbeurt", duration: "1 uur", price: 89,
      desc: "Olie + filter + 30-punts inspectie. Klein of groot." },
    { id: "diag", icon: I.Diag, name: "Diagnose", duration: "30 min", price: 45,
      desc: "OEM software én universeel — Bosch, Autel, VCDS, ISTA." },
    { id: "airco", icon: I.Snow, name: "Airco service", duration: "30 min", price: 69,
      desc: "F-gassen gecertificeerd. R134a + R1234yf." },
    { id: "banden", icon: I.Tire, name: "Banden & wielen", duration: "30 min", price: 40,
      desc: "Verkoop, montage en seizoensopslag." },
    { id: "rep", icon: I.Cog, name: "Reparaties", duration: "op afspraak", price: null,
      desc: "Mechanisch en elektronisch — t/m BVE 1." },
  ];

  return (
    <div>
      {/* HERO */}
      <section style={{
        position: "relative",
        borderBottom: "1px solid var(--border)",
        overflow: "hidden",
      }}>
        {/* ambient grid */}
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage:
            "radial-gradient(60% 60% at 30% 10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%)," +
            "linear-gradient(to right, color-mix(in oklab, var(--text) 5%, transparent) 1px, transparent 1px)," +
            "linear-gradient(to bottom, color-mix(in oklab, var(--text) 5%, transparent) 1px, transparent 1px)",
          backgroundSize: "auto, 64px 64px, 64px 64px",
          backgroundPosition: "0 0, 0 0, 0 0",
          maskImage: "linear-gradient(to bottom, black 60%, transparent)",
        }}/>

        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 32px 96px",
                      display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 80, alignItems: "center", position: "relative" }}>
          <div>
            <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }}/>
              Autobedrijf · Vijfhuizen
            </div>
            <h1 className="display" style={{ marginBottom: 20 }}>
              Vakwerk<br/>
              zonder<br/>
              <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 700 }}>verrassingen.</span>
            </h1>
            <p className="subhead" style={{ marginBottom: 36, maxWidth: 520 }}>
              Wij behandelen uw auto zoals een specialist hoort: heldere prijs vooraf,
              eerlijk advies en gecertificeerde monteurs. APK, onderhoud,
              complexe diagnose — vakkundig geregeld.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("boeking")}>
                Maak afspraak <I.ArrowRight size={18}/>
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => onNav("tarieven")}>
                Bekijk tarieven
              </button>
            </div>

            {/* trust bar */}
            <div style={{ display: "flex", gap: 28, marginTop: 56, flexWrap: "wrap", alignItems: "center" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ display: "flex", gap: 2 }}>
                  {[1,2,3,4,5].map(i => <I.Star key={i} size={14} stroke={0} style={{ fill: "var(--accent)", color: "var(--accent)" }}/>)}
                </div>
                <span style={{ fontWeight: 600 }}>4.9</span>
                <span className="text-muted" style={{ fontSize: 14 }}>· 247 Google reviews</span>
              </div>
              <div className="text-muted" style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
                <I.ShieldCheck size={14}/> RDW erkend APK keuringsstation
              </div>
              <div className="text-muted" style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
                <I.Clock size={14}/> Sinds 2008
              </div>
            </div>
          </div>

          {/* Right: kenteken snelboeking card */}
          <div className="card" style={{
            padding: 36,
            background: "linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%)",
            boxShadow: "var(--shadow-lift)",
            position: "relative",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>SNELBOEKING</div>
                <h3 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em" }}>Plan direct uw APK of service</h3>
              </div>
              <span className="pill accent"><span className="dot"/> 3 slots vrij deze week</span>
            </div>

            <p className="text-muted" style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 18, marginTop: 0 }}>
              Voer uw kenteken in — we halen merk, model en APK-vervaldatum
              automatisch op via RDW.
            </p>

            <label style={{ display: "block", marginBottom: 8, fontSize: 12, fontWeight: 600, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
              Kenteken
            </label>
            <div style={{ position: "relative" }}>
              <EuPlateStrip/>
              <input
                value={plate}
                onChange={(e) => setPlate(e.target.value.toUpperCase())}
                placeholder="XX-NN-XX"
                className="plate-input"
                maxLength={10}
                aria-label="Kenteken"
              />
            </div>

            {plate && plate.length >= 6 && (vehicleLoading || vehicle || vehicleError) && (
              <div className="card" style={{ marginTop: 14, padding: 14, background: "var(--surface-2)",
                                              display: "flex", alignItems: "center", gap: 14 }}>
                <I.Car size={28} style={{ color: vehicleError ? "var(--text-muted)" : "var(--accent)" }}/>
                <div style={{ flex: 1 }}>
                  {vehicleLoading && (
                    <div className="text-muted" style={{ fontSize: 13 }}>Even kijken…</div>
                  )}
                  {vehicle && !vehicleLoading && (
                    <>
                      <div style={{ fontWeight: 600 }}>
                        {[vehicle.make, vehicle.model].filter(Boolean).join(" ") || "Onbekend voertuig"}
                      </div>
                      <div className="text-muted" style={{ fontSize: 13 }}>
                        {[
                          vehicle.year ? `Bouwjaar ${vehicle.year}` : null,
                          vehicle.fuel_type,
                          vehicle.apk_expiry ? `APK verloopt ${new Date(vehicle.apk_expiry).toLocaleDateString('nl-NL')}` : null,
                        ].filter(Boolean).join(" · ")}
                      </div>
                    </>
                  )}
                  {vehicleError && !vehicleLoading && (
                    <div className="text-muted" style={{ fontSize: 13 }}>{vehicleError} — controleer het kenteken</div>
                  )}
                </div>
                {vehicle && !vehicleLoading && <I.Check size={20} style={{ color: "var(--success)" }}/>}
              </div>
            )}

            <button
              className="btn btn-primary btn-lg"
              style={{ width: "100%", marginTop: 18 }}
              onClick={() => {
                // Bewaar kenteken + RDW lookup zodat boekingswizard 'm kan oppakken
                if (plate) {
                  try {
                    sessionStorage.setItem('gd_plate', plate);
                    if (vehicle) sessionStorage.setItem('gd_vehicle', JSON.stringify(vehicle));
                  } catch (_) {}
                }
                onNav("boeking");
              }}
            >
              Bekijk vrije momenten <I.ArrowRight size={18}/>
            </button>

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 18,
                          paddingTop: 18, borderTop: "1px dashed var(--border)" }}>
              <div className="text-muted" style={{ fontSize: 12, display: "flex", alignItems: "center", gap: 6 }}>
                <I.ShieldCheck size={12}/> Vaste prijs vooraf
              </div>
              <div className="text-muted" style={{ fontSize: 12, display: "flex", alignItems: "center", gap: 6 }}>
                <I.Clock size={12}/> Bevestiging binnen 1 min
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST WALL — keurmerken (uniform formaat) */}
      <section style={{ borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "48px 32px" }}>
          <div className="eyebrow" style={{ textAlign: "center", marginBottom: 28 }}>
            Erkend & gecertificeerd
          </div>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "stretch", flexWrap: "wrap", gap: 16 }}>
            <KeurmerkBadge label="RDW erkend"     sub="Officieel APK station"    Icon={I.ShieldCheck} logo="photos/logos/keurmerken/rdw.webp"/>
            <KeurmerkBadge label="APK"            sub="Keuringsbevoegd"           Icon={I.Apk}         logo="photos/logos/keurmerken/apk.jpg"/>
            <KeurmerkBadge label="IBKI"           sub="F-gassen examen"           Icon={I.Snow}        logo="photos/logos/keurmerken/ibki.png"/>
            <KeurmerkBadge label="Innovam"        sub="NEN 9140 opleider"         Icon={I.Bolt}        logo="photos/logos/keurmerken/innovam.png"/>
            <KeurmerkBadge label="Bovag"          sub="Onafhankelijk lid"         Icon={I.Flag}        logo="photos/logos/keurmerken/bovag.jpg"/>
          </div>
        </div>
      </section>

      {/* DIAGNOSE IN ACTIE — echte foto */}
      <section style={{ padding: "100px 0", borderBottom: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
            <div role="img" aria-label="Diagnose-werkplaats Garage DéDé Vijfhuizen — uitlezen met OEM software" style={{
              borderRadius: 18, overflow: "hidden",
              border: "1px solid var(--border)",
              boxShadow: "var(--shadow-lift)",
              aspectRatio: "4 / 3",
              backgroundImage: "url('photos/diagnose/IMG_4626%20kopie%20klein.jpg')",
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}/>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Diagnose op dealer-niveau</div>
              <h2 className="headline" style={{ marginBottom: 20 }}>
                Wij vinden wat <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 700 }}>anderen missen.</span>
              </h2>
              <p className="subhead" style={{ marginBottom: 28 }}>
                Met professionele uitleesapparatuur (Autel, Bosch KTS, Texa, VCDS) én
                originele dealer-software lezen we elk merk uit. Mechanisch én elektronisch
                — tot op modulniveau.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 28 }}>
                {["Autel", "Bosch KTS", "Texa", "VCDS", "BMW ISTA", "Mercedes XENTRY"].map(t => (
                  <span key={t} style={{
                    padding: "8px 14px", border: "1px solid var(--border)", borderRadius: 8,
                    fontSize: 13, fontFamily: "var(--font-mono)", fontWeight: 500,
                    background: "var(--surface-2)",
                  }}>{t}</span>
                ))}
              </div>
              <button className="btn btn-ghost" onClick={() => onNav("over")}>
                Bekijk alle apparatuur <I.ArrowRight size={16}/>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* DIENSTEN GRID */}
      <section style={{ padding: "100px 0" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, gap: 32 }}>
            <SectionHead
              eyebrow="Wat we doen"
              title="Vakwerk voor elke auto"
              lede="Van standaard APK tot complexe elektronische diagnose. We werken met OEM software voor VW, BMW, Mercedes, Ford, Volvo en Renault."
            />
            <button className="btn btn-ghost" onClick={() => onNav("diensten")}>
              Alle diensten <I.ArrowRight size={16}/>
            </button>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {services.map(s => (
              <div key={s.id} className="card lift" style={{ padding: 28, cursor: "pointer", position: "relative" }}
                   onClick={() => onNav("boeking")}>
                {s.hot && (
                  <span className="pill accent" style={{ position: "absolute", top: 20, right: 20 }}>
                    <span className="dot"/> Populair
                  </span>
                )}
                <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--surface-2)",
                              border: "1px solid var(--border)",
                              display: "flex", alignItems: "center", justifyContent: "center",
                              color: "var(--accent)", marginBottom: 24 }}>
                  <s.icon size={22}/>
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 700, marginBottom: 10, letterSpacing: "-0.015em" }}>
                  {s.name}
                </h3>
                <p className="text-muted" style={{ fontSize: 14, lineHeight: 1.6, margin: 0, marginBottom: 24, minHeight: 44 }}>
                  {s.desc}
                </p>
                <hr className="div"/>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, fontSize: 14 }}>
                  <span className="text-muted">{s.duration}</span>
                  <span className="text-mono" style={{ fontWeight: 600 }}>
                    {s.price ? `vanaf €${s.price}` : "op maat"}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOE WERKT HET — met werkplaats-foto achtergrond */}
      <section role="img" aria-label="APK keuringsstation Garage DéDé Vijfhuizen — RDW erkend" style={{
        padding: "100px 0",
        position: "relative",
        borderTop: "1px solid var(--border)",
        borderBottom: "1px solid var(--border)",
        backgroundImage: "url('photos/diagnose/IMG_4615.JPG')",
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundAttachment: "fixed",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(11,11,12,0.94) 0%, rgba(11,11,12,0.82) 50%, rgba(11,11,12,0.94) 100%)",
        }}/>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px", position: "relative" }}>
          <SectionHead eyebrow="Hoe werkt het" title="Drie stappen, klaar." align="center"/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 56 }}>
            {[
              { n: "01", t: "Plan online", d: "Voer uw kenteken in, kies een dienst en pak een tijdslot dat u uitkomt. Bevestiging direct per e-mail.", icon: I.Calendar },
              { n: "02", t: "Wij doen het werk", d: "Inclusief 30-punts inspectie en eerlijk advies. Bij vondsten bellen we vóór we doorgaan — geen verrassingen.", icon: I.Wrench },
              { n: "03", t: "Klaar binnen 24u", d: "Notificatie zodra de auto klaar is. Factuur per e-mail, 12 maanden garantie op het werk.", icon: I.Check },
            ].map((s, i) => (
              <div key={i} style={{ position: "relative" }}>
                <div className="text-mono" style={{ fontSize: 13, color: "var(--accent)", marginBottom: 16, letterSpacing: "0.1em" }}>
                  STAP {s.n}
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
                  <s.icon size={26} style={{ color: "var(--text)" }}/>
                  <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em" }}>{s.t}</h3>
                </div>
                <p className="text-muted" style={{ fontSize: 15, lineHeight: 1.6, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SOCIAL PROOF — Google reviews */}
      <GoogleReviewsSection/>

      {/* BRAND MARQUEE — automerken */}
      <section style={{ padding: "60px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px", marginBottom: 32 }}>
          <SectionHead
            eyebrow="Geen merk te specialistisch"
            title="Wij werken aan alle merken."
            lede="Van klassieke benzine tot moderne EV's — onze monteurs zijn opgeleid voor het hele spectrum aan personenauto's."
            align="center"
          />
        </div>
        <BrandMarquee/>
      </section>

      {/* PRE-FOOTER CTA */}
      <section style={{ padding: "80px 32px 80px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
                      borderRadius: 24, padding: "72px 64px",
                      background: "linear-gradient(135deg, var(--surface) 0%, color-mix(in oklab, var(--accent) 12%, var(--surface)) 100%)",
                      border: "1px solid color-mix(in oklab, var(--accent) 30%, var(--border))",
                      display: "flex", justifyContent: "space-between", alignItems: "center", gap: 48,
                      flexWrap: "wrap", position: "relative", overflow: "hidden" }}>
          <div aria-hidden style={{ position: "absolute", right: -80, bottom: -120, opacity: 0.08 }}>
            <I.Wrench size={360} stroke={1} style={{ color: "var(--accent)" }}/>
          </div>
          <div style={{ position: "relative" }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Tijd voor uw APK?</div>
            <h2 className="headline" style={{ marginBottom: 14, fontSize: 44 }}>
              Boek vandaag, rij morgen weer.
            </h2>
            <p className="subhead" style={{ margin: 0, maxWidth: 520 }}>
              Gemiddelde wachttijd: 2-4 werkdagen. Spoed? Bel ons direct — vaak passen we u nog dezelfde week in.
            </p>
          </div>
          <div style={{ display: "flex", gap: 12, position: "relative" }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav("boeking")}>
              Maak afspraak <I.ArrowRight size={18}/>
            </button>
            <button className="btn btn-ghost btn-lg">
              <I.Phone size={16}/> Bel direct
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Home = Home;