// Fatbike regels Nederland
const PageRegels = ({ setPage }) => {
  const langCtx = React.useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
  const t = langCtx.t || ((nl) => nl);
  return (
  <div className="page">
    <section style={{padding:"56px 0 40px", background:"var(--paper)", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap-narrow">
        <div className="eyebrow" style={{marginBottom:14}}>{t("Wet & regelgeving · Nederland · 2026","Law & regulation · Netherlands · 2026")}</div>
        <h1 className="h-display" style={{fontSize:"clamp(36px,5.5vw,64px)", marginBottom:18}}>
          {t("Fatbike regels in Nederland","Fat-bike rules in the Netherlands")} — <span className="accent">{t("simpel uitgelegd.","simply explained.")}</span>
        </h1>
        <p style={{color:"var(--ink-dim)", fontSize:17, lineHeight:1.6, maxWidth:680}}>
          {t(
            "Onze modellen zijn gericht op legaal gebruik als elektrische fiets. 250W, trapondersteuning tot 25 km/u, walk-assist tot 6 km/u. Hier lees je wat dat betekent — wat wel en niet mag.",
            "Our models target legal use as an electric bicycle. 250W, pedal assist up to 25 km/h, walk-assist up to 6 km/h. Here's what that means — what is and isn't allowed."
          )}
        </p>
      </div>
    </section>

    {/* Status cards */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:16}} className="three-col">
        {[
          {tone:"ok",   title:t("Wat MAG altijd","ALWAYS ALLOWED"), i:"check", items:[
            t("Zyro modellen (250W, tot 25 km/u)","Zyro models (250W, up to 25 km/h)"),
            t("Walk-assist tot 6 km/u","Walk-assist up to 6 km/h"),
            t("Geen rijbewijs nodig","No driver's licence needed"),
            t("Geen kenteken nodig","No registration needed"),
            t("Geen helmplicht (wel aangeraden)","No helmet required (but recommended)"),
          ]},
          {tone:"warn", title:t("Houd rekening met","KEEP IN MIND"), i:"info", items:[
            t("Helmplicht voor speed-pedelecs (45 km/u, niet Zyro)","Helmet required for speed-pedelecs (45 km/h, not Zyro)"),
            t("Lokale regels in bos- of natuurgebieden","Local rules in forests / nature areas"),
            t("Verzekering aanbevolen, niet verplicht","Insurance recommended, not required"),
            t("Onder 14 jaar onder begeleiding","Under 14 requires supervision"),
          ]},
          {tone:"bad",  title:t("Wat NIET mag","WHAT IS NOT ALLOWED"), i:"x", items:[
            t("Motor opvoeren of de-restricten","Tuning the motor or removing restrictions"),
            t("Snelheidsbegrenzer omzeilen","Bypassing the speed limiter"),
            t("Zelfstandige gashendel zonder trappen","Standalone throttle without pedalling"),
            t("Boven 25 km/u laten ondersteunen","Letting it assist above 25 km/h"),
          ]},
        ].map(c => (
          <div key={c.title} className="card" style={{padding:24, borderColor: c.tone === "ok" ? "rgba(31,157,85,.3)" : c.tone === "warn" ? "rgba(201,122,16,.3)" : "rgba(210,58,75,.3)"}}>
            <div className="gap-12" style={{marginBottom:14}}>
              <div style={{width:34, height:34, borderRadius:8,
                background: c.tone === "ok" ? "rgba(31,157,85,.1)" : c.tone === "warn" ? "rgba(201,122,16,.1)" : "rgba(210,58,75,.1)",
                color: c.tone === "ok" ? "var(--ok)" : c.tone === "warn" ? "var(--warn)" : "var(--bad)",
                display:"grid", placeItems:"center"}}>
                <Icon name={c.i} size={16}/>
              </div>
              <h3 className="h-display" style={{fontSize:16, textTransform:"uppercase"}}>{c.title}</h3>
            </div>
            <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:8}}>
              {c.items.map(x => (
                <li key={x} style={{color:"var(--ink-dim)", fontSize:13, paddingLeft:14, position:"relative"}}>
                  <span style={{position:"absolute", left:0, top:7, width:5, height:5, borderRadius:50,
                    background: c.tone === "ok" ? "var(--ok)" : c.tone === "warn" ? "var(--warn)" : "var(--bad)"}}/>
                  {x}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <style>{`@media (max-width:780px){.three-col{grid-template-columns:1fr !important}}`}</style>
    </section>

    {/* Categorie tabel */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("E-bike categorieën","E-bike categories")} title={t("Wat is welke categorie?","Which category is which?")}
          sub={t("Een 'fatbike' is geen wettelijke categorie. Wat telt is vermogen en snelheid.","A 'fat-bike' isn't a legal category. What counts is power and speed.")}/>
        <div className="card" style={{padding:0, overflow:"hidden"}}>
          {[
            {cat:t("E-BIKE (Pedelec)","E-BIKE (Pedelec)"),               legal:t("100% legaal","100% legal"),         motor:"≤ 250W", speed:t("≤ 25 km/u","≤ 25 km/h"), helm:t("Niet verplicht","Not required"), reg:t("Geen kenteken","No registration"),       note:t("Dit zijn Zyro modellen.","This is what Zyro sells."), tone:"ok"},
            {cat:t("SPEED-PEDELEC","SPEED-PEDELEC"),                      legal:t("Bromfiets L1e-B","Moped L1e-B"),    motor:t("tot 4000W","up to 4000W"), speed:t("≤ 45 km/u","≤ 45 km/h"), helm:t("Verplicht","Required"), reg:t("Kenteken + AM rijbewijs","Plate + AM licence"), note:t("Zyro verkoopt deze niet.","Zyro doesn't sell these."), tone:"warn"},
            {cat:t("OPGEVOERDE 'FATBIKE'","TUNED 'FAT-BIKE'"),             legal:t("Illegaal","Illegal"),               motor:"> 250W", speed:t("> 25 km/u zonder trappen","> 25 km/h without pedalling"), helm:t("Risico inbeslagname","Risk of impoundment"), reg:t("Boete + APK","Fine + MOT"), note:t("Wij doen hier niet aan mee.","We don't support this."), tone:"bad"},
          ].map((r, i, arr) => (
            <div key={r.cat} style={{padding:"20px 28px", borderBottom: i < arr.length-1 ? "1px solid var(--line)" : "none", background: i % 2 ? "var(--bg)" : "var(--paper)"}}>
              <div style={{display:"grid", gridTemplateColumns:"1.4fr repeat(4, 1fr) 1.2fr", gap:16, alignItems:"center"}} className="cat-row">
                <div>
                  <div className="mono" style={{fontSize:10, letterSpacing:".12em",
                    color: r.tone === "ok" ? "var(--ok)" : r.tone === "warn" ? "var(--warn)" : "var(--bad)", marginBottom:4}}>{r.legal}</div>
                  <div style={{fontWeight:600, fontSize:14}}>{r.cat}</div>
                </div>
                <Detail k={t("MOTOR","MOTOR")} v={r.motor}/>
                <Detail k={t("SNELHEID","SPEED")} v={r.speed}/>
                <Detail k={t("HELM","HELMET")} v={r.helm}/>
                <Detail k={t("REGISTRATIE","REGISTRATION")} v={r.reg}/>
                <div style={{fontSize:12, color:"var(--ink-dim)", fontStyle:"italic"}}>{r.note}</div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width:780px){.cat-row{grid-template-columns:1fr 1fr !important;gap:12px !important}}`}</style>
      </div>
    </section>

    {/* FAQ */}
    <section style={{padding:"40px 0 96px"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Vaak gestelde vragen","Frequently asked")} title={t("Eerlijke antwoorden.","Honest answers.")}/>
        <div style={{display:"flex", flexDirection:"column", gap:10}}>
          {[
            {q:t("Heb ik een helm nodig op een Zyro?","Do I need a helmet on a Zyro?"),
             a:t("Nee. Een Zyro V20 Pro of GT2000 is een pedelec — een gewone e-bike. Trapondersteuning tot 25 km/u betekent dat er géén helmplicht geldt. Wij raden 'm wel aan.","No. A Zyro V20 Pro or GT2000 is a pedelec — a regular e-bike. Assist up to 25 km/h means no helmet requirement. We do recommend one.")},
            {q:t("Moet ik mijn Zyro verzekeren?","Do I need to insure my Zyro?"),
             a:t("Niet verplicht. Een e-bike valt onder dezelfde categorie als een gewone fiets. Een diefstalverzekering is wél slim — vraag ernaar bij de bestelling.","Not required. An e-bike is in the same category as a regular bicycle. Theft insurance is smart though — ask at order time.")},
            {q:t("Vanaf welke leeftijd mag ik op een Zyro rijden?","What's the minimum age to ride a Zyro?"),
             a:t("Officieel is er geen wettelijke minimumleeftijd. We adviseren: vanaf 14 jaar onder begeleiding, vanaf 16 jaar zelfstandig.","Officially there's no legal minimum age. We advise: 14+ with supervision, 16+ independently.")},
            {q:t("Kan ik mijn Zyro opvoeren?","Can I tune my Zyro?"),
             a:t("Wij doen hier niet aan mee. Opvoeren maakt 'm wettelijk een snorfiets — dan moet je verzekeren, kenteken aanvragen, helm dragen. Boete tot € 410 plus inbeslagname. Niet doen.","We don't support that. Tuning makes it legally a moped — requiring insurance, registration, helmet. Fine up to € 410 plus impoundment. Don't.")},
            {q:t("Wat is walk-assist?","What is walk-assist?"),
             a:t("Een knop op het stuur waarmee de motor de fiets aan de hand tot 6 km/u voortduwt. Handig bij hellingen of in een drukke stalling. Je hoeft niet te trappen.","A button on the handlebar that pushes the bike at walking pace up to 6 km/h. Handy on hills or in crowded racks. No pedalling required.")},
            {q:t("Wat gebeurt er als ik harder dan 25 km/u trap?","What happens if I pedal faster than 25 km/h?"),
             a:t("Niets — de motor stopt met ondersteunen. Boven die snelheid trap je zelf, zonder hulp. Vanaf 25 km/u schakelt de motor automatisch weer in.","Nothing — the motor stops assisting. Above that speed you pedal on your own. Below 25 km/h, the motor kicks in again automatically.")},
            {q:t("Is er een gashendel?","Is there a throttle?"),
             a:t("Nee. Zyro modellen hebben alléén trapondersteuning. Een zelfstandige gashendel zou de fiets in een andere wettelijke categorie plaatsen. Bij ons trap je altijd zelf.","No. Zyro models only have pedal assist. A standalone throttle would put the bike in a different legal category. With us, you always pedal.")},
          ].map((f, i) => <FAQItem key={i} {...f}/>)}
        </div>

        <div style={{marginTop:32, padding:20, background:"var(--paper)", border:"1px solid var(--line)", borderRadius:10, display:"flex", gap:14, alignItems:"flex-start"}}>
          <Icon name="info" size={18} style={{color:"var(--accent)", marginTop:2, flexShrink:0}}/>
          <div>
            <div style={{fontWeight:600, marginBottom:6, fontSize:14}}>{t("Disclaimer","Disclaimer")}</div>
            <p style={{color:"var(--ink-dim)", fontSize:13, lineHeight:1.6}}>
              {t(
                "Informatie gebaseerd op publicaties van Rijksoverheid, RDW en ANWB (laatst bijgewerkt: mei 2026). Wet- en regelgeving kan wijzigen. Twijfel je? Kijk op",
                "Information based on publications from Rijksoverheid, RDW and ANWB (last updated: May 2026). Laws may change. In doubt? Check"
              )} <span className="accent">rijksoverheid.nl</span> {t("of stuur ons een appje.","or send us a WhatsApp.")}
            </p>
          </div>
        </div>
      </div>
    </section>

    <section className="section-sm" style={{background:"var(--paper)", borderTop:"1px solid var(--line)"}}>
      <div className="wrap" style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:24, flexWrap:"wrap"}}>
        <div>
          <h3 className="h-display" style={{fontSize:28}}>{t("Nog vragen over de regels?","More questions about the rules?")}</h3>
          <p style={{color:"var(--ink-dim)", marginTop:8}}>{t("Stuur ons een berichtje. We zijn eerlijk over wat wel en niet mag.","Send us a message. We're honest about what is and isn't allowed.")}</p>
        </div>
        <div className="gap-12">
          <button className="btn btn-ghost" onClick={()=>setPage("contact")}>{t("Stel een vraag","Ask a question")}</button>
          <a href={getWhatsAppHref(t("Ik wil advies over een Zyro Electric fiets","I would like advice about a Zyro Electric bike"))} target="_blank" rel="noopener" className="btn btn-whats">
            <Icon name="whatsapp" size={15} fill="#06281a"/> {t("WhatsApp ons","WhatsApp us")}
          </a>
        </div>
      </div>
    </section>
  </div>
  );
};

const Detail = ({k, v}) => (
  <div>
    <div className="mono" style={{fontSize:9.5, letterSpacing:".12em", color:"var(--ink-mute)", marginBottom:4}}>{k}</div>
    <div style={{fontSize:13, fontWeight:500}}>{v}</div>
  </div>
);

window.PageRegels = PageRegels;