// How it works page — uitgebreide uitleg
function HowItWorks({ setPage }) {
  return (
    <div>
      {/* Hero */}
      <section className="how-hero">
        <div className="wrap">
          <div className="how-hero-grid">
            <div>
              <div className="eyebrow">Zo werkt het</div>
              <h1 className="display" style={{fontSize: "clamp(44px, 7vw, 100px)", margin: "20px 0 24px", letterSpacing: "-0.03em"}}>
                Van aanvraag tot <em style={{fontStyle: "normal", color: "var(--accent)"}}>rijden</em>.
              </h1>
              <p style={{fontSize: 18, color: "var(--fg-2)", maxWidth: "52ch", margin: "0 0 32px"}}>
                Een A2-terugvoering hoeft niet ingewikkeld. Hier leggen we precies uit hoe wij te werk gaan, welke regels de RDW hanteert, en wat jij kunt verwachten.
              </p>
              <div style={{display: "flex", gap: 12, flexWrap: "wrap"}}>
                <a className="btn btn-lg btn-accent" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20">Check mijn motor <Icon.arrow /></a>
                <a className="btn btn-lg" href="#proces">Lees de stappen</a>
              </div>
            </div>
            <div className="how-hero-photo">
              <img src="https://images.unsplash.com/photo-1604260324056-45f7c778754a?w=1200&q=80&fit=crop" alt="Motor in de werkplaats van A2 Motor" loading="lazy" />
              <div className="how-photo-tag"><span className="led" />In onze werkplaats</div>
            </div>
          </div>
        </div>
      </section>

      {/* Ticker */}
      <div className="ticker">
        <div className="track">
          {[..."RDW-erkend · Online omkeuring · TÜV-gekeurde kits uit Duitsland · Levenslange garantie · Vaste prijs vooraf · Altijd omkeerbaar".split(" · "),
            ..."RDW-erkend · Online omkeuring · TÜV-gekeurde kits uit Duitsland · Levenslange garantie · Vaste prijs vooraf · Altijd omkeerbaar".split(" · ")].map((t, i) => (
            <span key={i} style={{display: "inline-flex", alignItems: "center", gap: 16}}>
              {t} <span className="dot">●</span>
            </span>
          ))}
        </div>
      </div>

      {/* Process — detailed */}
      <section id="proces" className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Het proces</div>
              <h2>Vijf stappen.</h2>
            </div>
            <p>Van het moment dat je ons belt tot het moment dat je wegrijdt op je eigen motor met A2-papieren — dit gebeurt er stap voor stap.</p>
          </div>

          <div className="how-steps">
            <div className="how-step">
              <div className="how-step-media">
                <img src="https://images.unsplash.com/photo-1638289394195-64e572399560?w=900&q=80&fit=crop" alt="Motor klaar voor terugvoering" loading="lazy" />
              </div>
              <div className="how-step-body">
                <div className="how-step-num">01</div>
                <h3>Neem contact op</h3>
                <p>Stuur ons het kenteken van de motor (of de link van de advertentie als je er één op het oog hebt). Via WhatsApp, e-mail of telefoon — wat jij prettig vindt.</p>
                <dl className="how-step-facts">
                  <div><dt>Nodig</dt><dd>Kenteken of advertentie-link</dd></div>
                  <div><dt>Reactie</dt><dd>Meestal binnen 1 uur</dd></div>
                </dl>
              </div>
            </div>

            <div className="how-step reverse">
              <div className="how-step-media">
                <img src="https://images.unsplash.com/photo-1534755563369-ad37931ac77b?w=900&q=80&fit=crop" alt="Motor engine check" loading="lazy" />
              </div>
              <div className="how-step-body">
                <div className="how-step-num">02</div>
                <h3>Wij checken of het kan</h3>
                <p>We kijken naar de typegoedkeuring: valt de motor onder de 70 kW origineel vermogen? Mag het vermogen gehalveerd worden naar 35 kW? Is er een TÜV-kit voor dit model beschikbaar? Vaak kunnen we je binnen een paar uur antwoord geven.</p>
                <dl className="how-step-facts">
                  <div><dt>We checken</dt><dd>Vermogen · RDW-regels · TÜV-kit</dd></div>
                  <div><dt>Resultaat</dt><dd>Vaste offerte, géén verrassingen</dd></div>
                </dl>
              </div>
            </div>

            <div className="how-step">
              <div className="how-step-media">
                <img src="https://images.unsplash.com/photo-1604260324056-45f7c778754a?w=900&q=80&fit=crop" alt="Motor in de werkplaats" loading="lazy" />
              </div>
              <div className="how-step-body">
                <div className="how-step-num">03</div>
                <h3>Kit bestellen</h3>
                <p>Akkoord op de offerte? Dan bestellen wij de juiste terugvoer-kit in Duitsland. Deze kits hebben een TÜV-verklaring — daardoor kan de RDW de wijziging online goedkeuren, zónder dure vermogensbank-meting.</p>
                <dl className="how-step-facts">
                  <div><dt>Levertijd</dt><dd>± 3 werkdagen</dd></div>
                  <div><dt>Keuringsmethode</dt><dd>Online RDW-omkeuring</dd></div>
                </dl>
              </div>
            </div>

            <div className="how-step reverse">
              <div className="how-step-media">
                <img src="https://images.unsplash.com/photo-1636761358757-0a616eb9e17e?w=900&q=80&fit=crop" alt="Monteur aan het werk in de werkplaats" loading="lazy" />
              </div>
              <div className="how-step-body">
                <div className="how-step-num">04</div>
                <h3>Aanpassing in onze werkplaats</h3>
                <p>Je brengt de motor langs. Onze monteur plaatst de kit, test de motor uitgebreid op de weg en controleert alle systemen. Daarna verwerken we de papieren bij de RDW — dat regelen wij volledig.</p>
                <dl className="how-step-facts">
                  <div><dt>Doorlooptijd</dt><dd>Meestal 1 dag</dd></div>
                  <div><dt>Inbegrepen</dt><dd>RDW-wijziging op kenteken</dd></div>
                </dl>
              </div>
            </div>

            <div className="how-step">
              <div className="how-step-media">
                <img src="https://images.unsplash.com/photo-1588756681780-9d5859fc2ca0?w=900&q=80&fit=crop" alt="Motorrijder op de weg" loading="lazy" />
              </div>
              <div className="how-step-body">
                <div className="how-step-num">05</div>
                <h3>Rijden maar</h3>
                <p>Je haalt de motor op met nieuwe kentekenpapieren waarop 35 kW staat geregistreerd. Vanaf dat moment mag je met je A2-rijbewijs op de weg. Haal je later je A-rijbewijs? Dan draaien we de aanpassing net zo makkelijk weer terug.</p>
                <dl className="how-step-facts">
                  <div><dt>Papieren</dt><dd>Nieuwe kentekencard</dd></div>
                  <div><dt>Garantie</dt><dd>Levenslang op de ingreep</dd></div>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Regels */}
      <section className="section alt">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">De regels</div>
              <h2>Wat mag er wettelijk?</h2>
            </div>
            <p>Het A2-rijbewijs is een Europese rijbewijscategorie. De RDW houdt zich aan vier kern-regels. Kloppen ze voor jouw motor? Dan kunnen we terugvoeren.</p>
          </div>

          <div className="law-grid">
            <div className="law-card">
              <div className="law-card-num">01</div>
              <h3>Max 35 kW</h3>
              <p>Na terugvoering mag je motor maximaal 35 kW (≈ 47 pk) leveren. Dat is het wettelijk plafond voor het A2-rijbewijs.</p>
              <div className="law-bar"><div className="law-bar-fill" style={{width: "35%"}} /></div>
              <div className="law-bar-label"><span>0 kW</span><span>70 kW</span></div>
            </div>
            <div className="law-card">
              <div className="law-card-num">02</div>
              <h3>Max 70 kW origineel</h3>
              <p>De motor mag in zijn originele staat niet meer dan 70 kW (≈ 95 pk) hebben. Een BMW S1000RR met 150 kW valt dus af.</p>
              <div className="law-bar"><div className="law-bar-fill" style={{width: "100%"}} /></div>
              <div className="law-bar-label"><span>0 kW</span><span>70 kW max</span></div>
            </div>
            <div className="law-card">
              <div className="law-card-num">03</div>
              <h3>Max 50% reductie</h3>
              <p>Het eindvermogen mag niet minder zijn dan de helft van het origineel. Een motor van 80 kW kan dus niet naar 35 kW — die zou minimaal 40 kW moeten houden.</p>
              <div className="law-bar"><div className="law-bar-fill" style={{width: "50%"}} /></div>
              <div className="law-bar-label"><span>Nieuw</span><span>50% van origineel</span></div>
            </div>
            <div className="law-card">
              <div className="law-card-num">04</div>
              <h3>Power-to-weight ≤ 0,2 kW/kg</h3>
              <p>Het vermogen per kilo mag maximaal 0,2 kW/kg zijn. In de praktijk: een motor van 35 kW moet minstens 175 kg wegen. Bijna alle straatmotoren voldoen hieraan.</p>
              <div className="law-bar"><div className="law-bar-fill" style={{width: "40%"}} /></div>
              <div className="law-bar-label"><span>0,0 kW/kg</span><span>0,2 max</span></div>
            </div>
          </div>

          <div className="law-example">
            <div className="law-example-photo">
              <img src="https://images.unsplash.com/photo-1638289394195-64e572399560?w=900&q=80&fit=crop" alt="Yamaha MT-07" loading="lazy" />
            </div>
            <div className="law-example-body">
              <div className="eyebrow">Rekenvoorbeeld · Yamaha MT-07</div>
              <h3 style={{fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.02em", margin: "12px 0 20px", fontWeight: 600}}>
                Klopt dit? Laten we het uitrekenen.
              </h3>
              <ul className="law-example-list">
                <li><span className="check"><Icon.check /></span><div><strong>Origineel 54 kW</strong> — onder de 70 kW. <span className="ok">✓ mag</span></div></li>
                <li><span className="check"><Icon.check /></span><div><strong>Terug naar 35 kW</strong> — valt onder het A2-plafond. <span className="ok">✓ mag</span></div></li>
                <li><span className="check"><Icon.check /></span><div><strong>54 → 35 kW</strong> is 65% van origineel, dus méér dan de helft. <span className="ok">✓ mag</span></div></li>
                <li><span className="check"><Icon.check /></span><div><strong>35 kW / 184 kg = 0,19 kW/kg</strong> — net onder de 0,2. <span className="ok">✓ mag</span></div></li>
              </ul>
              <p style={{margin: "20px 0 0", color: "var(--fg-2)"}}>Conclusie: de MT-07 is volledig A2-geschikt. En precies daarom is dit de populairste terugvoering in Nederland.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Waarom wij anders zijn */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Waarom bij ons</div>
              <h2>Anders dan bij de dealer.</h2>
            </div>
            <p>Dealers gebruiken een vermogensbank — een fysieke test-opstelling die duur is en waarbij de aanpassing achteraf moeilijk terug te draaien is. Wij werken met TÜV-gekeurde kits. Dat scheelt geld én houdt je opties open.</p>
          </div>

          <div className="compare">
            <div className="compare-col">
              <div className="compare-head bad">
                <span className="eyebrow">Traditioneel bij dealer</span>
                <h3>Vermogensbank</h3>
              </div>
              <ul className="compare-list">
                <li><span className="compare-x">✕</span> Fysieke meting op een dure testbank</li>
                <li><span className="compare-x">✕</span> Vaak €1.200 – €1.800 exclusief</li>
                <li><span className="compare-x">✕</span> Lastig terug te draaien naar vol vermogen</li>
                <li><span className="compare-x">✕</span> Lange wachttijden bij gespecialiseerde bedrijven</li>
                <li><span className="compare-x">✕</span> Soms ingrepen aan ECU zonder certificaat</li>
              </ul>
            </div>
            <div className="compare-col active">
              <div className="compare-head good">
                <span className="eyebrow">Bij A2 Motor</span>
                <h3>TÜV-kit & online RDW</h3>
              </div>
              <ul className="compare-list">
                <li><span className="compare-check"><Icon.check /></span> TÜV-gekeurde kit uit Duitsland</li>
                <li><span className="compare-check"><Icon.check /></span> Online omkeuring bij de RDW, geen meting nodig</li>
                <li><span className="compare-check"><Icon.check /></span> Fors lagere prijs</li>
                <li><span className="compare-check"><Icon.check /></span> Altijd terug te draaien naar vol vermogen</li>
                <li><span className="compare-check"><Icon.check /></span> Levenslange garantie op de ingreep</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section alt">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Veelgestelde vragen</div>
              <h2>Nog vragen?</h2>
            </div>
            <p>Staat je vraag er niet bij? App ons — we reageren meestal binnen een uur.</p>
          </div>
          <HowFaq />
        </div>
      </section>

      {/* CTA */}
      <section className="cta">
        <div className="wrap cta-inner">
          <h2>Klaar om het <em>in gang</em> te zetten?</h2>
          <p>Stuur ons het kenteken of een link naar de advertentie. Binnen 24 uur weet je of jouw droommotor A2-geschikt is, en wat het kost.</p>
          <div className="cta-actions">
            <a className="btn btn-lg btn-accent" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20"><Icon.whatsapp /> App ons direct</a>
            <button className="btn btn-lg" onClick={() => setPage("about")}>Over ons</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.HowItWorks = HowItWorks;

function HowFaq() {
  const { useState: useS } = React;
  const [open, setOpen] = useS(0);
  const items = [
    { q: "Kan mijn huidige motor ook teruggevoerd worden?", a: "Grote kans van wel — 80% van de courante modellen kan. Stuur ons het kenteken via WhatsApp, dan checken we de typegoedkeuring en laten we je binnen een paar uur weten of het kan en wat het kost." },
    { q: "Wat als ik later mijn A-rijbewijs haal?", a: "Dan draaien we de aanpassing terug naar vol vermogen. Omdat we werken met verwijderbare TÜV-kits (en geen onomkeerbare ECU-ingrepen) is dat eenvoudig en relatief goedkoop." },
    { q: "Gaat de motor er minder lekker door rijden?", a: "Voor stadsverkeer en gewoon snelweg-gebruik merk je nauwelijks verschil. Topsnelheid en acceleratie boven de 100 km/u gaan natuurlijk iets omlaag — dat is onvermijdelijk bij 35 kW. Maar het karakter, geluid en rij-gevoel blijven hetzelfde." },
    { q: "Hoe zit het met de verzekering?", a: "De motor staat na terugvoering geregistreerd als A2-motor. Verzekeraars kijken naar het kenteken, dus je betaalt de premie die bij 35 kW hoort. In de meeste gevallen is dat aanzienlijk lager dan bij vol vermogen." },
    { q: "Hoelang duurt het hele proces?", a: "Vanaf je eerste bericht tot rijden: ongeveer 1 tot 2 weken. De levering van de kit neemt ± 3 werkdagen, het werk in onze werkplaats meestal 1 dag, en de RDW-verwerking gaat online binnen 1-2 dagen." },
    { q: "Wat gebeurt er als de RDW mijn terugvoering niet goedkeurt?", a: "Omdat we vooraf de typegoedkeuring en TÜV-kit checken, weten we zeker of het kan voor we beginnen. Mocht er ooit toch iets misgaan bij de RDW, dan lossen we het op onze kosten op. Geen financieel risico voor jou." },
    { q: "Kunnen jullie ook een motor voor mij zoeken?", a: "Ja, als je precies weet welke motor je wilt kunnen we je helpen er één te vinden en direct terug te voeren. Vertel ons wat je zoekt, dan kijken we met je mee." }
  ];
  return (
    <div className="faq">
      {items.map((f, i) => (
        <div key={i} className={"faq-item " + (open === i ? "open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-q">
            <h4>{f.q}</h4>
            <div className="faq-icon"><Icon.plus /></div>
          </div>
          <div className="faq-a">{f.a}</div>
        </div>
      ))}
    </div>
  );
}
window.HowFaq = HowFaq;