// CONTACT — herschreven om dezelfde branding/visual-language te gebruiken
// als de home- en over-pages: over-sec/wrap/badge.pulse/eye.bar, .btn.primary/.ghost,
// <span class="o"> voor oranje accenten, IBM Plex Sans + JetBrains Mono.
const FAQ_ITEMS = [
  { ix:"Q.01", cat:"comm", q:"Wat kost een typische opstelling?", a:"250 kVA vanaf <b>€ 4.500/maand</b> verhuur of <b>€ 165k</b> aankoop. ROI <b>14–22 maanden</b> tegen diesel-baseline." },
  { ix:"Q.02", cat:"comm", q:"Lead-time vanaf bevestigde intake?", a:"<b>10 werkdagen</b> standaard. Spoedlijn voor events: <b>72u</b>." },
  { ix:"Q.03", cat:"jur",  q:"Tekenen jullie een NDA?", a:"Ja — eigen template binnen 1 werkdag, of we tekenen die van jou." },
  { ix:"Q.04", cat:"comm", q:"Wat zit er in het voorstel?", a:"Configuratie + opstellingsplan, ROI tegen baseline, CO₂-reductie in CSRD-format." },
  { ix:"Q.05", cat:"tech", q:"Welke protocollen ondersteunen jullie?", a:"<b>Modbus TCP · OPC-UA · MQTT</b>. Open API voor BMS/SCADA-integratie." },
  { ix:"Q.06", cat:"tech", q:"Hoe zit service & onderhoud?", a:"24/7 NOC-monitoring. SLA <b>4u-respons</b>, <b>≥98% uptime</b>." },
];
const FAQ_CATS = [
  { key:"all",  label:"Alle" },
  { key:"comm", label:"Commercieel" },
  { key:"tech", label:"Technisch" },
  { key:"jur",  label:"Juridisch" },
];

window.SiteContact = function SiteContact() {
  const [faqCat, setFaqCat] = React.useState("all");
  const faqFiltered = faqCat === "all" ? FAQ_ITEMS : FAQ_ITEMS.filter(i => i.cat === faqCat);
  const catCount = (k) => k === "all" ? FAQ_ITEMS.length : FAQ_ITEMS.filter(i => i.cat === k).length;
  const activeLabel = FAQ_CATS.find(c => c.key === faqCat)?.label.toLowerCase() || "alle";
  return (
    <div className="page" data-page="contact" data-screen-label="06 Contact">
      <style>{`
      /* Page-scoped tweaks die voortbouwen op de site-tokens (var(--*) komen uit de host) */
      [data-page="contact"]{background:#1A0F08}
      [data-page="contact"] .over-sec{position:relative;padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--line);background:transparent;overflow:hidden}
      [data-page="contact"] .over-sec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,107,43,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,43,.06) 1px,transparent 1px);background-size:96px 96px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
      [data-page="contact"] .over-sec::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(800px 600px at 80% 50%,rgba(255,107,43,.14),transparent 65%)}
      [data-page="contact"] .c-bezoek::after{background:radial-gradient(900px 600px at 90% 40%,rgba(255,107,43,.16),transparent 65%)}
      [data-page="contact"] .c-intake::after{background:radial-gradient(900px 700px at 20% 30%,rgba(255,107,43,.12),transparent 65%)}
      [data-page="contact"] .c-paden::after{background:radial-gradient(800px 600px at 15% 80%,rgba(255,107,43,.16),transparent 65%)}
      [data-page="contact"] .c-faq::after{background:radial-gradient(800px 600px at 85% 20%,rgba(255,107,43,.12),transparent 65%)}
      [data-page="contact"] .over-sec.no-top{border-top:none;padding-top:clamp(80px,10vw,140px)}
      [data-page="contact"] .over-sec .wrap{max-width:1320px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
      [data-page="contact"] .badge{display:inline-flex;gap:10px;padding:8px 16px;border:1px solid rgba(255,107,43,.4);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--power-orange);background:rgba(255,107,43,.06);margin-bottom:32px;align-items:center}
      [data-page="contact"] .badge .pulse{width:6px;height:6px;border-radius:99px;background:var(--power-orange);box-shadow:0 0 0 4px rgba(255,107,43,.18)}
      [data-page="contact"] .eye{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--power-orange);text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
      [data-page="contact"] .eye .bar{width:24px;height:1.5px;background:var(--power-orange)}
      [data-page="contact"] .o{color:var(--power-orange)}

      /* ===== HERO ===== */
      [data-page="contact"] .c-hero{text-align:center;overflow:hidden;background:radial-gradient(1100px 700px at 75% 30%,rgba(255,107,43,.22),transparent 65%),radial-gradient(900px 600px at 15% 90%,rgba(255,215,0,.06),transparent 70%)}
      [data-page="contact"] .c-hero::after{display:none}
      [data-page="contact"] .c-hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,107,43,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,43,.06) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);pointer-events:none}
      [data-page="contact"] .c-hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:.95;font-size:clamp(48px,6vw,96px);margin:0 auto;max-width:14ch;color:var(--off-white)}
      [data-page="contact"] .c-hero .lead{margin:28px auto 0;font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:60ch;line-height:1.45}
      [data-page="contact"] .c-hero .row{margin-top:40px;display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

      /* ===== BEZOEK ===== */
      [data-page="contact"] .c-bezoek{background:transparent}
      [data-page="contact"] .c-bezoek .grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
      [data-page="contact"] .c-bezoek h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.01em;line-height:1.05;margin:0 0 28px;color:var(--off-white);max-width:18ch}
      [data-page="contact"] .c-bezoek .blocks{display:grid;grid-template-columns:1fr 1fr;gap:24px}
      [data-page="contact"] .c-bezoek .blk{padding-top:18px;border-top:1px solid var(--line)}
      [data-page="contact"] .c-bezoek .blk .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
      [data-page="contact"] .c-bezoek .blk .v{font-family:var(--display);font-weight:600;font-size:16px;color:var(--off-white);line-height:1.45}
      [data-page="contact"] .c-bezoek .blk .v b{color:var(--power-orange);font-weight:600}
      [data-page="contact"] .c-bezoek .map{aspect-ratio:1;background:#13090A;border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px}
      [data-page="contact"] .c-bezoek .map::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(20,16,10,.7) 80%)}
      [data-page="contact"] .c-bezoek .map .pin{position:absolute;top:50%;left:50%;width:28px;height:28px;border-radius:99px;background:var(--power-orange);box-shadow:0 0 0 10px rgba(255,107,43,.2),0 0 0 22px rgba(255,107,43,.08);transform:translate(-50%,-50%);z-index:2}
      [data-page="contact"] .c-bezoek .map .lbl{position:absolute;bottom:24px;left:24px;background:rgba(20,16,10,.9);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--off-white);z-index:3;display:flex;align-items:center;gap:10px}
      [data-page="contact"] .c-bezoek .map .lbl .dot{width:6px;height:6px;border-radius:99px;background:var(--power-orange)}

      /* ===== INTAKE ===== */
      [data-page="contact"] .c-intake{background:linear-gradient(180deg,rgba(19,9,10,.7),rgba(14,8,5,.7))}
      [data-page="contact"] .c-intake .head{text-align:center;margin-bottom:48px}
      [data-page="contact"] .c-intake .head h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4vw,64px);letter-spacing:-.015em;margin:0;color:var(--off-white);line-height:1.02}
      [data-page="contact"] .c-intake .stepper{max-width:880px;margin:0 auto;background:#1A0F08;border:1px solid var(--line);border-radius:16px;overflow:hidden}
      [data-page="contact"] .c-intake .stepbar{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
      [data-page="contact"] .c-intake .stepbar .st{padding:18px 20px;border-right:1px solid var(--line);display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
      [data-page="contact"] .c-intake .stepbar .st:last-child{border-right:none}
      [data-page="contact"] .c-intake .stepbar .st .ix{width:26px;height:26px;border-radius:99px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:11px;color:var(--muted)}
      [data-page="contact"] .c-intake .stepbar .st.active{color:var(--power-orange);background:rgba(255,107,43,.06)}
      [data-page="contact"] .c-intake .stepbar .st.active .ix{border-color:var(--power-orange);background:var(--power-orange);color:#1A0F08}
      [data-page="contact"] .c-intake .stepbar .st.done{color:var(--off-white)}
      [data-page="contact"] .c-intake .stepbar .st.done .ix{border-color:var(--power-orange);color:var(--power-orange)}
      [data-page="contact"] .c-intake .panel{padding:48px}
      [data-page="contact"] .c-intake .panel h3{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em;margin:0 0 8px;color:var(--off-white)}
      [data-page="contact"] .c-intake .panel .ph{color:var(--muted);font-size:14.5px;margin:0 0 28px;line-height:1.55}
      [data-page="contact"] .c-intake .panel form{display:grid;gap:18px}
      [data-page="contact"] .c-intake .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
      [data-page="contact"] .c-intake .stepnav{display:flex;justify-content:space-between;align-items:center;padding:24px 48px;border-top:1px solid var(--line);background:#0E0805}
      [data-page="contact"] .fld{display:flex;flex-direction:column;gap:8px}
      [data-page="contact"] .fld label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
      [data-page="contact"] .fld input,[data-page="contact"] .fld textarea,[data-page="contact"] .fld select{font-family:var(--display);font-size:15px;background:#0E0805;border:1px solid var(--line);color:var(--off-white);padding:14px 16px;border-radius:8px;outline:none;transition:border-color .2s}
      [data-page="contact"] .fld input:focus,[data-page="contact"] .fld textarea:focus,[data-page="contact"] .fld select:focus{border-color:var(--power-orange)}
      [data-page="contact"] .fld textarea{min-height:96px;resize:vertical}

      /* ===== TWEE PADEN — copied vibe from over-cta ===== */
      [data-page="contact"] .c-paden{background:transparent}
      [data-page="contact"] .c-paden .head{margin-bottom:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
      [data-page="contact"] .c-paden .head h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.01em;margin:0;color:var(--off-white);line-height:1.05}
      [data-page="contact"] .c-paden .stamp{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:10px 18px;border:1px solid var(--line);border-radius:99px;display:inline-flex;align-items:center;gap:10px}
      [data-page="contact"] .c-paden .stamp .dot{width:6px;height:6px;border-radius:99px;background:var(--power-orange);box-shadow:0 0 0 4px rgba(255,107,43,.15)}
      [data-page="contact"] .c-paden .stamp b{color:var(--power-orange);font-weight:600}
      [data-page="contact"] .c-paden .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#1A0F08}
      [data-page="contact"] .c-paden .col{padding:48px;display:flex;flex-direction:column;gap:20px;position:relative;border-right:1px solid var(--line);text-decoration:none;color:inherit;transition:background .2s}
      [data-page="contact"] .c-paden .col:last-child{border-right:none;background:#13090A}
      [data-page="contact"] .c-paden .col:hover{background:rgba(255,107,43,.04)}
      [data-page="contact"] .c-paden .col .top{display:flex;justify-content:space-between;align-items:center}
      [data-page="contact"] .c-paden .col .top .ix{font-family:var(--display);font-weight:700;font-size:36px;letter-spacing:-.02em;color:var(--off-white)}
      [data-page="contact"] .c-paden .col .top .ix em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-left:10px;vertical-align:middle;font-weight:400}
      [data-page="contact"] .c-paden .col .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--power-orange);padding:6px 12px;border:1px solid rgba(255,107,43,.4);border-radius:99px;background:rgba(255,107,43,.06)}
      [data-page="contact"] .c-paden .col h3{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.015em;line-height:1.05;margin:0;color:var(--off-white);max-width:18ch}
      [data-page="contact"] .c-paden .col p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0;max-width:42ch}
      [data-page="contact"] .c-paden .col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--off-white)}
      [data-page="contact"] .c-paden .col ul li{padding-left:14px;position:relative}
      [data-page="contact"] .c-paden .col ul li::before{content:"·";position:absolute;left:0;color:var(--power-orange);font-weight:700}
      [data-page="contact"] .c-paden .col .foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
      [data-page="contact"] .c-paden .col .foot .arrow{font-family:var(--display);font-weight:600;color:var(--power-orange);font-size:15px}
      [data-page="contact"] .c-paden .col .foot .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

      /* ===== FAQ ===== */
      [data-page="contact"] .c-faq{background:transparent}
      [data-page="contact"] .c-faq .split{display:grid;grid-template-columns:340px 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(19,9,10,.55);backdrop-filter:blur(2px);min-height:560px}
      [data-page="contact"] .c-faq .left{padding:48px 32px;border-right:1px solid var(--line);background:rgba(19,9,10,.6);display:flex;flex-direction:column;gap:20px}
      [data-page="contact"] .c-faq .left .ix{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
      [data-page="contact"] .c-faq .left .ix b{color:var(--power-orange);font-weight:600}
      [data-page="contact"] .c-faq .left p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.55}
      [data-page="contact"] .c-faq .filter{margin-top:16px;display:grid;gap:6px}
      [data-page="contact"] .c-faq .filter a{padding:10px 14px;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;cursor:pointer;text-decoration:none}
      [data-page="contact"] .c-faq .filter a.active{border-color:var(--power-orange);color:var(--power-orange);background:rgba(255,107,43,.06)}
      [data-page="contact"] .c-faq .filter a b{color:var(--off-white);font-family:var(--mono);font-weight:600;font-size:11px}
      [data-page="contact"] .c-faq .right{padding:48px;background:rgba(26,15,8,.5)}
      [data-page="contact"] .c-faq .right .head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
      [data-page="contact"] .c-faq .right .head b{color:var(--power-orange);font-weight:600}
      [data-page="contact"] .qa{display:grid;grid-template-columns:80px 1.2fr 2fr;gap:32px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
      [data-page="contact"] .qa .ix{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--power-orange);padding-top:4px}
      [data-page="contact"] .qa .q{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.005em;color:var(--off-white)}
      [data-page="contact"] .qa .a{color:var(--muted);font-size:14.5px;line-height:1.6}
      [data-page="contact"] .qa .a b{color:var(--off-white);font-weight:600}

      @media (max-width:900px){
        [data-page="contact"] .c-bezoek .grid2{grid-template-columns:1fr}
        [data-page="contact"] .c-paden .grid2{grid-template-columns:1fr}
        [data-page="contact"] .c-paden .col{border-right:none;border-bottom:1px solid var(--line)}
        [data-page="contact"] .c-faq .split{grid-template-columns:1fr}
        [data-page="contact"] .c-faq .left,[data-page="contact"] .c-faq .right{padding:32px}
        [data-page="contact"] .c-intake .stepbar{grid-template-columns:repeat(2,1fr)}
        [data-page="contact"] .c-intake .stepbar .st:nth-child(2){border-right:none}
        [data-page="contact"] .c-intake .panel{padding:32px}
        [data-page="contact"] .c-intake .stepnav{padding:18px 32px}
        [data-page="contact"] .c-intake .row2{grid-template-columns:1fr}
        [data-page="contact"] .qa{grid-template-columns:60px 1fr;gap:16px}
        [data-page="contact"] .qa .a{grid-column:1 / -1;padding-left:60px}
      }
      `}</style>

      {/* HERO */}
      <section className="over-sec c-hero no-top" data-screen-label="06.01 Hero">
        <div className="wrap">
          <div className="badge"><span className="pulse"></span>Contact · binnen 48 uur</div>
          <h1>Eén locatie. <span className="o">Eén voorstel.</span></h1>
          <p className="lead">
            Stuur je site-coördinaten of plan. Binnen 48 uur ligt er een concreet voorstel —
            geen sales-call, geen brochure.
          </p>
          <div className="row">
            <a href="#intake" className="btn primary">Stuur locatie <span className="arrow">→</span></a>
            <a href="#paden" className="btn ghost">Plan gesprek</a>
            <a href="#paden" className="btn ghost">Word partner</a>
          </div>
        </div>
      </section>

      {/* BEZOEK */}
      <section className="over-sec c-bezoek" id="bezoek" data-screen-label="06.02 Bezoek">
        <div className="wrap">
          <div className="grid2">
            <div>
              <div className="sec-num"><span className="ix">02</span><span className="nm">Bezoek</span></div>
              <h2 className="h2" style={{margin:"0 0 28px",maxWidth:"18ch"}}>Kom <span className="o">langs</span> in Rotterdam-Zuid.</h2>
              <div className="blocks">
                <div className="blk"><div className="lbl">Adres</div><div className="v">— — —<br/>— — —</div></div>
                <div className="blk"><div className="lbl">Open</div><div className="v">Ma–Vr · 09:00–17:30<br/><b>Op afspraak</b></div></div>
                <div className="blk"><div className="lbl">Telefoon</div><div className="v">— — —</div></div>
                <div className="blk"><div className="lbl">E-mail</div><div className="v">— — —</div></div>
                <div className="blk"><div className="lbl">KvK</div><div className="v">— — —</div></div>
                <div className="blk"><div className="lbl">BTW</div><div className="v">— — —</div></div>
              </div>
            </div>
            <div className="map">
              <div className="pin"></div>
              <div className="lbl"><span className="dot"></span>WattIQ HQ · — — —</div>
            </div>
          </div>
        </div>
      </section>

      {/* INTAKE */}
      <section className="over-sec c-intake" id="intake" data-screen-label="06.03 Intake">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num"><span className="ix">03</span><span className="nm">Intake · 4 stappen</span></div>
              <h2 className="h2" style={{margin:0,maxWidth:"22ch"}}>Stap voor stap. <span className="o">Geen ruis.</span></h2>
            </div>
            <p className="lead">Vermogen, duur, huidige situatie. Hoe specifieker, hoe beter het voorstel.</p>
          </div>
          <div className="stepper">
            <div className="stepbar">
              <div className="st done"><span className="ix">✓</span>Locatie</div>
              <div className="st active"><span className="ix">02</span>Vraag</div>
              <div className="st"><span className="ix">03</span>Tijdlijn</div>
              <div className="st"><span className="ix">04</span>Contact</div>
            </div>
            <div className="panel">
              <h3>Wat speelt er op de locatie?</h3>
              <p className="ph">Vermogen, duur, en wat je nu gebruikt. Hoe specifieker, hoe beter het voorstel.</p>
              <form>
                <div className="row2">
                  <div className="fld"><label>Vermogen (kVA)</label><input type="text" placeholder="bijv. 250 kVA"/></div>
                  <div className="fld"><label>Duur</label><select><option>Selecteer...</option><option>≤ 1 maand</option><option>1–6 maanden</option><option>6–24 maanden</option><option>Permanent</option></select></div>
                </div>
                <div className="fld"><label>Huidige situatie</label><select><option>Selecteer...</option><option>Diesel-aggregaat</option><option>Hybride opstelling</option><option>Net (krap)</option><option>Niets — nog te bouwen</option></select></div>
                <div className="fld"><label>Toelichting</label><textarea placeholder="Wat is de uitdaging? Welke deadline?"></textarea></div>
              </form>
            </div>
            <div className="stepnav">
              <button type="button" className="btn ghost">← Terug</button>
              <button type="button" className="btn primary">Volgende <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </section>

      {/* TWEE PADEN */}
      <section className="over-sec c-paden" id="paden" data-screen-label="06.04 Twee paden">
        <div className="wrap">
          <div className="head">
            <div>
              <div className="sec-num"><span className="ix">04</span><span className="nm">Twee paden · één richting</span></div>
              <h2 className="h2" style={{margin:0,maxWidth:"22ch"}}>Klant of <span className="o">partner.</span></h2>
            </div>
            <span className="stamp"><span className="dot"></span>Reactie · <b>≤ 48u</b></span>
          </div>
          <div className="grid2">
            <a href="#intake" className="col">
              <div className="top">
                <div className="ix">01<em>Pad</em></div>
                <span className="tag">Wie een locatie heeft</span>
              </div>
              <h3>Eén pin op de kaart, <span className="o">één voorstel</span> in je inbox.</h3>
              <p>
                Pin je site of upload het plan. Binnen 48u krijg je systeem-configuratie, ROI op
                je diesel-baseline en de CO₂-impact — concreet genoeg om mee naar de stuurgroep.
              </p>
              <ul>
                <li>Reactie · ≤ 48u</li>
                <li>Verplichting · geen</li>
                <li>Voorstel · ROI + CO₂ + config</li>
              </ul>
              <div className="foot">
                <div className="arrow">Stuur intake →</div>
                <div className="sub">Klant · direct</div>
              </div>
            </a>
            <a href="mailto:— — —" className="col">
              <div className="top">
                <div className="ix">02<em>Pad</em></div>
                <span className="tag">Verhuur · groothandel · EPC</span>
              </div>
              <h3>Word partner. <span className="o">Schaal mee</span> in vier weken.</h3>
              <p>
                Voor verhuur- en groothandelpartners die met ons willen schalen.
                Marges, whitelabel-optie, technische onboarding — geregeld in een 4-weeks traject.
              </p>
              <ul>
                <li>Min. vlootomvang · 5 systemen</li>
                <li>Onboarding · 4 weken</li>
                <li>Marges · partner deck</li>
              </ul>
              <div className="foot">
                <div className="arrow">Partner intake →</div>
                <div className="sub">Distributie · groothandel</div>
              </div>
            </a>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="over-sec c-faq" id="faq" data-screen-label="06.05 FAQ">
        <div className="wrap">
          <div className="split">
            <aside className="left">
              <div className="ix"><span>Doc · FAQ</span><b>Rev 2026.05</b></div>
              <div className="sec-num" style={{marginBottom:"4px"}}><span className="ix">05</span><span className="nm">FAQ</span></div>
              <h2 className="h2" style={{margin:"0 0 8px",fontSize:"clamp(28px,3vw,40px)",maxWidth:"14ch"}}>Vragen die <span className="o">we vaak krijgen.</span></h2>
              <p>Geen brochure — een lijst. Filter per categorie of scroll door de hele tabel.</p>
              <div className="filter">
                {FAQ_CATS.map(c => (
                  <a key={c.key}
                     className={faqCat === c.key ? "active" : ""}
                     onClick={(e) => { e.preventDefault(); setFaqCat(c.key); }}
                     href="#"
                     style={{cursor:"pointer"}}>
                    <span>{c.label}</span><b>{String(catCount(c.key)).padStart(2,"0")}</b>
                  </a>
                ))}
              </div>
            </aside>
            <div className="right">
              <div className="head"><span>FAQ-tabel · {faqFiltered.length} {faqFiltered.length === 1 ? "entry" : "entries"} · gefilterd: {activeLabel}</span><b>Auto-update</b></div>
              {faqFiltered.length === 0 ? (
                <div className="qa" style={{gridTemplateColumns:"1fr",color:"var(--muted)",fontStyle:"italic"}}>
                  <div>Geen vragen in deze categorie.</div>
                </div>
              ) : faqFiltered.map(item => (
                <div className="qa" key={item.ix}>
                  <div className="ix">{item.ix}</div>
                  <div className="q">{item.q}</div>
                  <div className="a" dangerouslySetInnerHTML={{__html: item.a}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <Footer/>
    </div>
  );
};
