// Vergelijkingspagina
const { useState, useEffect, useContext } = React;

const PageCompare = ({ setPage }) => {
  const cart = useContext(CartContext);
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
  const t = langCtx.t || ((nl) => nl);
  const LP = window.LP || ((o,f) => o && o[f]);
  const lang = langCtx.lang;
  const v20 = PRODUCTS.v20, gt = PRODUCTS.gt2000;

  const rows = [
    {g:t("Motor & ondersteuning","Motor & assist"), items:[
      [t("Motor","Motor"),              "250W", "250W"],
      [t("Top trapondersteuning","Top assist"), "25 km/u", "25 km/u"],
      [t("Walk-assist","Walk-assist"),  t("Tot 6 km/u","Up to 6 km/h"), t("Tot 6 km/u","Up to 6 km/h")],
      [t("EU type-goedgekeurd","EU type-approved"), true, true],
    ]},
    {g:t("Accu","Battery"), items:[
      [t("Spanning","Voltage"),         "48V", "48V"],
      [t("Capaciteit","Capacity"),      "15Ah · 720Wh", "30Ah · 1440Wh"],
      [t("Type","Type"),                t("Uitneembaar","Removable"), t("Geïntegreerd, uitneembaar","Integrated, removable")],
      [t("Actieradius","Range"),        t("Tot 80 km","Up to 80 km"), t("Tot 120 km","Up to 120 km")],
      [t("Laadtijd","Charge time"),     t("5-6 uur","5-6 hours"), t("8-9 uur","8-9 hours")],
    ]},
    {g:t("Frame & rijgevoel","Frame & ride feel"), items:[
      [t("Stijl","Style"),              t("Fatbike comfort","Fat-bike comfort"), t("Crossbike sport","Cross-bike sport")],
      [t("Wielmaat","Wheel size"),      "20\"", "24\""],
      [t("Banden","Tyres"),             t("4.0\" fat tires","4.0\" fat tyres"), t("Knobby noppen","Knobby studs")],
      [t("Vering","Suspension"),        t("Voor + achter","Front + rear"), t("Voor + achter (instelbaar)","Front + rear (adjustable)")],
      [t("Remmen","Brakes"),            t("Hydraulisch","Hydraulic"), t("Hydraulisch","Hydraulic")],
      [t("Versnellingen","Gears"),      "Shimano 7", "Shimano 7"],
      [t("Zithouding","Riding position"), t("Rechtop, comfort","Upright, comfort"), t("Voorovergebogen, sportief","Leaned forward, sporty")],
      [t("Gewicht","Weight"),           "33 kg", "36 kg"],
    ]},
    {g:t("Display","Display"), items:[
      [t("Display","Display"),          t("LCD kleur","LCD colour"), "LCD + NFC"],
      [t("NFC ontgrendeling","NFC unlock"), false, true],
    ]},
    {g:t("Inbegrepen accessoires","Included accessories"), items:[
      [t("Verlengd 2-persoonszadel","Extended 2-person seat"), true, false],
      [t("Voor- en achterdrager","Front + rear rack"),         true, t("Optioneel","Optional")],
      [t("ART-2 ringslot","ART-2 ring lock"),                  true, false],
      [t("Frametas","Frame bag"),                              true, false],
      [t("Alarm","Alarm"),                                     true, false],
      [t("Voetsteunen passagier","Passenger footrests"),       true, false],
      [t("NFC-keycard (2×)","NFC keycard (2×)"),               false, true],
    ]},
    {g:t("Prijs","Price"), items:[
      [t("Vanaf","From"), formatEUR(v20.price), formatEUR(gt.price)],
    ]},
  ];

  const Cell = ({v}) => {
    if (v === true) return <Icon name="check" size={16} style={{color:"var(--ok)"}}/>;
    if (v === false) return <Icon name="x" size={16} style={{color:"var(--ink-mute)"}}/>;
    return <span>{v}</span>;
  };

  return (
    <div className="page">
      <section style={{padding:"56px 0 32px", background:"var(--paper)", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap" style={{textAlign:"center"}}>
          <div className="eyebrow" style={{marginBottom:14}}>{t("Side by side","Side by side")}</div>
          <h1 className="h-display" style={{fontSize:"clamp(40px,6vw,72px)"}}>V20 Pro <span style={{color:"var(--ink-mute)"}}>vs</span> <span className="accent">GT2000</span></h1>
          <p style={{color:"var(--ink-dim)", maxWidth:560, margin:"22px auto 0", fontSize:16}}>
            {t(
              "Dezelfde 250W motor en topsnelheid. Het verschil zit in rijstijl, accu-capaciteit en accessoires.",
              "Same 250W motor and top speed. The difference is in riding style, battery capacity and accessories."
            )}
          </p>
        </div>
      </section>

      {/* Header cards */}
      <section style={{padding:"40px 0"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}} className="cmp-head">
          {[v20, gt].map(b => (
            <div key={b.id} className="card" style={{padding:0, overflow:"hidden"}}>
              <div style={{aspectRatio:"16/10", background:"var(--bg-2)", position:"relative"}}>
                <img src={(window.GALLERY && window.GALLERY[b.id] && window.GALLERY[b.id][0]) || `assets/${b.id}-hero.jpg`}
                  alt={b.short}
                  style={{width:"100%", height:"100%", objectFit:"contain", display:"block"}}/>
                <div style={{position:"absolute", top:14, left:14}}>
                  <span className="tag dark-tag">{LP(b,"badge",lang)}</span>
                </div>
              </div>
              <div style={{padding:24, display:"flex", alignItems:"center", justifyContent:"space-between", gap:16, flexWrap:"wrap"}}>
                <div>
                  <h3 className="h-display" style={{fontSize:24}}>{b.name}</h3>
                  <div className="h-display accent" style={{fontSize:26, marginTop:6}}>{formatEUR(b.price)}</div>
                  {window.vatLabel && <div className="mono" style={{fontSize:10.5, color:"var(--ink-mute)", marginTop:2}}>{window.vatLabel(langCtx.lang)}</div>}
                </div>
                <div className="gap-8">
                  <button className="btn btn-primary btn-sm" onClick={()=>setPage(b.id)}>{t("Bekijk","View")}</button>
                  <button className="btn btn-accent btn-sm" onClick={()=>cart.add(b.id)}>{t("In mand","Add")}</button>
                </div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width:780px){.cmp-head{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* Recommend strip */}
      <section style={{padding:"0 0 40px"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}} className="cmp-head">
          {[
            {ti:t("Kies V20 Pro als…","Choose V20 Pro if…"), i:"bike",  items:[
              t("Je waardeert comfort en rechtop zitten","You value comfort and upright posture"),
              t("Je vaker iemand achterop wilt meenemen","You often take someone on the back"),
              t("Je een compleet pakket met slot en alarm wilt","You want a complete pack with lock and alarm"),
              t("Stadsritten tot 25 km","City rides up to 25 km"),
            ]},
            {ti:t("Kies GT2000 als…","Choose GT2000 if…"), i:"speed", items:[
              t("Je sportief, voorovergebogen wilt rijden","You want a sporty, leaned-forward ride"),
              t("Je 100+ km wilt halen op één lading","You want 100+ km on a single charge"),
              t("Je een crossbike / motorcross look wilt","You want a cross-bike / motocross look"),
              t("Je bezorger bent en lange shifts draait","You're a courier doing long shifts"),
            ]},
          ].map(c => (
            <div key={c.ti} className="card" style={{padding:24}}>
              <div className="gap-12" style={{marginBottom:16}}>
                <div style={{width:36, height:36, borderRadius:8, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center"}}>
                  <Icon name={c.i} size={17}/>
                </div>
                <h3 className="h-display" style={{fontSize:20}}>{c.ti}</h3>
              </div>
              <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:10}}>
                {c.items.map(x => (
                  <li key={x} style={{display:"flex", gap:10, alignItems:"flex-start", color:"var(--ink-dim)", fontSize:14}}>
                    <Icon name="check" size={15} style={{color:"var(--accent)", marginTop:3, flexShrink:0}}/>
                    {x}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Spec table */}
      <section style={{padding:"40px 0 96px"}}>
        <div className="wrap">
          <div className="card" style={{padding:0, overflow:"hidden"}}>
            <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr", padding:"18px 28px", background:"var(--ink)", color:"var(--bg)", alignItems:"center"}}>
              <div className="mono" style={{fontSize:11, letterSpacing:".18em", color:"#aaa", textTransform:"uppercase"}}>{t("Specificatie","Specification")}</div>
              <div className="h-display accent" style={{fontSize:16}}>V20 PRO</div>
              <div className="h-display accent" style={{fontSize:16}}>GT2000</div>
            </div>
            {rows.map((grp, gi) => (
              <div key={grp.g}>
                <div style={{padding:"14px 28px 8px", background:"var(--bg)", borderBottom:"1px solid var(--line)"}}>
                  <div className="eyebrow muted" style={{fontSize:10.5}}>{grp.g}</div>
                </div>
                {grp.items.map(([k,a,b], i) => (
                  <div key={k} style={{display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr", padding:"14px 28px", borderBottom: i < grp.items.length-1 || gi < rows.length-1 ? "1px solid var(--line-soft)" : "none", alignItems:"center", fontSize:14}}>
                    <div style={{color:"var(--ink-dim)"}}>{k}</div>
                    <div><Cell v={a}/></div>
                    <div><Cell v={b}/></div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};
window.PageCompare = PageCompare;