// Diensten — focus op WAT we doen, niet de prijzen
function Diensten({ onNav }) {
  const services = [
    {
      icon: I.Apk,
      cat: "APK keuring",
      tagline: "RDW erkend keuringsstation",
      desc: "Officiële APK voor personenauto's tot 3500 kg. Inclusief uitgebreid keuringsrapport met punten van aandacht voor de toekomst.",
      bullets: [
        "Volledige RDW APK keuring (lichte voertuigen)",
        "Direct keuren — gemiddeld 45 min in/uit",
        "Bij afkeur: heldere uitleg en herstel-offerte",
        "Gratis herkeuring binnen 14 dagen na herstel",
      ],
    },
    {
      icon: I.Wrench,
      cat: "Onderhoud",
      tagline: "Kleine en grote beurten — alle merken",
      desc: "Volgens fabrikant-richtlijn met 30-punts inspectie. Van eenvoudige olieverversing tot complete grote beurt met distributiecheck.",
      bullets: [
        "Olie + filter + 30-punts inspectie (kleine beurt)",
        "Grote beurt incl. distributie & remmenservice",
        "Remblokken, schijven, distributieriem",
        "Service-reset voor BMW, Mercedes, VAG, Volvo, Ford",
      ],
    },
    {
      icon: I.Diag,
      cat: "Diagnose",
      tagline: "Op dealer-niveau — universeel én OEM",
      desc: "Met Autel, Bosch KTS, Texa, Jaltest én originele dealer-software (ISTA, XENTRY, VCDS, IDS, VIDA). Wat de ene niet leest, leest de andere wel.",
      bullets: [
        "Storingscodes uitlezen + interpreteren",
        "Mechanische én elektronische diagnose (BVE 1)",
        "Live data, modulniveau, freeze-frames",
        "OEM coderen, programmeren, service-resets",
      ],
    },
    {
      icon: I.Cog,
      cat: "Reparatie",
      tagline: "Mechanisch én elektronisch",
      desc: "Van vastzittende remmen tot complexe motormanagement-storingen. Eerlijk advies vooraf, geen meerwerk zonder uw akkoord.",
      bullets: [
        "Motor & uitlaat",
        "Aandrijflijn, koppeling, versnellingsbak",
        "Stuur- en onderstelreparaties",
        "Elektronische storingen (BVE 1 specialist)",
      ],
    },
    {
      icon: I.Snow,
      cat: "Airco service",
      tagline: "F-gassen IBKI gecertificeerd",
      desc: "Reguliere airco-onderhoud, lekzoeken en bijvullen. Wij werken met R134a én het nieuwere R1234yf.",
      bullets: [
        "Airco service (vullen, droger, smeermiddel)",
        "Lekdetectie met UV-traceerolie",
        "Compressor en koppeling controle",
        "Geur- en bacterie-behandeling",
      ],
    },
    {
      icon: I.Tire,
      cat: "Banden & wielen",
      tagline: "Wisselen, monteren, opslaan",
      desc: "Seizoenswissel, montage van nieuwe banden, uitbalanceren en seizoensopslag in onze beveiligde werkplaats.",
      bullets: [
        "Banden wisselen op velg",
        "Nieuwe banden monteren + uitbalanceren",
        "Seizoensopslag (zomer/winter)",
        "TPMS (bandenspanning) sensoren",
      ],
    },
    {
      icon: I.Bolt,
      cat: "Hybride & EV",
      tagline: "NEN 9140 hoogspannings-bevoegd",
      desc: "Onderhoud aan hybride en volledig elektrische voertuigen. Onze monteur is NEN 9140 Werkverantwoordelijke — opgeleid voor het hele EV-spectrum.",
      bullets: [
        "Onderhoud hybride en plug-in",
        "Veilig werken aan hoogspanningssystemen",
        "Battery-management diagnose",
        "Service-checks en software-updates",
      ],
    },
    {
      icon: I.ShieldCheck,
      cat: "Overig",
      tagline: "Voorruit, accu, uitlaat",
      desc: "Voor de zaken die niet in een hokje passen. Vraag gerust naar een vrijblijvende offerte.",
      bullets: [
        "Ruitschade reparatie + vervanging",
        "Accu vervangen (incl. coderen voor moderne auto's)",
        "Uitlaatreparatie en -vervanging",
        "Mobiliteitsservice — vervangend vervoer",
      ],
    },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 32px 64px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "flex-end" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Onze diensten</div>
              <h1 className="display" style={{ fontSize: 64 }}>
                Vakwerk voor<br/>
                <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 700 }}>elke auto.</span>
              </h1>
            </div>
            <p className="subhead" style={{ margin: 0 }}>
              Acht diensten — van standaard APK tot complexe diagnose en EV-onderhoud.
              Eerlijk advies vooraf, gecertificeerde monteurs, garantie op het werk.
            </p>
          </div>
        </div>
      </section>

      {/* Service blocks */}
      <section style={{ padding: "80px 0" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px",
                      display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {services.map((s, i) => (
            <div key={i} className="card lift" style={{ padding: 36 }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 18, marginBottom: 18 }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 14, flexShrink: 0,
                  background: "color-mix(in oklab, var(--accent) 12%, var(--surface-2))",
                  border: "1px solid color-mix(in oklab, var(--accent) 30%, var(--border))",
                  display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)",
                }}>
                  <s.icon size={26}/>
                </div>
                <div>
                  <h2 style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 4 }}>
                    {s.cat}
                  </h2>
                  <div className="text-muted" style={{ fontSize: 14, fontWeight: 500 }}>{s.tagline}</div>
                </div>
              </div>

              <p style={{ fontSize: 15, lineHeight: 1.6, marginBottom: 20, color: "var(--text)" }}>{s.desc}</p>

              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, marginBottom: 24 }}>
                {s.bullets.map((b, j) => (
                  <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, lineHeight: 1.5 }}>
                    <I.Check size={14} style={{ color: "var(--accent)", marginTop: 4, flexShrink: 0 }}/>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>

              <div style={{ display: "flex", gap: 10 }}>
                <button className="btn btn-primary btn-sm" onClick={() => onNav("boeking")}>
                  Plan afspraak <I.ArrowRight size={14}/>
                </button>
                <button className="btn btn-ghost btn-sm" onClick={() => onNav("tarieven")}>
                  Bekijk tarief
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "32px 0 100px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px" }}>
          <div className="card" style={{ padding: 48, textAlign: "center",
                                          background: "linear-gradient(135deg, var(--surface) 0%, color-mix(in oklab, var(--accent) 10%, var(--surface)) 100%)",
                                          border: "1px solid color-mix(in oklab, var(--accent) 25%, var(--border))" }}>
            <h3 style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 10 }}>
              Niet zeker welke dienst u nodig heeft?
            </h3>
            <p className="text-muted" style={{ fontSize: 16, marginTop: 0, marginBottom: 28, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>
              Beschrijf het probleem of de geluid van uw auto. U krijgt vrijblijvend een eerlijk advies en offerte.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("boeking")}>
                Plan afspraak <I.ArrowRight size={18}/>
              </button>
              <button className="btn btn-ghost btn-lg">
                <I.Phone size={16}/> Bel direct: 023 - 545 1809
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// Tarieven — prijslijst
function Tarieven({ onNav }) {
  const all = [
    { cat: "Keuring", items: [
      { name: "APK keuring (personenauto < 3500 kg)", price: 55, dur: 45, popular: true },
      { name: "APK met onderhoudsbeurt combi", price: 129, dur: 90 },
      { name: "Herkeuring na afkeur", price: 25, dur: 30 },
    ]},
    { cat: "Onderhoud", items: [
      { name: "Kleine beurt — olie + filter + 30-punts", price: 89, dur: 60 },
      { name: "Grote beurt — incl. distributiecheck", price: 249, dur: 180 },
      { name: "Remblokken voor (set)", price: 159, dur: 60 },
      { name: "Remblokken + schijven voor", price: 329, dur: 90 },
      { name: "Distributieriem vervangen", price: 595, dur: 240 },
    ]},
    { cat: "Diagnose & reparatie", items: [
      { name: "Diagnose / uitleescode (universeel)", price: 45, dur: 30 },
      { name: "OEM diagnose (BMW ISTA / Merc XENTRY / VCDS)", price: 79, dur: 45 },
      { name: "Diagnose mechanisch — uitgebreid", price: 95, dur: 60 },
      { name: "Reparatie", price: null, dur: null, note: "uurtarief €78,50 — offerte vooraf" },
    ]},
    { cat: "Banden & airco", items: [
      { name: "Banden wisselen (4 stuks, op velg)", price: 40, dur: 30 },
      { name: "Banden monteren + uitbalanceren (4)", price: 89, dur: 60 },
      { name: "Banden seizoensopslag (per set)", price: 39, dur: null, note: "per seizoen" },
      { name: "Airco service (R134a / R1234yf)", price: 69, dur: 30 },
      { name: "Airco diagnose & lekzoeken", price: 95, dur: 60 },
    ]},
    { cat: "Overig", items: [
      { name: "Uitlaat — montage en reparatie", price: null, dur: null, note: "vanaf €110, op maat" },
      { name: "Accu vervangen (incl. coderen)", price: 165, dur: 30 },
      { name: "Ruitschade reparatie", price: 75, dur: 45 },
    ]},
  ];

  return (
    <div>
      <section style={{ borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 32px 64px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "flex-end" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Tarieven</div>
              <h1 className="display" style={{ fontSize: 64 }}>
                Heldere prijzen.<br/>
                <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 700 }}>Geen verrassingen.</span>
              </h1>
            </div>
            <p className="subhead" style={{ margin: 0 }}>
              "Vanaf"-prijzen zijn richtprijzen voor standaard auto's. Bij complexere voertuigen
              krijgt u altijd een offerte vooraf. Geen meerwerk zonder uw akkoord.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 0" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px" }}>
          {all.map((g, gi) => (
            <div key={gi} style={{ marginBottom: 56 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 20, paddingBottom: 14, borderBottom: "1px solid var(--border)" }}>
                <span className="text-mono text-muted" style={{ fontSize: 13 }}>0{gi+1}</span>
                <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em" }}>{g.cat}</h2>
              </div>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {g.items.map((it, i) => (
                  <div key={i} style={{
                    display: "grid", gridTemplateColumns: "1.5fr auto auto auto",
                    gap: 24, alignItems: "center",
                    padding: "20px 0",
                    borderBottom: i < g.items.length - 1 ? "1px dashed var(--border)" : "none",
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span style={{ fontWeight: 500, fontSize: 16 }}>{it.name}</span>
                      {it.popular && <span className="pill accent"><span className="dot"/> Populair</span>}
                    </div>
                    <span className="text-muted text-mono" style={{ fontSize: 13, minWidth: 70, textAlign: "right" }}>
                      {it.dur ? `${it.dur} min` : "—"}
                    </span>
                    <span className="text-mono" style={{ fontWeight: 700, fontSize: 16, minWidth: 110, textAlign: "right" }}>
                      {it.price ? `vanaf €${it.price}` : <span className="text-muted" style={{ fontWeight: 400, fontSize: 13 }}>{it.note}</span>}
                    </span>
                    <button className="btn btn-ghost btn-sm" onClick={() => onNav("boeking")}>
                      Boek <I.ArrowRight size={14}/>
                    </button>
                  </div>
                ))}
              </div>
            </div>
          ))}

          <div className="card" style={{ padding: 32, textAlign: "center", background: "var(--surface)" }}>
            <h3 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Iets niet in de lijst?</h3>
            <p className="text-muted" style={{ marginTop: 0, marginBottom: 20 }}>
              Beschrijf uw vraag en u krijgt vandaag nog een vrijblijvende offerte.
            </p>
            <button className="btn btn-primary" onClick={() => onNav("boeking")}>
              Vraag offerte aan <I.ArrowRight size={16}/>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Diensten = Diensten;
window.Tarieven = Tarieven;