// Shared product page for v20 / gt2000
const { useState, useEffect, useContext } = React;

// Public product reviews — live from approved reviews only. Average + list come
// straight from the RPCs; nothing is hardcoded. When there are zero approved
// reviews we show "Nog geen klantreviews." (NO fake 0.0 star block).
const ProductReviews = ({ slug }) => {
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t:(nl)=>nl }));
  const t = langCtx.t || ((nl)=>nl);
  const locale = langCtx.lang === "en" ? "en-GB" : "nl-NL";
  const [summary, setSummary] = useState(null);
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    if (!slug || !window.zsb || !window.zsb.isConfigured) { setLoading(false); return; }
    Promise.all([ window.zsb.getReviewSummary(slug), window.zsb.getProductReviews(slug, 20) ]).then(([s, l]) => {
      if (cancelled) return;
      setSummary((s && s.data) || { count:0, average:null });
      setList((l && l.data) || []);
      setLoading(false);
    });
    return () => { cancelled = true; };
  }, [slug]);

  const Stars = ({ value, size = 14 }) => (
    <span style={{display:"inline-flex", gap:2, color:"var(--accent)"}}>
      {[1,2,3,4,5].map(n => <Icon key={n} name="star" size={size} fill={n <= Math.round(value || 0) ? "var(--accent)" : "transparent"}/>)}
    </span>
  );

  const count = summary ? Number(summary.count || 0) : 0;
  const average = (summary && summary.average != null) ? Number(summary.average) : null;

  return (
    <section className="section-sm">
      <div className="wrap">
        <SecHead eyebrow={t("Klantreviews","Customer reviews")} title={t("Wat kopers zeggen.","What buyers say.")}/>
        {loading ? (
          <div className="card" style={{padding:24, color:"var(--ink-dim)"}}>{t("Laden…","Loading…")}</div>
        ) : count === 0 ? (
          <div className="card" style={{padding:24, color:"var(--ink-dim)"}}>{t("Nog geen klantreviews.","No customer reviews yet.")}</div>
        ) : (
          <>
            <div style={{display:"flex", alignItems:"center", gap:12, marginBottom:18, flexWrap:"wrap"}}>
              {average != null && <span className="h-display accent" style={{fontSize:32}}>{average.toFixed(1)}</span>}
              {average != null && <Stars value={average} size={18}/>}
              <span style={{color:"var(--ink-dim)", fontSize:14}}>{count} {count === 1 ? t("review","review") : t("reviews","reviews")}</span>
            </div>
            <div className="grid-3">
              {list.map(rv => (
                <div key={rv.id} className="card" style={{padding:24}}>
                  <div style={{marginBottom:10}}><Stars value={rv.rating}/></div>
                  {rv.title && <div style={{fontWeight:600, fontSize:15, marginBottom:6}}>{rv.title}</div>}
                  {rv.body && <p style={{fontSize:14, lineHeight:1.6, color:"var(--ink)"}}>{rv.body}</p>}
                  <div className="mono" style={{fontSize:10.5, color:"var(--ink-mute)", marginTop:14, paddingTop:12, borderTop:"1px solid var(--line)"}}>
                    {t("Geverifieerde aankoop","Verified purchase")} · {new Date(rv.created_at).toLocaleDateString(locale, { dateStyle:"medium" })}
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  );
};

// Compact rating near the product title — live average + count from the DB.
// Renders NOTHING when there are no approved reviews (no fake 0.0).
const ProductRatingInline = ({ slug }) => {
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t:(nl)=>nl }));
  const t = langCtx.t || ((nl)=>nl);
  const [s, setS] = useState(null);
  useEffect(() => {
    let cancelled = false;
    if (!slug || !window.zsb || !window.zsb.isConfigured) return;
    window.zsb.getReviewSummary(slug).then(r => { if (!cancelled) setS((r && r.data) || null); });
    return () => { cancelled = true; };
  }, [slug]);
  if (!s) return null;
  const count = Number(s.count || 0);
  const average = (s.average != null) ? Number(s.average) : null;
  if (count === 0 || average == null) return null;
  return (
    <div style={{display:"inline-flex", alignItems:"center", gap:8, marginBottom:14}}>
      <span style={{display:"inline-flex", gap:2, color:"var(--accent)"}}>
        {[1,2,3,4,5].map(n => <Icon key={n} name="star" size={15} fill={n <= Math.round(average) ? "var(--accent)" : "transparent"}/>)}
      </span>
      <span style={{fontSize:13.5, color:"var(--ink-dim)"}}>{average.toFixed(1)} · {count} {count === 1 ? t("review","review") : t("reviews","reviews")}</span>
    </div>
  );
};

const PageProduct = ({ bikeId, setPage }) => {
  const data = PRODUCTS[bikeId];
  const other = PRODUCTS[bikeId === "v20" ? "gt2000" : "v20"];
  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 [qty, setQty] = useState(1);
  const [view, setView] = useState("hero");
  const [assembly, setAssembly] = useState(false);
  // Per-bike assembly SKU — falls back to the generic ASSEMBLY_SERVICE if the
  // per-bike map isn't loaded (e.g. legacy cart, broken data.jsx). The price
  // of ASSEMBLY_PER_BIKE[bikeId] is kept in sync with Supabase by useProductsStore.
  const ASM = (window.ASSEMBLY_PER_BIKE && window.ASSEMBLY_PER_BIKE[bikeId]) || ASSEMBLY_SERVICE;
  const assemblyAvailable = window.isProductBuyable ? window.isProductBuyable(ASM) : (ASM && ASM.active !== false);
  // Single source of truth for the price displayed on this page. Used by the
  // big hero price, "Bestel nu" CTA and sticky mobile bar — so every visible
  // price reacts to the montage toggle in lock-step.
  const displayPrice = data.price + (assembly ? ASM.price : 0);
  const showDiscount = window.hasDiscount && window.hasDiscount(data);
  const discountOldDisplay = showDiscount ? Number(data.oldPrice) + (assembly ? Number(ASM.price || 0) : 0) : null;
  const lineTotal = displayPrice * qty;
  // Availability gates the buy/checkout buttons. We still render the page
  // so the user can read details and decide whether to keep an eye on it.
  const buyable = window.isProductBuyable ? window.isProductBuyable(data) : (data.active !== false);
  const availLabel = (!buyable && window.availabilityLabel) ? window.availabilityLabel(data.availability_status, lang) : null;
  const addBikeToCart = () => {
    if (!buyable) return;
    for (let i = 0; i < qty; i++) {
      cart.add(data.id);
      if (assembly) cart.add(ASM.id);
    }
  };

  // Mark body so sticky buy bar offset works on mobile
  useEffect(() => {
    document.body.classList.add("has-sticky-buy");
    return () => document.body.classList.remove("has-sticky-buy");
  }, []);
  useEffect(() => {
    if (assembly && !assemblyAvailable) setAssembly(false);
  }, [assembly, assemblyAvailable]);

  if (!data) return null;
  return (
    <div className="page">
      {/* Breadcrumb */}
      <div style={{borderBottom:"1px solid var(--line)", padding:"14px 0", background:"var(--paper)"}}>
        <div className="wrap" style={{display:"flex", alignItems:"center", gap:8, fontFamily:"var(--f-mono)", fontSize:11.5, letterSpacing:".06em", color:"var(--ink-mute)", textTransform:"uppercase"}}>
          <a onClick={()=>setPage("home")} style={{cursor:"pointer"}}>{t("HOME","HOME")}</a>
          <span>/</span>
          <a onClick={()=>setPage("shop")} style={{cursor:"pointer"}}>{t("MODELLEN","MODELS")}</a>
          <span>/</span>
          <span style={{color:"var(--accent)"}}>{data.short.toUpperCase()}</span>
        </div>
      </div>

      {/* Hero grid */}
      <section style={{padding:"56px 0"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1.15fr 1fr", gap:48}} className="product-grid">
          {/* Gallery */}
          <div>
            <BikeGallery bikeId={bikeId}/>
            {/* Trust badges */}
            <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:8, marginTop:14}}>
              {[
                {i:"truck",  l:t("Gratis ophalen","Free pickup")},
                {i:"shield", l:t("2 jaar garantie","2-year warranty")},
                {i:"tools",  l:t("Service in NL","Service in NL")},
                {i:"check",  l:t("30d retour","30-day returns")},
              ].map(b => (
                <div key={b.l} style={{display:"flex", alignItems:"center", gap:8, padding:"10px 12px", background:"var(--paper)", border:"1px solid var(--line)", borderRadius:8}}>
                  <Icon name={b.i} size={15} style={{color:"var(--accent)", flexShrink:0}}/>
                  <span style={{fontSize:12, fontWeight:500}}>{b.l}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Buy box */}
          <div>
            <div className="gap-8" style={{marginBottom:14}}>
              <span className="tag accent"><span className="dot"/>{data.badge}</span>
              {buyable ? (
                <span className="tag ok"><Icon name="check" size={10}/> {t("Beschikbaar","Available")}</span>
              ) : (
                <span className="tag" style={{background:"var(--ink)", color:"#fff"}}>{availLabel}</span>
              )}
            </div>
            <h1 className="h-display" style={{fontSize:"clamp(36px,4.5vw,52px)", marginBottom:14}}>{data.name}</h1>
            <ProductRatingInline slug={bikeId}/>
            <p style={{color:"var(--ink-dim)", fontSize:16, lineHeight:1.6, marginTop:14, marginBottom:24}}>{LP(data,"blurb",lang)}</p>

            {/* Voordelen */}
            <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:10, marginBottom:24}}>
              {(LP(data,"benefits",lang) || data.benefits).map(b => (
                <li key={b} style={{display:"flex", gap:10, alignItems:"flex-start", fontSize:14}}>
                  <Icon name="check" size={16} style={{color:"var(--accent)", marginTop:3, flexShrink:0}}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>

            {/* Price */}
            <div style={{padding:"22px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)", marginBottom:22}}>
              <div style={{display:"flex", alignItems:"baseline", gap:14, flexWrap:"wrap"}}>
                <div className="h-display accent" style={{fontSize:48}}>{formatEUR(displayPrice)}</div>
                {showDiscount && (
                  <>
                    <div className="mono" style={{fontSize:14, color:"var(--ink-mute)", textDecoration:"line-through"}}>{formatEUR(discountOldDisplay)}</div>
                    <span className="tag warn">{window.discountLabel(data, lang)}</span>
                  </>
                )}
                <span className="mono" style={{fontSize:13, color:"var(--ink-mute)"}}>
                  {assembly
                    ? t("incl. montage · incl. 21% BTW","assembly included · incl. 21% VAT")
                    : t("excl. montage · incl. 21% BTW","assembly not included · incl. 21% VAT")}
                </span>
              </div>
              <div style={{marginTop:8, fontSize:13, color:"var(--ink-dim)"}}>
                {t("Betaal veilig via Mollie","Pay securely with Mollie")} · {window.vatLabel ? window.vatLabel(lang) : t("incl. 21% BTW","incl. 21% VAT")}
              </div>
            </div>

            {/* Montage optie */}
            <div style={{marginBottom:18}}>
              <label className="field-label">{t("Montage","Assembly")}</label>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
                {[
                  {id:false, t:t("Niet gemonteerd","Not assembled"), s:t("Zelf monteren · 30-45 min","Build yourself · 30-45 min"), price:0, icon:"tools"},
                  ...(assemblyAvailable ? [{id:true,  t:t("Gemonteerd door Zyro","Assembled by Zyro"), s:t("Volledig rij-klaar geleverd","Delivered ride-ready"), price:ASM.price, icon:"check"}] : []),
                ].map(opt => (
                  <label key={String(opt.id)} style={{
                    display:"flex", alignItems:"center", gap:12, padding:"14px 14px",
                    border: assembly === opt.id ? "2px solid var(--accent)" : "1px solid var(--line)",
                    borderRadius:10,
                    background: assembly === opt.id ? "var(--accent-soft)" : "#fff",
                    cursor:"pointer", transition:"all .12s"
                  }}>
                    <input type="radio" name="asm" checked={assembly === opt.id} onChange={()=>setAssembly(opt.id)} style={{accentColor:"var(--accent)", flexShrink:0}}/>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{fontWeight:600, fontSize:13.5, lineHeight:1.2}}>{opt.t}</div>
                      <div style={{fontSize:11.5, color:"var(--ink-mute)", marginTop:2}}>{opt.s}</div>
                    </div>
                    <div style={{fontFamily:"var(--f-display)", fontWeight:700, fontSize:13.5, color: opt.price === 0 ? "var(--ok)" : "var(--accent)", whiteSpace:"nowrap"}}>
                      {opt.price === 0 ? t("Gratis","Free") : `+ ${formatEUR(opt.price)}`}
                    </div>
                  </label>
                ))}
              </div>
            </div>

            {/* qty + CTA */}
            <div className="gap-12" style={{marginBottom:10}}>
              <div className="qty-big">
                <button onClick={()=>setQty(q=>Math.max(1,q-1))} disabled={!buyable}>−</button>
                <span>{qty}</span>
                <button onClick={()=>setQty(q=>q+1)} disabled={!buyable}>+</button>
              </div>
              {buyable ? (
                <button className="btn btn-accent btn-lg" style={{flex:1}} onClick={addBikeToCart}>
                  <Icon name="cart" size={16}/> {t("Voeg toe aan winkelmand","Add to cart")}
                </button>
              ) : (
                <button className="btn btn-ghost btn-lg" style={{flex:1, opacity:.7, cursor:"not-allowed"}} disabled>
                  {availLabel}
                </button>
              )}
            </div>
            <div className="gap-8">
              {buyable ? (
                <button className="btn btn-primary" style={{flex:1}} onClick={()=>{ addBikeToCart(); setPage("checkout"); }}>
                  {t("Bestel nu","Order now")} — {formatEUR(lineTotal)}
                </button>
              ) : (
                <button className="btn btn-ghost" style={{flex:1, opacity:.7, cursor:"not-allowed"}} disabled>
                  {availLabel}
                </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={14} fill="#06281a"/>
              </a>
              <button className="btn btn-ghost" onClick={()=>setPage("contact")}>
                <Icon name="bike" size={14}/> {t("Proefrit","Test ride")}
              </button>
            </div>

            {/* Service callout */}
            <div className="card" style={{padding:18, marginTop:24, background:"var(--paper)"}}>
              {[
                {i:"truck",  ti:t("Bezorgd tussen wo 20 — vr 22 mei","Delivered between Wed 20 — Fri 22 May"), s:t("Gratis door heel Nederland","Free across the Netherlands")},
                {i:"shield", ti:t("2 jaar volledige garantie","2-year full warranty"),                         s:t("Frame, motor, accu","Frame, motor, battery")},
                {i:"check",  ti:t("30 dagen geld-terug","30-day money-back"),                                  s:t("Geen vragen, geen kosten","No questions, no costs")},
              ].map(x => (
                <div key={x.ti} style={{display:"flex", alignItems:"flex-start", gap:12, padding:"8px 0"}}>
                  <Icon name={x.i} size={16} style={{color:"var(--accent)", marginTop:2, flexShrink:0}}/>
                  <div>
                    <div style={{fontSize:13.5, fontWeight:500}}>{x.ti}</div>
                    <div style={{fontSize:12, color:"var(--ink-mute)"}}>{x.s}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Compliance note */}
            <div style={{marginTop:18, padding:"14px 16px", background:"var(--accent-soft)", border:"1px solid rgba(0,107,255,.15)", borderRadius:10, display:"flex", gap:10, fontSize:12.5, color:"var(--ink-dim)"}}>
              <Icon name="info" size={15} style={{color:"var(--accent)", flexShrink:0, marginTop:2}}/>
              <span>
                {t(
                  "250W · ondersteuning tot 25 km/u · walk-assist tot 6 km/u · geen rijbewijs of kenteken nodig.",
                  "250W · assist up to 25 km/h · walk-assist up to 6 km/h · no driver's licence or registration needed."
                )}
                {" "}<a onClick={()=>setPage("regels")} style={{color:"var(--accent)", cursor:"pointer", fontWeight:500}}>{t("Lees de regels →","Read the rules →")}</a>
              </span>
            </div>
          </div>
        </div>
        <style>{`@media (max-width:900px){.product-grid{grid-template-columns:1fr !important;gap:32px !important}}`}</style>
      </section>

      {/* Spec table */}
      <section className="section" style={{background:"var(--paper)", borderTop:"1px solid var(--line)"}}>
        <div className="wrap">
          <SecHead eyebrow={t("Specificaties","Specifications")} title={t("Geen verrassingen.","No surprises.")}
            right={<button className="btn btn-ghost btn-sm" onClick={()=>setPage("compare")}>{t("Vergelijk met andere model","Compare with other model")} <Icon name="arrow" size={13}/></button>}/>
          <div className="card" style={{padding:"8px 32px"}}>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 48px"}} className="spec-cols">
              {Object.entries(LP(data,"specs",lang) || data.specs).map(([k,v]) => (
                <div key={k} className="spec-row" style={{gridTemplateColumns:"170px 1fr"}}>
                  <div className="key">{k}</div>
                  <div className="val">{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`@media (max-width:780px){.spec-cols{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* In de doos + Voor wie */}
      <section className="section">
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}} className="two-col">
          <div className="card" style={{padding:32}}>
            <div className="eyebrow" style={{marginBottom:14}}>{t("Wat zit er in de doos?","What's in the box?")}</div>
            <h3 className="h-display" style={{fontSize:26, marginBottom:20}}>{t("Compleet pakket","Complete package")}</h3>
            <ul style={{listStyle:"none", display:"grid", gridTemplateColumns:"1fr", gap:8}}>
              {(LP(data,"inBox",lang) || data.inBox).map(b => (
                <li key={b} style={{display:"flex", gap:10, alignItems:"flex-start", fontSize:14, color:"var(--ink-dim)"}}>
                  <Icon name="check" size={15} style={{color:"var(--accent)", marginTop:3, flexShrink:0}}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="card" style={{padding:32}}>
            <div className="eyebrow" style={{marginBottom:14}}>{t("Voor wie is dit model?","Who is this model for?")}</div>
            <h3 className="h-display" style={{fontSize:26, marginBottom:20}}>{data.short} {t("past bij…","fits…")}</h3>
            <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:14}}>
              {(LP(data,"forWho",lang) || data.forWho).map(w => (
                <li key={w} style={{display:"flex", gap:12, alignItems:"flex-start", fontSize:14.5}}>
                  <div style={{width:28, height:28, borderRadius:50, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", flexShrink:0}}>
                    <Icon name="check" size={14}/>
                  </div>
                  <span>{w}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <style>{`@media (max-width:780px){.two-col{grid-template-columns:1fr !important}}`}</style>
      </section>

      {/* Garantie & service */}
      <section className="section-sm" style={{background:"var(--paper)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap">
          <SecHead eyebrow={t("Garantie & service","Warranty & service")} title={t("Gekocht is niet alleen.","Purchased isn't alone.")}
            right={<button className="btn btn-ghost btn-sm" onClick={()=>setPage("service")}>{t("Bekijk alle service-info","All service info")} <Icon name="arrow" size={13}/></button>}/>
          <div className="grid-3">
            {[
              {i:"award", ti:t("Fabrieksgarantie","Factory warranty"),       d:t("Je e-bike heeft fabrieksgarantie. Vragen over garantie? Neem contact op.","Your e-bike comes with a factory warranty. Questions about warranty? Get in touch.")},
              {i:"tools", ti:t("Hulp & service","Help & service"),           d:t("Vragen over onderhoud of garantie? Neem contact op via WhatsApp, dan kijken we er samen naar.","Questions about maintenance or warranty? Contact us via WhatsApp and we'll look into it together.")},
              {i:"chat",  ti:t("WhatsApp support","WhatsApp support"),        d:t("Stel je vraag via WhatsApp; we reageren zo snel mogelijk.","Ask your question via WhatsApp; we'll reply as soon as we can.")},
            ].map(s => (
              <div key={s.ti} className="card" style={{padding:24}}>
                <div style={{width:40, height:40, borderRadius:10, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", marginBottom:14}}>
                  <Icon name={s.i} size={18}/>
                </div>
                <h4 className="h-display case" style={{fontSize:17, marginBottom:8, textTransform:"uppercase"}}>{s.ti}</h4>
                <p style={{color:"var(--ink-dim)", fontSize:13.5}}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-sm">
        <div className="wrap-narrow">
          <SecHead eyebrow={t("Veelgestelde vragen","FAQ")} title={t("Eerlijke antwoorden.","Honest answers.")}/>
          <div style={{display:"flex", flexDirection:"column", gap:8}}>
            <FAQItem
              q={t("Heb ik een helm of rijbewijs nodig?","Do I need a helmet or driver's licence?")}
              a={t("Nee. Dit model is een 250W pedelec — wettelijk een gewone fiets. Geen helm-, rijbewijs- of kentekenplicht. Wel raden we een helm aan voor je veiligheid.","No. This model is a 250W pedelec — legally a regular bicycle. No helmet, licence or registration required. We do recommend a helmet for safety.")}
            />
            <FAQItem
              q={t("Kan ik de accu uitnemen om binnen op te laden?","Can I remove the battery to charge indoors?")}
              a={t("Ja. De accu is uitneembaar met sleutel. Laadt op via een normaal stopcontact in 5-9 uur (model-afhankelijk).","Yes. The battery is removable with a key. Charges from a regular outlet in 5-9 hours (model-dependent).")}
            />
            <FAQItem
              q={t("Wat als ik 'm wil opvoeren?","What if I want to tune it up?")}
              a={t("Wij doen daar niet aan mee. Opvoeren maakt de e-bike wettelijk een snorfiets — dan moet je verzekeren, kenteken aanvragen, helm dragen, en je bent niet meer welkom op fietspaden. Niet doen.","We don't support that. Tuning makes the e-bike legally a moped — requiring insurance, registration, helmet, and you can't use bike paths anymore. Don't.")}
            />
            <FAQItem
              q={t("Hoe kan ik betalen?","How can I pay?")}
              a={t("Veilig via Mollie: iDEAL, creditcard (Visa/Mastercard), Apple Pay. Of bij ophalen contant/PIN aan de balie.","Securely via Mollie: iDEAL, credit card (Visa/Mastercard), Apple Pay. Or cash / card at the counter when picking up.")}
            />
            <FAQItem
              q={t("Wat is de levertijd?","What's the delivery time?")}
              a={t("Na je bestelling nemen we contact op over de levering. Je kunt ook ophalen in onze showroom in Utrecht. Standaard wordt de fiets ongemonteerd geleverd (zelf monteren 30-45 min); wil je 'm rijklaar? Kies bij het bestellen voor 'Gemonteerd door Zyro' (+ € 50).","After your order we'll contact you about delivery. You can also pick up at our Utrecht showroom. The bike is delivered un-assembled by default (DIY 30-45 min); want it ride-ready? Choose 'Assembled by Zyro' at checkout (+ € 50).")}
            />
          </div>
        </div>
      </section>

      {/* Compare with other */}
      <section className="section-sm" style={{background:"var(--paper)", borderTop:"1px solid var(--line)"}}>
        <div className="wrap">
          <SecHead eyebrow={`${data.short} versus ${other.short}`} title={t("Of toch het andere model?","Or maybe the other model?")}
            right={<button className="btn btn-ghost btn-sm" onClick={()=>setPage("compare")}>{t("Volledige vergelijking","Full comparison")} <Icon name="arrow" size={13}/></button>}/>
          <div className="card" style={{padding:0, overflow:"hidden", display:"flex", alignItems:"stretch"}} className="cross-sell">
            <div style={{flex:1, padding:32}}>
              <div className="mono" style={{fontSize:11, letterSpacing:".12em", color:"var(--ink-mute)", textTransform:"uppercase", marginBottom:8}}>{LP(other,"badge",lang)} · {LP(other,"type",lang)}</div>
              <h3 className="h-display" style={{fontSize:28, marginBottom:10}}>{other.name}</h3>
              <p style={{color:"var(--ink-dim)", marginBottom:18, fontSize:14.5}}>{LP(other,"blurb",lang)}</p>
              <div className="gap-12" style={{marginBottom:20}}>
                <span className="h-display accent" style={{fontSize:28}}>{formatEUR(other.price)}</span>
                {window.hasDiscount && window.hasDiscount(other) && (
                  <>
                    <span className="mono" style={{fontSize:13, color:"var(--ink-mute)", textDecoration:"line-through"}}>{formatEUR(other.oldPrice)}</span>
                    <span className="tag warn">{window.discountLabel(other, lang)}</span>
                  </>
                )}
              </div>
              <div className="gap-8">
                <button className="btn btn-primary" onClick={()=>setPage(other.id)}>{t("Bekijk","View")} {other.short} <Icon name="arrow" size={14}/></button>
                <button className="btn btn-ghost" onClick={()=>setPage("compare")}>{t("Vergelijk","Compare")}</button>
              </div>
            </div>
            <div style={{width:380, borderLeft:"1px solid var(--line)"}}>
              <img src={(window.GALLERY && window.GALLERY[other.id] && window.GALLERY[other.id][0]) || `assets/${other.id}-hero.jpg`}
                alt={other.short}
                style={{width:"100%", height:"100%", objectFit:"contain", display:"block", minHeight:280}}/>
            </div>
          </div>
        </div>
        <style>{`@media (max-width:780px){.cross-sell{flex-direction:column-reverse}.cross-sell>div:last-child{width:100% !important;min-height:240px}}`}</style>
      </section>

      {/* Public reviews — approved-only, live from RPCs */}
      <ProductReviews slug={bikeId}/>

      {/* Sticky mobile buy bar */}
      <div className="sticky-buy">
        <div className="price">{formatEUR(displayPrice)}</div>
        {buyable ? (
          <button className="btn btn-accent" onClick={addBikeToCart}>
            <Icon name="cart" size={15}/> {t("In mand","Add")}
          </button>
        ) : (
          <button className="btn btn-ghost" disabled style={{opacity:.7, cursor:"not-allowed"}}>
            {availLabel}
          </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"/>
        </a>
      </div>
    </div>
  );
};

window.PageProduct = PageProduct;