/* global React, Icon */
const { useState: useStateHome, useEffect: useEffectHome } = React;

const HERO_IMG = 'assets/evito-laden.jpg';
const INT_IMG = 'assets/evito-koeler-interieur.webp';

const TRUST_ITEMS = ['Geen investering nodig', 'Maandelijks opzegbaar', 'Onderhoud & verzekering inbegrepen'];

function TrustRotator() {
  const [i, setI] = useStateHome(0);
  useEffectHome(() => {
    const t = setInterval(() => setI((p) => (p + 1) % TRUST_ITEMS.length), 2600);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="hero__trust hero__trust--rotate" aria-live="polite">
      {TRUST_ITEMS.map((txt, idx) => (
        <span key={txt} className={'trust-rot' + (idx === i ? ' is-active' : '')} aria-hidden={idx !== i}>
          <Icon name="check" /> {txt}
        </span>
      ))}
    </div>
  );
}

/* ---------- HERO (3 variants) ---------- */
function HeroCopy({ go }) {
  return (
    <div className="hero__copy">
      <span className="eyebrow"><Icon name="leaf" style={{ width: 15, height: 15 }} /> 100% elektrisch · maandelijks opzegbaar</span>
      <h1>Elektrische bedrijfswagen nodig voor een klus in de stad?</h1>
      <p className="hero__sub">Flexibele elektrische bedrijfswagens voor ondernemers. Zonder investering, zonder langdurige contracten — vanaf €950 per maand, inclusief onderhoud en verzekering.</p>
      <div className="hero__cta">
        <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}><Icon name="calendar" /> Beschikbaarheid bekijken</button>
        <button className="btn btn--ghost btn--lg" onClick={() => go('reserve', 'top')}>Vraag een offerte aan <Icon name="arrow" /></button>
      </div>
      <p className="hero__zones"><Icon name="check" /> Jouw klus. Onze elektrische bus.</p>
    </div>
  );
}

function QuickSearch({ go }) {
  return (
    <form className="qsearch" onSubmit={(e) => { e.preventDefault(); go('reserve', 'top'); }}>
      <label className="qsearch__field">
        <span>Gewenste startdatum</span>
        <input type="date" defaultValue="2026-06-15" />
      </label>
      <label className="qsearch__field">
        <span>Looptijd</span>
        <select defaultValue="3">
          <option value="1">1 maand</option>
          <option value="3">3 maanden</option>
          <option value="6">6 maanden</option>
          <option value="12">12 maanden</option>
        </select>
      </label>
      <button className="btn btn--teal" type="submit"><Icon name="calendar" /> Check beschikbaarheid</button>
    </form>
  );
}

function Hero({ go, variant }) {
  if (variant === 'full') {
    return (
      <section className="hero hero--full" id="top">
        <div className="hero__bg"><img src={HERO_IMG} alt="Mercedes E-Vito elektrische bedrijfswagen aan de lader" /></div>
        <div className="container hero__inner">
          <HeroCopy go={go} />
        </div>
      </section>
    );
  }
  if (variant === 'search') {
    return (
      <section className="hero hero--search" id="top">
        <div className="container hero__inner">
          <div className="hero__copy" style={{ maxWidth: 760 }}>
            <span className="eyebrow"><Icon name="leaf" style={{ width: 15, height: 15 }} /> 100% elektrisch · maandelijks opzegbaar</span>
            <h1>Elektrische bedrijfswagen nodig voor een klus in de stad?</h1>
            <p className="hero__sub">Flexibele elektrische bedrijfswagens voor ondernemers. Vanaf €950 per maand, inclusief onderhoud en verzekering.</p>
            <QuickSearch go={go} />
          </div>
          <div className="hero__photo"><img src={HERO_IMG} alt="Mercedes E-Vito elektrische bedrijfswagen" /></div>
        </div>
      </section>
    );
  }
  /* split (default) */
  return (
    <section className="hero hero--split" id="top">
      <div className="container hero__inner">
        <HeroCopy go={go} />
        <div className="hero__media">
          <div className="hero__photo"><img src={HERO_IMG} alt="Mercedes E-Vito elektrische bedrijfswagen aan de lader" /></div>
          <div className="hero-badge hero-badge--tl">
            <span className="hero-badge__ic teal"><Icon name="shield" /></span>
            <span><b>All-in tarief</b><small>Onderhoud &amp; verzekering</small></span>
          </div>
          <div className="hero-badge hero-badge--br">
            <span className="hero-badge__ic amber"><Icon name="euro" /></span>
            <span><b>vanaf €950 / maand</b><small>Geen aanschaf · opzegbaar</small></span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- USP STRIP ---------- */
function UspStrip() {
  const items = [
    ['refresh', 'Maandelijks opzegbaar'],
    ['wrench', 'Inclusief onderhoud'],
    ['shield', 'Inclusief verzekering'],
    ['zap', 'Direct inzetbaar'],
  ];
  return (
    <div className="usp-strip">
      <div className="container usp-strip__inner">
        {items.map(([ic, txt]) => (
          <span className="usp" key={txt}><span className="usp__ic"><Icon name={ic} /></span> {txt}</span>
        ))}
      </div>
    </div>
  );
}

/* ---------- WHY ZEROGO (geen investering) ---------- */
function WhyZeroGo({ go }) {
  const voordelen = [
    ['euro', 'Geen aanschafkosten', 'Geen ton vastleggen in een wagen. Je betaalt een vast bedrag per maand.'],
    ['gauge', 'Geen afschrijving', 'Geen restwaarde-risico. Wij dragen het eigenaarschap, jij rijdt.'],
    ['wrench', 'Geen onderhoudszorgen', 'Service, banden, APK en pech — allemaal voor onze rekening.'],
    ['pin', 'Toegang tot emissiezones', 'Volledig elektrisch, dus zonder boetes of ontheffing elke binnenstad in.'],
    ['zap', 'Snel inzetbaar', 'Binnen enkele dagen geregeld. Geen leveringstijd van maanden.'],
  ];
  return (
    <section className="section" id="waarom">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="sparkle" style={{ width: 15, height: 15 }} /> Waarom ZeroGo</span>
          <h2>Een professionele elektrische bus, zonder te investeren</h2>
          <p>Je hoeft geen kapitaal vast te leggen in een elektrische bedrijfswagen. Bij ZeroGo beschik je direct over een professionele, volledig elektrische bus — met alles inbegrepen, maandelijks opzegbaar.</p>
        </div>
        <div className="why-grid">
          {voordelen.map(([ic, t, d]) => (
            <div className="why-card" key={t}>
              <div className="why-card__ic"><Icon name={ic} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 'clamp(28px,4vw,44px)' }}>
          <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}><Icon name="calendar" /> Beschikbaarheid bekijken</button>
        </div>
      </div>
    </section>
  );
}

/* ---------- VEHICLE ---------- */
function Vehicle({ go }) {
  const specs = [
    ['gauge', 'Actieradius', 'tot 350 km (WLTP)'],
    ['package', 'Laadvermogen', '6,0 m³ · tot 1.000 kg'],
    ['snow', 'Koelinstallatie', '0°C tot 8°C instelbaar'],
    ['idcard', 'Rijbewijs B', 'Geen C-rijbewijs nodig'],
    ['battery', 'Snelladen', '10–80% in ±45 min'],
    ['shield', 'All-in', 'Onderhoud &amp; verzekering'],
  ];
  return (
    <section className="section section--tint" id="voertuig">
      <div className="container vehicle">
        <div className="vehicle__gallery">
          <div className="main"><img src={INT_IMG} alt="Gekoelde laadruimte Mercedes E-Vito Koeler" loading="lazy" /></div>
          <div className="vehicle__thumb"><img src={HERO_IMG} alt="Mercedes E-Vito vooraanzicht" loading="lazy" /></div>
          <div className="vehicle__thumb" style={{ display: 'grid', placeItems: 'center', background: 'var(--teal-50)', color: 'var(--teal-700)', textAlign: 'center', padding: 16 }}>
            <div>
              <Icon name="snow" style={{ width: 30, height: 30 }} />
              <div style={{ fontFamily: 'var(--font-head)', fontWeight: 800, marginTop: 8, fontSize: 15 }}>Gekoeld<br />transport</div>
            </div>
          </div>
        </div>
        <div>
          <span className="eyebrow"><Icon name="truck" style={{ width: 15, height: 15 }} /> Onze specialiteit</span>
          <p className="vehicle__tag" style={{ marginTop: 16 }}>Mercedes E-Vito</p>
          <h2 className="vehicle__name">E-Vito Koeler</h2>
          <p style={{ color: 'var(--muted)', marginTop: 12, fontSize: 17 }}>Een volledig elektrische koelwagen die elke emissiezone in mag. Perfect voor versvervoer, medische logistiek en spoedleveringen.</p>
          <div className="spec-list">
            {specs.map(([ic, t, d]) => (
              <div className="spec" key={t}>
                <div className="spec__ic"><Icon name={ic} /></div>
                <div><b>{t}</b><small dangerouslySetInnerHTML={{ __html: d }} /></div>
              </div>
            ))}
          </div>
          <div className="price-row">
            <span className="from">vanaf</span>
            <span className="amt">€950</span>
            <span className="per">per maand · all-in · maandelijks opzegbaar</span>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}><Icon name="calendar" /> Bekijk beschikbaarheid</button>
            <button className="btn btn--ghost btn--lg" onClick={() => go('fleet', 'top')}>Bekijk de hele vloot <Icon name="arrow" /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- STEPS (4-staps tijdlijn) ---------- */
function Steps({ go }) {
  const s = [
    ['Kies je bus', 'Selecteer de E-Vito Koeler en je gewenste looptijd. Je ziet direct beschikbaarheid en maandtarief.'],
    ['Rij direct elektrisch', 'Wij leveren de wagen volgeladen en rijklaar — verzekerd en onderhouden. Ophalen of laten bezorgen.'],
    ['Voer je klus uit', 'Emissievrij de stad in, zonder boetes of ontheffing. Pech of schade? Wij regelen het.'],
    ['Lever in of verleng', 'Klaar met de klus? Lever in. Nog langer nodig? Verleng met één klik. Maandelijks opzegbaar.'],
  ];
  return (
    <section className="section" id="hoe">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="route" style={{ width: 15, height: 15 }} /> Waarom ondernemers kiezen voor ZeroGo</span>
          <h2>Van keuze tot inleveren in vier stappen</h2>
        </div>
        <div className="steps steps--4">
          {s.map(([t, d]) => (
            <div className="step" key={t}>
              <div className="step__n" /><div className="step__line" />
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}><Icon name="calendar" /> Start vandaag</button>
        </div>
      </div>
    </section>
  );
}

/* ---------- ONZE KRACHT (alles in eigen huis) ---------- */
function Kracht() {
  const k = [
    ['wrench', 'Eigen werkplaats', 'Service en APK in eigen beheer. Sneller terug op de weg.'],
    ['shield', 'Eigen schadeherstel', 'Schade? Direct intern opgelost, geen wachtrij bij externe partners.'],
    ['brief', 'Eigen verzekeringsoplossingen', 'Dekking in eigen huis geregeld — geen los gedoe met polissen.'],
  ];
  return (
    <section className="section section--deep" id="kracht">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="sparkle" style={{ width: 15, height: 15 }} /> Onze kracht</span>
          <h2>Alles in eigen huis geregeld</h2>
          <p>Werkplaats, schadeherstel en verzekering: wij doen het zelf. Daardoor helpen we je sneller en heb jij minder stilstand.</p>
        </div>
        <div className="kracht-grid">
          {k.map(([ic, t, d]) => (
            <div className="kracht-card" key={t}>
              <div className="kracht-card__ic"><Icon name={ic} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- ZONES ---------- */
const CITIES = [
  { name: 'Amsterdam', lon: 4.90, lat: 52.37 },
  { name: 'Utrecht', lon: 5.12, lat: 52.09, pulse: true },
  { name: 'Den Haag', lon: 4.30, lat: 52.08, anchor: 'end' },
  { name: 'Rotterdam', lon: 4.48, lat: 51.92, anchor: 'end' },
  { name: 'Arnhem', lon: 5.91, lat: 51.98 },
  { name: 'Tilburg', lon: 5.09, lat: 51.56, anchor: 'end' },
  { name: 'Eindhoven', lon: 5.48, lat: 51.44 },
  { name: 'Groningen', lon: 6.57, lat: 53.22, anchor: 'end' },
  { name: 'Maastricht', lon: 5.69, lat: 50.85 },
];

/* regels per stad — zero-emissiezones stadslogistiek */
const ZONE_RULES = [
  'Geldt voor bestel- en vrachtauto\u2019s — niet voor personenauto\u2019s',
  'Nieuwe fossiele bedrijfswagens (kenteken vanaf 2025) mogen er niet in',
  'Overgangsregeling: Euro 5 tot 2027 · Euro 6 tot 2028',
  'Boete: €130 (bestelauto) · €320 (vrachtauto)',
];
const ZONE_INFO = {
  Amsterdam:  { sinds: '1 jan 2025', gebied: 'Vrijwel het hele gebied binnen de A10', extra: 'Daarnaast milieuzone voor oudere diesels' },
  Utrecht:    { sinds: '1 jan 2025', gebied: 'Binnenstad en omliggende wijken', extra: 'Daarnaast milieuzone voor dieselpersonenauto\u2019s' },
  'Den Haag': { sinds: '1 jan 2025', gebied: 'Centrum · sinds 2026 ook het kustgebied', extra: 'Daarnaast milieuzone voor oudere diesels' },
  Rotterdam:  { sinds: '1 jan 2025', gebied: 'Groot deel van de binnenstad' },
  Arnhem:     { sinds: '1 jun 2026', gebied: 'Binnenstad', extra: 'Milieuzone voor dieselpersonenauto\u2019s blijft bestaan' },
  Tilburg:    { sinds: '1 jan 2025', gebied: 'Binnenstad' },
  Eindhoven:  { sinds: '1 jan 2025', gebied: 'Centrum en omliggende wijken' },
  Groningen:  { sinds: '1 jan 2025', gebied: 'Binnenstad' },
  Maastricht: { sinds: '1 jan 2025', gebied: 'Binnenstad' },
};

/* Nederland — gedetailleerd silhouet, lon/lat geprojecteerd */
const NL_OUTLINE = [
  [4.73, 52.96], [5.06, 52.92], [5.33, 53.06], [5.42, 53.17], [5.60, 53.30], [5.90, 53.39],
  [6.20, 53.40], [6.50, 53.43], [6.83, 53.46], [6.97, 53.32], [7.10, 53.30], [7.21, 53.18],
  [7.05, 52.86], [6.98, 52.64], [7.07, 52.39], [7.02, 52.29], [6.93, 52.18], [6.76, 52.12],
  [6.83, 51.97], [6.72, 51.90], [6.41, 51.83], [6.30, 51.85], [6.10, 51.85],
  [6.12, 51.66], [6.22, 51.51], [6.23, 51.37], [6.08, 51.17], [6.02, 51.06], [5.96, 50.98],
  [6.09, 50.90], [6.02, 50.80], [6.01, 50.75], [5.69, 50.76], [5.65, 50.82], [5.76, 51.03],
  [5.80, 51.09], [5.56, 51.22], [5.24, 51.26], [5.16, 51.31], [4.93, 51.43], [4.78, 51.43],
  [4.53, 51.43], [4.39, 51.36], [4.24, 51.37], [3.97, 51.21], [3.79, 51.21], [3.52, 51.24],
  [3.38, 51.27], [3.36, 51.37], [3.44, 51.49], [3.44, 51.53], [3.60, 51.59], [3.69, 51.69],
  [3.86, 51.74], [3.97, 51.85], [4.05, 51.92], [4.12, 51.98], [4.27, 52.10], [4.39, 52.20],
  [4.53, 52.37], [4.57, 52.46], [4.62, 52.62], [4.66, 52.77], [4.70, 52.85],
];
/* IJsselmeer + Markermeer — binnenwater als uitsparing */
const NL_LAKE = [
  [5.06, 52.92], [5.33, 53.06], [5.40, 53.04], [5.43, 52.97], [5.36, 52.88], [5.70, 52.85],
  [5.58, 52.74], [5.60, 52.66], [5.62, 52.60], [5.45, 52.53], [5.25, 52.40], [5.07, 52.34],
  [5.01, 52.41], [5.11, 52.46], [5.07, 52.50], [5.06, 52.64], [5.29, 52.70], [5.10, 52.77],
  [5.08, 52.88],
];
/* Waddeneilanden */
const NL_ISLES = [
  [[4.71, 53.00], [4.78, 53.03], [4.90, 53.17], [4.83, 53.18], [4.73, 53.07]],
  [[4.88, 53.23], [5.07, 53.30], [5.03, 53.32], [4.91, 53.27]],
  [[5.17, 53.35], [5.50, 53.44], [5.45, 53.46], [5.20, 53.39]],
  [[5.62, 53.44], [5.93, 53.46], [5.90, 53.49], [5.65, 53.47]],
  [[6.13, 53.47], [6.32, 53.49], [6.28, 53.51], [6.15, 53.50]],
];
const VB_W = 290, VB_H = 342;
const LON0 = 3.30, LON1 = 7.25, LAT0 = 50.70, LAT1 = 53.55;
const px = (lon) => ((lon - LON0) / (LON1 - LON0)) * VB_W;
const py = (lat) => ((LAT1 - lat) / (LAT1 - LAT0)) * VB_H;
const toPath = (pts) => pts.map((p, i) => `${i ? 'L' : 'M'}${px(p[0]).toFixed(1)} ${py(p[1]).toFixed(1)}`).join(' ') + ' Z';

/* dot-matrix vulling: raster binnen het silhouet, buiten het water */
const pxPoly = (pts) => pts.map((p) => [px(p[0]), py(p[1])]);
function inPoly(x, y, poly) {
  let inside = false;
  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
    const [xi, yi] = poly[i], [xj, yj] = poly[j];
    if ((yi > y) !== (yj > y) && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;
  }
  return inside;
}
const MAP_DOTS = (() => {
  const main = pxPoly(NL_OUTLINE), lake = pxPoly(NL_LAKE), isles = NL_ISLES.map(pxPoly);
  const dots = [], step = 5.4;
  for (let row = 0, y = 4; y < VB_H; y += step, row++) {
    const off = row % 2 ? step / 2 : 0;
    for (let x = 4 + off; x < VB_W; x += step) {
      if ((inPoly(x, y, main) && !inPoly(x, y, lake)) || isles.some((p) => inPoly(x, y, p))) {
        dots.push([+x.toFixed(1), +y.toFixed(1), 0.22 + (((x * 7 + y * 13) | 0) % 9) * 0.030]);
      }
    }
  }
  return dots;
})();

function NlMap({ selected, onSelect }) {
  return (
    <svg className="nl-map" viewBox={`0 0 ${VB_W} ${VB_H}`} role="img" aria-label="Kaart van Nederland met emissiezones">
      <path className="nl-map__outline" d={toPath(NL_OUTLINE)} />
      {NL_ISLES.map((p, i) => <path key={i} className="nl-map__isle" d={toPath(p)} />)}
      <g className="nl-map__dots">
        {MAP_DOTS.map(([x, y, o], i) => <circle key={i} cx={x} cy={y} r="1.55" opacity={o} />)}
      </g>
      {CITIES.map((c) => {
        const x = px(c.lon), y = py(c.lat);
        const end = c.anchor === 'end';
        const sel = selected === c.name;
        return (
          <g key={c.name} className={'nl-pin' + (sel ? ' sel' : '') + (c.pulse && !selected ? ' pulse' : '')}
            role="button" tabIndex="0" aria-label={`Regels emissiezone ${c.name}`}
            onClick={() => onSelect(sel ? null : c.name)}
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(sel ? null : c.name); } }}>
            <circle className="nl-pin__hit" cx={x} cy={y} r="11" />
            {(sel || (c.pulse && !selected)) && <circle className="nl-pin__halo" cx={x} cy={y} r="6" />}
            <circle className="nl-pin__dot" cx={x} cy={y} r={sel ? 4.6 : 3.4} />
            <text className="nl-pin__lbl" x={end ? x - 9 : x + 9} y={y + 3.4} textAnchor={end ? 'end' : 'start'}>{c.name}</text>
          </g>
        );
      })}
    </svg>
  );
}

function ZonePopup({ city, onClose }) {
  const info = ZONE_INFO[city];
  if (!info) return null;
  return (
    <div className="zone-pop" role="dialog" aria-label={'Regels emissiezone ' + city}>
      <button className="zone-pop__close" onClick={onClose} aria-label="Sluiten"><Icon name="x" /></button>
      <div className="zone-pop__head">
        <b>{city}</b>
        <span className="zone-pop__badge"><Icon name="leaf" /> Zero-emissiezone</span>
      </div>
      <div className="zone-pop__meta">
        <span><Icon name="calendar" /> Sinds {info.sinds}</span>
        <span><Icon name="pin" /> {info.gebied}</span>
      </div>
      <ul className="zone-pop__rules">
        {ZONE_RULES.map((r) => <li key={r}><Icon name="check" /> {r}</li>)}
        {info.extra ? <li className="extra"><Icon name="plus" /> {info.extra}</li> : null}
      </ul>
      <p className="zone-pop__zerogo"><Icon name="zap" /> Met een ZeroGo e-bus rij je hier altijd in — zonder ontheffing.</p>
    </div>
  );
}

function Zones() {
  const [sel, setSel] = useStateHome(null);
  return (
    <section className="section section--tint" id="zones">
      <div className="container zones">
        <div>
          <span className="eyebrow"><Icon name="pin" style={{ width: 15, height: 15 }} /> Emissiezones</span>
          <h2 style={{ fontSize: 'clamp(28px,4vw,42px)', marginTop: 16 }}>Steeds meer steden worden emissievrij</h2>
          <p style={{ color: 'var(--muted)', marginTop: 14, fontSize: 18 }}>Steeds meer Nederlandse steden voeren zero-emissiezones in. Met ZeroGo ben je direct klaar voor opdrachten in emissiezones — zonder grote investeringen, boetes of ontheffingen.</p>
          <div className="zone-chips">
            {CITIES.map((c) => (
              <button type="button" className={'zone-chip' + (sel === c.name ? ' active' : '')} key={c.name}
                onClick={() => setSel(sel === c.name ? null : c.name)} aria-pressed={sel === c.name}>
                <Icon name="check" /> {c.name}
              </button>
            ))}
          </div>
          <p style={{ marginTop: 18, color: 'var(--muted-2)', fontSize: 14 }}>Klik op een stad voor het zonetype en de regels.</p>
        </div>
        <div className="map-card">
          <NlMap selected={sel} onSelect={setSel} />
          <span className="map-card__note">Zero-emissiezones · 2026</span>
          {sel ? <ZonePopup city={sel} onClose={() => setSel(null)} /> : null}
        </div>
      </div>
    </section>
  );
}

/* ---------- REVIEWS ---------- */
function Reviews() {
  const r = [
    ['Een vaste maandprijs en geen omkijken naar onderhoud. Toen we extra capaciteit nodig hadden was het binnen een week geregeld.', 'Sander de Vries', 'Versgroothandel · Utrecht', 'S'],
    ['Geen investering, gewoon elke maand een schone elektrische bus voor de deur. Schade laatst? Binnen twee dagen opgelost in hun eigen werkplaats.', 'Meryem Yıldız', 'Installatiebedrijf · Amsterdam', 'M'],
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head center">
          <div className="stars" style={{ justifyContent: 'center' }}>
            {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" />)}
          </div>
          <h2 style={{ marginTop: 14 }}>Vakmensen rekenen op ons</h2>
        </div>
        <div className="reviews">
          {r.map(([q, who, role, av]) => (
            <div className="review" key={who}>
              <div className="stars">{[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" />)}</div>
              <p>“{q}”</p>
              <div className="review__who">
                <span className="review__av">{av}</span>
                <span><b>{who}</b><small>{role}</small></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function Faq() {
  const [open, setOpen] = useStateHome(0);
  const qa = [
    ['Wat kost het en wat zit erbij in?', 'De E-Vito Koeler rijd je vanaf €950 per maand; voor de overige voertuigen uit onze vloot ontvang je een maatwerktarief. Onderhoud, APK, banden, pechhulp en verzekering zitten altijd standaard in het maandtarief — zonder verrassingen achteraf.'],
    ['Hoe flexibel is het contract?', 'Volledig flexibel: je huurt per maand en zegt maandelijks op. Geen langlopende leasecontracten van vier jaar. Langer nodig? Je verlengt eenvoudig per maand.'],
    ['Hoe zit het met onderhoud en pech?', 'Daar heb je geen omkijken naar. Wij regelen service, APK en banden in onze eigen werkplaats. Schade of pech onderweg? Ook dat lossen we intern op, zodat je snel weer rijdt.'],
    ['Mag ik echt elke emissiezone in?', 'Ja. Onze hele vloot is volledig elektrisch en valt in de schoonste categorie. Je rijdt zonder ontheffing of boetes alle Nederlandse zero-emissiezones in.'],
    ['Heb ik een speciaal rijbewijs nodig?', 'Nee. Al onze bussen rijd je met een gewoon rijbewijs B. Een C-rijbewijs is niet nodig.'],
  ];
  return (
    <section className="section section--tint" id="faq">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="chat" style={{ width: 15, height: 15 }} /> Veelgestelde vragen</span>
          <h2>Nog even iets uitzoeken?</h2>
        </div>
        <div className="faq">
          {qa.map(([q, a], i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={q}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q}<span className="faq-q__ic"><Icon name="plus" /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 240 : 0 }}>
                <div className="faq-a__inner">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA BANNER ---------- */
function CtaBanner({ go }) {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="cta-banner">
          <div className="cta-banner__inner">
            <div>
              <h2>Jouw klus. Onze elektrische bus.</h2>
              <p>Start vandaag nog met elektrisch rijden. Geen investering, maandelijks opzegbaar.</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}><Icon name="calendar" /> Beschikbaarheid bekijken</button>
              <button className="btn btn--light btn--lg" onClick={() => go('reserve', 'top')}>Offerte aanvragen</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- HOME ---------- */
function Home({ go, heroVariant }) {
  return (
    <main>
      <Hero go={go} variant={heroVariant} />
      <UspStrip />
      <Zones />
      <WhyZeroGo go={go} />
      <Vehicle go={go} />
      <Steps go={go} />
      <Kracht />
      <Reviews />
      <Faq />
      <CtaBanner go={go} />
    </main>
  );
}

window.Home = Home;