// Page sections
const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

function Hero({ variant = "bike", setPage }) {
  const hero = window.BIKES[0]; // MT-07

  // Story variant
  if (variant === "story") {
    return (
      <section className="hero">
        <div className="hero-band">
          <div className="wrap">
            <div className="hero-band-tag">A2-terugvoering specialist · Voorthuizen · sinds 2024</div>
            <h1 className="hero-band-title">Jouw droommotor.<br/><span style={{opacity:.85}}>Nu op A2.</span></h1>
          </div>
        </div>
        <div className="hero-body-wrap">
          <div className="wrap">
            <p className="hero-sub" style={{maxWidth:"60ch",marginBottom:32}}>Wij voeren motoren terug naar 35 kW — zodat jij op je A2-rijbewijs rijdt wat je écht wil. Geen dure vermogensbank, geen onomkeerbare ingreep.</p>
            <div className="hero-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">Check mijn motor <Icon.arrow /></a>
              <a className="btn btn-lg btn-primary" 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</a>
            </div>
            <div className="hero-story-vis" style={{marginTop:40,position:"relative",overflow:"hidden"}}>
              <img src="https://images.unsplash.com/photo-1722720251730-3f5df2030e2c?w=1600&q=85&fit=crop" alt="Motor in werkplaats" style={{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",objectPosition:"center 60%"}} loading="eager" />
              <div className="hero-vis-tag" style={{zIndex:2}}><span className="led"/>RDW goedgekeurd · 35 kW</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Split variant
  if (variant === "split") {
    return (
      <section className="hero hero-split">
        <div className="hero-band">
          <div className="wrap">
            <div className="hero-band-tag">Case · Yamaha MT-07 · 2023</div>
            <h1 className="hero-band-title">Yamaha MT-07.<br/><span style={{opacity:.85}}>Op A2.</span></h1>
          </div>
        </div>
        <div className="hero-body-wrap">
          <div className="wrap">
            <div className="hero-grid">
              <div>
                <p className="hero-sub">De populairste naked van NL — teruggevoerd naar 35 kW. RDW-goedgekeurd, levenslange garantie.</p>
                <div className="hero-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">Check mijn motor <Icon.arrow /></a>
                  <button className="btn btn-lg btn-primary" onClick={() => setPage("about")}>Over ons</button>
                </div>
                <dl className="hero-meta">
                  <div><dt>Na terugvoering</dt><dd>35 kW</dd></div>
                  <div><dt>Van origineel</dt><dd>54 kW</dd></div>
                  <div><dt>Klaar binnen</dt><dd>5 dagen</dd></div>
                </dl>
              </div>
              <BikeHeroVis bike={hero} />
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Default "bike" variant — Cinematic Full Screen
  const WA = "https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20";
  return (
    <section className="hero-full">
      {/* Cinematic background */}
      <div className="hero-full-bg">
        <img
          src="/header.svg"
          alt="Motor op snelweg — A2-terugvoering specialist A2 Motor in Voorthuizen"
          loading="eager"
          fetchpriority="high"
        />
        <div className="hero-full-overlay" />
        <div className="hero-full-grain" />
      </div>

      {/* Main content — anchored bottom-left */}
      <div className="hero-full-body">
        <div className="wrap">
          <div className="hero-full-eyebrow hf-s1">
            <span className="hero-full-dot" />
            A2-terugvoering specialist · Voorthuizen · heel Nederland
          </div>
          <h1 className="hero-full-title">
            <span className="hft-line hf-s2">Jouw</span>
            <span className="hft-line hf-s3">droommotor.</span>
            <span className="hft-line hft-green hf-s4">Nu op A2.</span>
          </h1>
          <div className="hero-full-rule hf-s5" />
          <p className="hero-full-sub hf-s6">
            Motor begrenzen naar 35 kW — officieel en omkeerbaar.<br/>
            TÜV-kit · RDW-keuring · kentekenwijziging inbegrepen.
          </p>
          <div className="hero-full-actions hf-s7">
            <a className="btn btn-lg btn-accent" href={WA}>Check mijn motor <Icon.arrow /></a>
            <a className="btn btn-lg hero-full-ghost" href={WA}><Icon.whatsapp /> App ons</a>
          </div>
        </div>
      </div>

      {/* Stats strip */}
      <div className="hero-full-stats hf-s8">
        <div className="wrap">
          <div className="hero-full-stats-row">
            <div className="hfs-item"><span className="hfs-val">€395</span><span className="hfs-label">Vanaf</span></div>
            <div className="hfs-sep" />
            <div className="hfs-item"><span className="hfs-val">5</span><span className="hfs-label">Werkdagen</span></div>
            <div className="hfs-sep" />
            <div className="hfs-item"><span className="hfs-val">RDW</span><span className="hfs-label">Officieel gekeurd</span></div>
            <div className="hfs-sep" />
            <div className="hfs-item"><span className="hfs-val">∞</span><span className="hfs-label">Garantie</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;

function BikeHeroVis({ bike }) {
  return (
    <div className="hero-vis" style={{maxWidth:"520px",width:"100%",justifySelf:"end"}}>
      <div className="hero-vis-tag"><span className="led" />Case · {bike.brand} {bike.model} · {bike.year}</div>
      <div className="hero-vis-price">{bike.powerOriginal} → 35 kW</div>
      <div className="hero-vis-inner">
        <img
          src="https://images.unsplash.com/photo-1722720251730-3f5df2030e2c?w=1200&q=85&fit=crop"
          alt={`${bike.brand} ${bike.model}`}
          style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center"}}
          loading="eager"
        />
      </div>
      <dl className="hero-vis-specs">
        <div><dt>Vermogen</dt><dd>35<span className="u">kW</span></dd></div>
        <div><dt>Koppel</dt><dd>{bike.torque}<span className="u">Nm</span></dd></div>
        <div><dt>Gewicht</dt><dd>{bike.weight}<span className="u">kg</span></dd></div>
        <div><dt>Zithoogte</dt><dd>{bike.seat}<span className="u">mm</span></dd></div>
      </dl>
    </div>
  );
}
window.BikeHeroVis = BikeHeroVis;

function Process() {
  const steps = [
    { num: "01", title: "Stuur je kenteken", desc: "Via WhatsApp of het contactformulier. Wij checken of je motor A2-geschikt is.", time: "Eerste contact" },
    { num: "02", title: "Vaste offerte", desc: "Binnen 24 uur een transparante, vaste prijs — geen verrassingen achteraf.", time: "Binnen 24 uur" },
    { num: "03", title: "Aanpassing + RDW", desc: "Wij bouwen de TÜV-kit in, regelen de RDW-keuring en verwerken de kentekenwijziging.", time: "3 — 5 werkdagen" },
    { num: "04", title: "Rijden maar", desc: "Je haalt je motor op met nieuwe kentekenpapieren en levenslange garantie op de aanpassing.", time: "Pak je helm" }
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Zo werkt het</div>
            <h2>Vier stappen naar A2-papieren.</h2>
          </div>
          <p>Geen RDW-formulieren invullen, geen dure vermogensbank, geen gedoe. Wij doen alles — van de TÜV-kit tot de kentekenwijziging. Jij brengt je motor langs en rijdt hem weg op A2-papieren.</p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div key={s.num} className="step">
              <div className="step-bg-num">{s.num}</div>
              <div className="step-num">{s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <div className="step-time">{s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;

function FeaturedBikes({ setPage, setSelectedBike, layout = "grid" }) {
  const featured = window.BIKES.slice(0, 6);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Populaire modellen</div>
            <h2>Welke motor rijd jij straks?</h2>
          </div>
          <p>Deze modellen voeren we het vaakst terug naar A2. Herken je jouw droommotor hiertussen? Stuur ons het kenteken of de link — wij rekenen uit wat er mogelijk is.</p>
        </div>
        <div className={`bikes ${layout}`}>
          {featured.map(b => (
            <BikeCard key={b.id} bike={b} layout={layout} onClick={() => { setSelectedBike(b); setPage("detail"); }} />
          ))}
        </div>
        <div style={{marginTop: 40, display: "flex", justifyContent: "center"}}>
          <button className="btn btn-lg" onClick={() => setPage("catalog")}>Bekijk alle modellen <Icon.arrow /></button>
        </div>
      </div>
    </section>
  );
}
window.FeaturedBikes = FeaturedBikes;

function BikeCard({ bike, onClick, layout = "grid" }) {
  if (layout === "list") {
    return (
      <div className="bike" onClick={onClick}>
        <BikeThumb bike={bike} />
        <div className="bike-main">
          <div>
            <div className="brand">{bike.brand} · {bike.category}</div>
            <h3>{bike.model}</h3>
          </div>
          <dl className="bike-specs" style={{border: 0, padding: 0}}>
            <div><dt>Origineel</dt><dd>{bike.powerOriginal} kW</dd></div>
            <div><dt>Na A2</dt><dd>35 kW</dd></div>
            <div><dt>Zithoogte</dt><dd>{bike.seat} mm</dd></div>
          </dl>
          <div style={{textAlign: "right"}}>
            <button className="btn btn-sm">Bekijk case <Icon.arrow /></button>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="bike" onClick={onClick}>
      <BikeThumb bike={bike} />
      <div className="bike-head">
        <div>
          <div className="brand">{bike.brand} · {bike.category}</div>
          <h3>{bike.model}</h3>
        </div>
      </div>
      <dl className="bike-specs">
        <div><dt>Origineel</dt><dd>{bike.powerOriginal} kW</dd></div>
        <div><dt>Na A2</dt><dd>35 kW</dd></div>
        <div><dt>Koppel</dt><dd>{bike.torque} Nm</dd></div>
      </dl>
      <div className="bike-cta">
        <div className="bike-price" style={{fontSize: 13, fontFamily: "var(--font-mono)", letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)"}}>
          A2-geschikt ✓
        </div>
        <div className="bike-arrow"><Icon.arrowSmall /></div>
      </div>
    </div>
  );
}
window.BikeCard = BikeCard;

function PhotoBand() {
  return (
    <div style={{position:"relative",height:"340px",overflow:"hidden"}}>
      <img
        src="https://images.unsplash.com/photo-1636761358757-0a616eb9e17e?w=1600&q=80&fit=crop&crop=center"
        alt="Monteur werkt aan motor in de werkplaats"
        style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center 40%",display:"block"}}
        loading="lazy"
      />
      <div style={{position:"absolute",inset:0,background:"linear-gradient(to right,rgba(15,14,12,.7) 0%,rgba(15,14,12,.2) 60%,transparent 100%)",display:"flex",alignItems:"center"}}>
        <div className="wrap">
          <div style={{color:"rgba(255,255,255,0.5)",fontSize:11,letterSpacing:".18em",textTransform:"uppercase",marginBottom:10,fontFamily:"var(--font-mono)"}}>In onze werkplaats · Voorthuizen</div>
          <div style={{color:"#fff",fontFamily:"var(--font-display)",fontWeight:800,fontSize:"clamp(22px,3.5vw,40px)",lineHeight:1.1,maxWidth:"14ch"}}>Geen vermogensbank. Gewoon TÜV-kits.</div>
        </div>
      </div>
    </div>
  );
}
window.PhotoBand = PhotoBand;

function Rules() {
  const [visible, setVisible] = useStateS(false);
  useEffectS(() => {
    const t = setTimeout(() => setVisible(true), 200);
    return () => clearTimeout(t);
  }, []);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">A2-regels in het kort</div>
            <h2>Wat mag wel, en wat niet?</h2>
          </div>
          <p>Een A2-rijbewijs heeft twee regels. Snap die twee regels en je weet meteen welke motoren in aanmerking komen — wij doen de rest.</p>
        </div>
        <div className="rules-grid">
          <div className="rule-bars">
            <div className="rule-bar">
              <div className="rule-bar-head">
                <span className="label">Max vermogen A2</span>
                <span className="value">35 <span className="u">kW</span></span>
              </div>
              <div className="rule-bar-track">
                <div className="rule-bar-fill" style={{width: visible ? "35%" : "0%"}} />
              </div>
              <p className="rule-bar-note">Oftewel ± 47 pk. Dat is het wettelijk plafond voor A2.</p>
            </div>
            <div className="rule-bar">
              <div className="rule-bar-head">
                <span className="label">Max origineel vermogen</span>
                <span className="value">70 <span className="u">kW</span></span>
              </div>
              <div className="rule-bar-track">
                <div className="rule-bar-fill" style={{width: visible ? "70%" : "0%"}} />
              </div>
              <p className="rule-bar-note">Een motor mag maximaal 70 kW (95 pk) zijn vóór terugvoering.</p>
            </div>
            <div className="rule-bar">
              <div className="rule-bar-head">
                <span className="label">Verhouding na terugvoering</span>
                <span className="value">50 <span className="u">% max</span></span>
              </div>
              <div className="rule-bar-track">
                <div className="rule-bar-fill" style={{width: visible ? "50%" : "0%"}} />
              </div>
              <p className="rule-bar-note">Het eindvermogen mag nooit minder zijn dan de helft van origineel.</p>
            </div>
          </div>
          <div className="rules-copy">
            <h3>Voorbeeld: Yamaha MT-07</h3>
            <p className="muted">Origineel 54 kW → begrenzen naar 35 kW. 54 kW valt onder 70 kW ✓. 35 kW is meer dan 27 kW (de helft) ✓. Deze motor is A2-geschikt.</p>
            <ul>
              <li><span className="num">01</span><span>Originele vermogen moet ≤ 70 kW zijn</span></li>
              <li><span className="num">02</span><span>Nieuw vermogen moet ≤ 35 kW zijn</span></li>
              <li><span className="num">03</span><span>Terugvoering mag nooit méér dan halveren</span></li>
              <li><span className="num">04</span><span>Wijziging moet op kenteken staan (RDW)</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Rules = Rules;

function Quotes() {
  return (
    <section className="section ink">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Klanten</div>
            <h2 style={{color:"#fff"}}>Wat rijders zeggen.</h2>
          </div>
          <p className="muted">We zijn er om jou op je motor te krijgen. Eerlijk advies, geen onzin.</p>
        </div>
        <div className="quotes">
          {window.QUOTES.map((q, i) => (
            <div key={i} className="quote">
              <div className="quote-mark">"</div>
              <div className="quote-stars">{"★".repeat(q.stars)}</div>
              <p>{q.q}</p>
              <div className="quote-who">
                <div className="quote-avatar">{q.name[0]}</div>
                <div>
                  <div className="quote-name">{q.name}</div>
                  <div className="quote-bike">{q.bike}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Quotes = Quotes;

function Faq() {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2>Antwoorden.</h2>
          </div>
          <p>Mis je iets? App ons gewoon — we reageren meestal binnen een uur.</p>
        </div>
        <div className="faq">
          {window.FAQS.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>
      </div>
    </section>
  );
}
window.Faq = Faq;

function ExpertiseBlock() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(24px,4vw,64px)", alignItems: "center" }}>
          <div>
            <div className="eyebrow">Wie zijn wij</div>
            <h2 style={{ marginBottom: 16 }}>De enige dedicated A2-terugvoering specialist van Nederland.</h2>
            <p style={{ color: "var(--fg-2)", lineHeight: 1.7, marginBottom: 16 }}>
              A2 Motor is opgericht door Marijn la Roi — motorrijder en monteur met meer dan zeven jaar praktijkervaring. Wij doen uitsluitend A2-terugvoeringen en vermogensherstel. Geen APK, geen banden, geen servicebeurt. Alleen dit.
            </p>
            <p style={{ color: "var(--fg-2)", lineHeight: 1.7, marginBottom: 0 }}>
              Door ons te specialiseren weten wij precies welke TÜV-kit bij welk model hoort, hoe de RDW-omkeuring snel verloopt en wat er wettelijk wel en niet mag. Dat kennis-voordeel betaal jij niet extra — wij zijn <strong>goedkoper dan een dealer én werken sneller</strong>.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {[
              { val: "€395", label: "Vanaf" },
              { val: "5", label: "Werkdagen gem." },
              { val: "∞", label: "Garantie" },
              { val: "NL", label: "Heel Nederland" },
            ].map(s => (
              <div key={s.label} style={{ background: "var(--bg-2)", borderRadius: 12, padding: "24px 20px", textAlign: "center" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px,3.5vw,40px)", fontWeight: 800, color: "var(--fg)", lineHeight: 1 }}>{s.val}</div>
                <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 6, fontFamily: "var(--font-mono)", letterSpacing: ".08em", textTransform: "uppercase" }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.ExpertiseBlock = ExpertiseBlock;

function CTA({ setPage }) {
  return (
    <section className="cta">
      <div className="wrap cta-inner">
        <h2>Klaar om je <em>droommotor</em> te rijden?</h2>
        <p>Stuur ons het kenteken of de link van je droommotor — wij rekenen uit wat er mogelijk is. Gratis en vrijblijvend.</p>
        <div className="cta-actions">
          <a className="btn btn-lg btn-primary" 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("contact")}>Offerte aanvragen</button>
        </div>
      </div>
    </section>
  );
}
window.CTA = CTA;

// Catalog page — showcase van modellen
function Catalog({ setPage, setSelectedBike, layout = "grid" }) {
  const [cat, setCat] = useStateS("all");
  const [brand, setBrand] = useStateS("all");
  const [query, setQuery] = useStateS("");

  const results = useMemoS(() => window.BIKES.filter(b => {
    if (cat !== "all" && b.category !== cat) return false;
    if (brand !== "all" && b.brand !== brand) return false;
    if (query && !`${b.brand} ${b.model}`.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  }), [cat, brand, query]);

  return (
    <div>
      <section style={{padding: "60px 0 20px"}}>
        <div className="wrap">
          <div className="eyebrow">A2-geschikte modellen</div>
          <h1 className="display" style={{fontSize: "clamp(40px, 6vw, 80px)", margin: "16px 0 16px"}}>
            Populaire motoren,<br/>teruggevoerd naar A2.
          </h1>
          <p className="muted" style={{fontSize: 17, maxWidth: "58ch", marginBottom: 20}}>
            Een overzicht van modellen die wij regelmatig terugvoeren. Staat jouw favoriet er niet tussen? Stuur ons het kenteken — waarschijnlijk kan het toch.
          </p>
          <div style={{display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 20}}>
            <a className="btn btn-sm btn-wa" 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 /> Check mijn motor</a>
          </div>
        </div>
      </section>
      <div className="wrap">
        <div className="filter-bar">
          <div className="filter-group">
            <span className="lbl">Type</span>
            {window.CATEGORIES.map(c => (
              <button key={c.id} className={"chip " + (cat === c.id ? "on" : "")} onClick={() => setCat(c.id)}>{c.label}</button>
            ))}
          </div>
          <div className="filter-group">
            <span className="lbl">Merk</span>
            <button className={"chip " + (brand === "all" ? "on" : "")} onClick={() => setBrand("all")}>Alle</button>
            {window.BRANDS.map(b => (
              <button key={b} className={"chip " + (brand === b ? "on" : "")} onClick={() => setBrand(b)}>{b}</button>
            ))}
          </div>
          <div className="filter-search">
            <Icon.search />
            <input placeholder="Zoek model..." value={query} onChange={e => setQuery(e.target.value)} />
          </div>
        </div>

        {results.length === 0 ? (
          <div style={{padding: "80px 0", textAlign: "center", color: "var(--fg-2)"}}>
            Geen modellen gevonden met deze filters.
            <div style={{marginTop: 16}}><button className="btn btn-sm" onClick={() => { setCat("all"); setBrand("all"); setQuery(""); }}>Reset filters</button></div>
          </div>
        ) : (
          <div className={`bikes ${layout}`} style={{marginBottom: 80}}>
            {results.map(b => (
              <BikeCard key={b.id} bike={b} layout={layout} onClick={() => { setSelectedBike(b); setPage("detail"); }} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
window.Catalog = Catalog;

// Detail page — case study, niet verkoop
function Detail({ bike, setPage }) {
  if (!bike) bike = window.BIKES[0];
  const reduction = bike.powerOriginal ? Math.round((1 - bike.power / bike.powerOriginal) * 100) : 0;
  return (
    <div>
      <div className="wrap">
        <div className="crumb">
          <a onClick={() => setPage("home")}>Home</a>
          <span className="sep">/</span>
          <a onClick={() => setPage("catalog")}>Modellen</a>
          <span className="sep">/</span>
          <span style={{color: "var(--fg)"}}>{bike.brand} {bike.model}</span>
        </div>
      </div>
      <section className="detail">
        <div className="wrap">
          <div className="detail-head">
            <div>
              <div className="brand">Case · {bike.brand} · {bike.category}</div>
              <h1>{bike.model}</h1>
            </div>
            <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
              {bike.tags?.map(t => <span key={t} className="chip on">{t}</span>)}
            </div>
          </div>
          <div className="detail-grid">
            <div>
              <div className="detail-gallery">
                <div className="main"><BikeThumb bike={bike} /></div>
                <BikeThumb bike={{...bike, category: bike.category}} label={false} />
                <BikeThumb bike={{...bike, category: bike.category === "naked" ? "sport" : "naked"}} label={false} />
              </div>
              <div className="detail-body">
                <h2>Over dit model</h2>
                <p>{bike.description}</p>
                <h2>Wat we doen</h2>
                <p>Bij de {bike.model} voeren we het vermogen terug van {bike.powerOriginal} kW naar 35 kW — een reductie van {reduction}%. Dat valt ruim binnen de A2-regels. Daarna testen we de motor uitgebreid, en regelen we de RDW-keuring en kentekenwijziging.</p>
                <h2>Wat je krijgt</h2>
                <ul className="detail-includes">
                  <li><span className="check"><Icon.check /></span><span>Vermogensaanpassing naar 35 kW</span><span className="tag">incl.</span></li>
                  <li><span className="check"><Icon.check /></span><span>RDW-keuring</span><span className="tag">incl.</span></li>
                  <li><span className="check"><Icon.check /></span><span>Kentekenwijziging</span><span className="tag">incl.</span></li>
                  <li><span className="check"><Icon.check /></span><span>Levenslange garantie op de aanpassing</span><span className="tag">incl.</span></li>
                  <li><span className="check"><Icon.check /></span><span>Test-rit door onze monteur</span><span className="tag">incl.</span></li>
                  <li><span className="check"><Icon.check /></span><span>Later terug naar vol vermogen</span><span className="tag">optioneel</span></li>
                </ul>
              </div>
            </div>
            <div className="detail-buy">
              <h3>Jouw {bike.model} terugvoeren?</h3>
              <div className="detail-price">
                <div>
                  <div className="from">Vermogen-reductie</div>
                  <div className="amount">{bike.powerOriginal} → 35 <span style={{fontSize: 20, color: "var(--fg-3)"}}>kW</span></div>
                </div>
              </div>
              <div className="detail-specs">
                <div><dt>Origineel</dt><dd>{bike.powerOriginal} kW</dd></div>
                <div><dt>Na A2</dt><dd>35 kW</dd></div>
                <div><dt>Koppel</dt><dd>{bike.torque} Nm</dd></div>
                <div><dt>Cilinderinh.</dt><dd>{bike.displacement} cc</dd></div>
                <div><dt>Gewicht</dt><dd>{bike.weight} kg</dd></div>
                <div><dt>Zithoogte</dt><dd>{bike.seat} mm</dd></div>
              </div>
              <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" style={{width: "100%", justifyContent: "center"}}>Vraag offerte aan <Icon.arrow /></a>
              <a className="btn btn-lg btn-wa" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20" style={{width: "100%", justifyContent: "center"}}><Icon.whatsapp /> App over dit model</a>
              <p style={{fontSize: 12, color: "var(--fg-3)", margin: 0, textAlign: "center"}}>Gratis en vrijblijvend — binnen 24 uur reactie</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Detail = Detail;

// About page
function About() {
  return (
    <div>
      <section className="about-hero">
        <div className="about-hero-bg">
          <img src="/foto.svg" alt="Werkplaats van A2 Motor in Voorthuizen — TÜV-kit montage" loading="eager" fetchpriority="high" />
          <div className="about-hero-overlay" />
        </div>
        <div className="wrap about-hero-content">
          <div className="eyebrow" style={{color:"rgba(255,255,255,.55)"}}>Over A2 Motor</div>
          <h1>Wij rijden zelf ook motor.</h1>
          <p className="lead">Thijs en Marijn — twee motorrijders die zich ergerden aan één ding: je haalt je A2-rijbewijs, en mag vervolgens bijna niks rijden waar je écht van droomt. Dat kan anders.</p>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="about-story">
            <div className="about-portrait" style={{overflow:"hidden", background:"var(--bg-3)"}}>
              <img src="team.jpg" alt="Thijs en Marijn — oprichters van A2 Motor in Voorthuizen" style={{width:"100%", height:"100%", objectFit:"cover", objectPosition:"center top", display:"block"}} loading="lazy" />
              <div className="about-portrait-names">
                <span>← Thijs</span>
                <span>Marijn →</span>
              </div>
            </div>
            <div className="about-copy">
              <h3>Terugvoeren zonder vermogensbank.</h3>
              <p>Marijn haalde zijn A2-rijbewijs en wilde een MT-07. De dealer vroeg €600 voor een vermogensbeperking via de bank — en kon niet garanderen dat het achteraf makkelijk terug te draaien was. Samen met Thijs zocht hij een beter alternatief, en vond dat in TÜV-gekeurde terugvoer-kits uit Duitsland. Zo is A2 Motor ontstaan.</p>
              <p>Met die kits voeren wij je motor fysiek terug naar 35 kW én regelen we de RDW-omkeuring online — geen vermogensbank, geen dure keuringsrit. Je rijbewijs, kentekenbewijs én motor worden allemaal tegelijk aangepast. Dat scheelt je al snel honderden euro's.</p>
              <p>En net zo belangrijk: het is omkeerbaar. Haal je later je A-rijbewijs, dan draaien wij de ingreep voor je terug. Geen gedoe, gewoon even langskomen.</p>
              <p>Elke motor die onze werkplaats verlaat, hebben Marijn of Thijs zelf gereden. Niet omdat het moet — omdat rijden de enige eerlijke test is.</p>
            </div>
          </div>
          <dl className="about-stats">
            <div><dt>Specialisme</dt><dd>A2<span className="u">only</span></dd></div>
            <div><dt>Klant tevredenheid</dt><dd>4.9<span className="u">/5</span></dd></div>
            <div><dt>RDW-erkend</dt><dd>Ja<span className="u">✓</span></dd></div>
            <div><dt>Garantie</dt><dd>Levens<span className="u">lang</span></dd></div>
          </dl>
        </div>
      </section>
    </div>
  );
}
window.About = About;

function PriceFaqItem({ q, a }) {
  const [open, setOpen] = useStateS(false);
  return (
    <div className={"faq-item " + (open ? "open" : "")} onClick={() => setOpen(o => !o)}>
      <div className="faq-q">
        <h4>{q}</h4>
        <div className="faq-icon"><Icon.plus /></div>
      </div>
      <div className="faq-a">{a}</div>
    </div>
  );
}
window.PriceFaqItem = PriceFaqItem;

function Prices({ setPage }) {
  const WA = "https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20";

  const includes = [
    "TÜV-gecertificeerde begrenzingskit",
    "Montage in onze werkplaats",
    "RDW-keuring",
    "Kentekenwijziging",
    "Test-rit door onze monteur",
    "Levenslange garantie op de aanpassing",
  ];

  const factors = [
    { n: "01", label: "Merk & model", desc: "De TÜV-kit verschilt per model. Voor populaire modellen als de MT-07, Z650 en CB650R zijn kits standaard op voorraad." },
    { n: "02", label: "Bouwjaar", desc: "Sommige modellen hebben per bouwjaar een andere kit nodig. Wij checken dit vooraf — geen verrassingen achteraf." },
    { n: "03", label: "Terugzetten later", desc: "Haal je je A-rijbewijs? Dan verwijderen wij de kit voor een lager tarief dan de initiële aanpassing." },
  ];

  const faqs = [
    { q: "Wat kost motor begrenzen naar 35 kW bij A2 Motor?", a: "Motor begrenzen of terugvoeren naar 35 kW kost bij A2 Motor vanaf €395, afhankelijk van merk en model. Je krijgt altijd een vaste, transparante offerte vooraf. Stuur je kenteken via WhatsApp voor een directe prijsindicatie." },
    { q: "Wat zit er allemaal in de prijs?", a: "Alles wat nodig is: de TÜV-gecertificeerde begrenzingskit, montage in onze werkplaats, de RDW-keuring, de kentekenwijziging en een test-rit door onze monteur. Plus levenslange garantie op de aanpassing. Geen verborgen kosten." },
    { q: "Waarom is A2 Motor goedkoper dan een dealer?", a: "Dealers gebruiken een vermogensbank voor de terugvoering — dat kost al gauw €600 tot €1.200 en is moeilijk omkeerbaar. Wij werken met TÜV-gecertificeerde kits en regelen de RDW-omkeuring online. Dat scheelt een flinke vermogensbank én hoge uurtarieven. Resultaat is hetzelfde: officieel op je kenteken." },
    { q: "Wat kost het als ik later terug wil naar vol vermogen?", a: "Haal je na minimaal 2 jaar A2-ervaring je A-rijbewijs, dan verwijderen wij de kit voor een lager tarief dan de initiële terugvoering. Stuur ons een bericht als het zover is — we plannen het snel in." },
  ];

  return (
    <div>
      {/* Hero band */}
      <div style={{ position: "relative", height: "clamp(280px,38vw,480px)", overflow: "hidden" }}>
        <img
          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=85&fit=crop&crop=center"
          alt="Monteur past TÜV-kit aan op motor in de werkplaats"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 55%", display: "block" }}
          loading="eager"
        />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(120deg,rgba(10,10,8,.82) 0%,rgba(10,10,8,.45) 55%,rgba(10,10,8,.15) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", paddingBottom: "clamp(28px,4vw,56px)" }}>
          <div className="wrap" style={{ width: "100%" }}>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,.5)", marginBottom: 12 }}>Tarieven</div>
            <h1 style={{ color: "#fff", fontFamily: "var(--font-display)", fontSize: "clamp(28px,4.5vw,62px)", fontWeight: 800, lineHeight: 1.08, margin: "0 0 16px", maxWidth: "18ch" }}>
              Wat kost motor begrenzen naar 35&nbsp;kW?
            </h1>
            <p style={{ color: "rgba(255,255,255,.7)", fontSize: "clamp(14px,1.6vw,17px)", maxWidth: "52ch", margin: 0, lineHeight: 1.6 }}>
              Vanaf <strong style={{ color: "#fff" }}>€395</strong> — inclusief TÜV-kit, RDW-keuring en kentekenwijziging. Altijd een vaste offerte vooraf.
            </p>
          </div>
        </div>
      </div>

      <section className="section" style={{ paddingTop: 48 }}>
        <div className="wrap">
          <div className="detail-grid">

            {/* Left column */}
            <div>
              {/* Comparison */}
              <h2 style={{ marginBottom: 20 }}>A2 Motor vs. dealer</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 48 }}>
                <div style={{ background: "var(--bg-2)", borderRadius: 12, padding: 24, border: "1px solid var(--accent)", borderOpacity: .3 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 14 }}>A2 Motor</div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                    {["Vanaf €395", "TÜV-kit methode", "RDW online afgehandeld", "Altijd omkeerbaar", "Levenslange garantie"].map(t => (
                      <li key={t} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
                        <Icon.check style={{ color: "var(--accent)", flexShrink: 0 }} />{t}
                      </li>
                    ))}
                  </ul>
                </div>
                <div style={{ background: "var(--bg-2)", borderRadius: 12, padding: 24, opacity: 0.6 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 14 }}>Dealer</div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                    {["€600 – €1.200", "Vermogensbank", "Fysieke keuringsrit", "Moeilijk omkeerbaar", "Vaak geen garantie"].map(t => (
                      <li key={t} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--fg-2)" }}>
                        <span style={{ width: 16, flexShrink: 0, textAlign: "center" }}>–</span>{t}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              {/* Factors */}
              <h2 style={{ marginBottom: 20 }}>Wat bepaalt de prijs?</h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 20, marginBottom: 48 }}>
                {factors.map(f => (
                  <div key={f.n} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, background: "var(--bg-3)", padding: "6px 10px", borderRadius: 6, letterSpacing: ".06em", flexShrink: 0, marginTop: 3 }}>{f.n}</div>
                    <div>
                      <div style={{ fontWeight: 600, marginBottom: 4 }}>{f.label}</div>
                      <p style={{ color: "var(--fg-2)", fontSize: 14, margin: 0, lineHeight: 1.6 }}>{f.desc}</p>
                    </div>
                  </div>
                ))}
              </div>

              {/* Photo strip */}
              <div style={{ position: "relative", height: 220, borderRadius: 12, overflow: "hidden", marginBottom: 48 }}>
                <img
                  src="https://images.unsplash.com/photo-1636761358757-0a616eb9e17e?w=1200&q=80&fit=crop&crop=center"
                  alt="Monteur werkt aan motor in de werkplaats van A2 Motor"
                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block" }}
                  loading="lazy"
                />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to right,rgba(10,10,8,.75) 0%,rgba(10,10,8,.2) 60%,transparent 100%)", display: "flex", alignItems: "center" }}>
                  <div style={{ padding: "0 28px" }}>
                    <div style={{ color: "rgba(255,255,255,.45)", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", marginBottom: 8, fontFamily: "var(--font-mono)" }}>In onze werkplaats · Voorthuizen</div>
                    <div style={{ color: "#fff", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(16px,2.2vw,24px)", lineHeight: 1.2, maxWidth: "16ch" }}>Geen vermogensbank. Gewoon TÜV-kits.</div>
                  </div>
                </div>
              </div>

              {/* FAQ */}
              <h2 style={{ marginBottom: 20 }}>Veelgestelde vragen over kosten</h2>
              <div className="faq">
                {faqs.map((f, i) => <PriceFaqItem key={i} q={f.q} a={f.a} />)}
              </div>
            </div>

            {/* Right: price card */}
            <div className="detail-buy">
              <h3>Compleet pakket</h3>
              <div className="detail-price">
                <div>
                  <div className="from">A2-terugvoering</div>
                  <div className="amount">v.a. <span style={{ fontSize: 44 }}>€395</span></div>
                </div>
              </div>
              <ul className="detail-includes" style={{ marginBottom: 20 }}>
                {includes.map((item, i) => (
                  <li key={i}><span className="check"><Icon.check /></span><span>{item}</span><span className="tag">incl.</span></li>
                ))}
              </ul>
              <a className="btn btn-lg btn-accent" href={WA} style={{ width: "100%", justifyContent: "center" }}>
                Offerte aanvragen <Icon.arrow />
              </a>
              <a className="btn btn-lg btn-wa" href={WA} style={{ width: "100%", justifyContent: "center" }}>
                <Icon.whatsapp /> App je kenteken
              </a>
              <p style={{ fontSize: 12, color: "var(--fg-3)", margin: 0, textAlign: "center" }}>Binnen 24 uur reactie · Gratis en vrijblijvend</p>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border)" }}>
                <button className="btn btn-sm" style={{ width: "100%" }} onClick={() => setPage("how")}>Hoe werkt het? <Icon.arrow /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Prices = Prices;