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

// Compact live rating for product cards (home + shop). Average + count come from
// approved reviews via get_review_summary. Renders NOTHING when there are no
// approved reviews — no fake 0.0, no fake counts, no hardcoded data.
const CardRating = ({ slug }) => {
  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 (
    <span style={{display:"inline-flex", alignItems:"center", gap:6, fontSize:12.5, color:"var(--ink-dim)"}}>
      <span style={{display:"inline-flex", gap:1, color:"var(--accent)"}}>
        {[1,2,3,4,5].map(n => <Icon key={n} name="star" size={12} fill={n <= Math.round(average) ? "var(--accent)" : "transparent"}/>)}
      </span>
      {average.toFixed(1)} · {count}
    </span>
  );
};

const PageHome = ({ setPage }) => {
  const cart = useContext(CartContext);
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
  const t = langCtx.t || ((nl) => nl);
  const lang = langCtx.lang || "nl";
  const LP = window.LP || ((o, f) => o && o[f]);
  return (
  <div className="page">

    {/* HERO */}
    <section style={{padding:"56px 0 40px", position:"relative"}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:48, alignItems:"center"}}>
          <div>
            <div className="gap-8" style={{marginBottom: 22}}>
              <span className="tag accent"><span className="dot"/>{t("2026 collectie","2026 collection")}</span>
              <span className="tag"><Icon name="truck" size={11}/> {t("Gratis ophalen","Free pickup")}</span>
              <span className="tag ok"><Icon name="shield" size={11}/> {t("Fabrieksgarantie","Factory warranty")}</span>
            </div>
            <h1 className="h-display" style={{fontSize:"clamp(40px, 6.5vw, 84px)", lineHeight:0.92}}>
              {t("Legale","Legal")}<br/>{t("elektrische","electric")}<br/><span className="accent">{t("fatbikes","fat-bikes")}</span><br/>{t("voor Nederland","for the Netherlands")}
            </h1>
            <p style={{color:"var(--ink-dim)", fontSize:18, marginTop:28, maxWidth:520, lineHeight:1.55}}>
              {t(
                "Stoere, betrouwbare en legale elektrische fatbikes en crossbikes voor stad, school, werk en dagelijks gebruik. Geen brommer — een echte e-bike.",
                "Tough, reliable, legal electric fat-bikes and cross-bikes for city, school, work and everyday use. Not a moped — a real e-bike."
              )}
            </p>
            <div className="gap-12" style={{marginTop:36}}>
              <button className="btn btn-primary btn-lg" onClick={()=>setPage("shop")}>{t("Bekijk modellen","View models")} <Icon name="arrow" size={16}/></button>
              <button className="btn btn-accent btn-lg" onClick={()=>setPage("shop")}>{t("Shop nu","Shop now")}</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 btn-lg">
                <Icon name="whatsapp" size={16} fill="#06281a"/> {t("WhatsApp advies","WhatsApp support")}
              </a>
            </div>
            <div style={{display:"grid", gridTemplateColumns:"repeat(3, max-content)", gap:40, marginTop:48}}>
              <div><div className="stat-num">250W</div><div className="stat-lbl">{t("EU type-goedgekeurd","EU type-approved")}</div></div>
              <div><div className="stat-num">Utrecht</div><div className="stat-lbl">{t("Showroom Overvecht","Showroom Overvecht")}</div></div>
              <div><div className="stat-num">Mollie</div><div className="stat-lbl">{t("Veilig betalen","Secure payment")}</div></div>
            </div>
          </div>
          <div>
            <BikePhoto bikeId="v20" slotKey="hero" className="hero"/>
          </div>
        </div>
      </div>
    </section>

    {/* TRUST BADGES */}
    <section style={{padding:"24px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"repeat(6, 1fr)", gap:16}} className="trust-row">
          {[
            {i:"bolt",   tlabel:t("250W motor","250W motor")},
            {i:"speed",  tlabel:t("Tot 25 km/u","Up to 25 km/h")},
            {i:"bike",   tlabel:t("Walk-assist 6 km/u","Walk-assist 6 km/h")},
            {i:"tools",  tlabel:t("Hulp via WhatsApp","WhatsApp support")},
            {i:"shield", tlabel:t("Fabrieksgarantie","Factory warranty")},
            {i:"check",  tlabel:t("Betaal via Mollie","Pay via Mollie")},
          ].map(b => (
            <div key={b.tlabel} style={{display:"flex", alignItems:"center", gap:10, padding:"6px 0"}}>
              <div style={{width:34, height:34, borderRadius:8, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", flexShrink:0}}>
                <Icon name={b.i} size={16}/>
              </div>
              <span style={{fontSize:13, fontWeight:500}}>{b.tlabel}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:900px){.trust-row{grid-template-columns:repeat(3,1fr) !important}}@media (max-width:560px){.trust-row{grid-template-columns:repeat(2,1fr) !important}}`}</style>
    </section>

    {/* Featured models */}
    <section className="section">
      <div className="wrap">
        <SecHead
          eyebrow={t("Uitgelichte modellen","Featured models")}
          title={t("Twee modellen, één missie","Two models, one mission")}
          sub={t(
            "Beide 250W, EU type-goedgekeurd. Kies V20 Pro voor comfort + complete accessoire-set, of GT2000 voor lange shifts en sportieve crossbike-stijl.",
            "Both 250W, EU type-approved. Choose V20 Pro for comfort + a complete accessory pack, or GT2000 for long shifts and a sporty cross-bike style."
          )}
        />
        <div className="grid-2">
          {Object.values(PRODUCTS).filter(p => p.active !== false).map(p => {
            const specs = LP(p, "specs", lang) || p.specs || {};
            const battery = lang === "en" ? specs.Battery : specs.Accu;
            const range = lang === "en" ? specs.Range : specs.Actieradius;
            const wheels = lang === "en" ? specs.Wheels : specs.Wielen;
            const showDiscount = window.hasDiscount && window.hasDiscount(p);
            return (
            <article key={p.id} className="card" style={{padding:0, overflow:"hidden", display:"flex", flexDirection:"column"}}>
              <div style={{position:"relative"}}>
                <BikePhoto bikeId={p.id} slotKey="hero" style={{borderRadius:0, border:"none", borderBottom:"1px solid var(--line)"}}/>
                <div style={{position:"absolute", top:14, right:14}}>
                  <span className="tag dark-tag">{LP(p,"badge",lang)}</span>
                </div>
              </div>
              <div style={{padding:28, display:"flex", flexDirection:"column", flex:1}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:20, marginBottom:14}}>
                  <div>
                    <div className="mono" style={{color:"var(--ink-mute)", fontSize:11, letterSpacing:".12em", textTransform:"uppercase", marginBottom:6}}>{LP(p,"color",lang)} · {LP(p,"type",lang)}</div>
                    <h3 className="h-display" style={{fontSize:28}}>{p.short}</h3>
                    <div style={{marginTop:6}}><CardRating slug={p.id}/></div>
                  </div>
                  <div style={{textAlign:"right"}}>
                    <div className="mono" style={{color:"var(--ink-mute)", fontSize:11}}>{t("VANAF","FROM")}</div>
                    {showDiscount && (
                      <div className="mono" style={{color:"var(--ink-mute)", fontSize:12, textDecoration:"line-through"}}>
                        {formatEUR(p.oldPrice)}
                      </div>
                    )}
                    <div className="h-display accent" style={{fontSize:28}}>{formatEUR(p.price)}</div>
                    {showDiscount && (
                      <div className="tag warn" style={{marginTop:4}}>{window.discountLabel(p, lang)}</div>
                    )}
                    {window.vatLabel && (
                      <div className="mono" style={{color:"var(--ink-mute)", fontSize:10}}>
                        {window.vatLabel(langCtx.lang)}
                      </div>
                    )}
                  </div>
                </div>
                <p style={{color:"var(--ink-dim)", fontSize:14, marginBottom:18, flex:1}}>{LP(p,"blurb",lang)}</p>
                <div className="grid-2" style={{gap:8, marginBottom:18}}>
                  <SpecPill icon="battery" k={t("ACCU","BATTERY")} v={(battery || "").split(" · ")[1] || battery}/>
                  <SpecPill icon="range" k={t("RADIUS","RANGE")} v={range}/>
                  <SpecPill icon="bike" k={t("WIELEN","WHEELS")} v={wheels}/>
                  <SpecPill icon="gear" k="GEAR" v="Shimano 7"/>
                </div>
                <div className="gap-8">
                  <button className="btn btn-primary" style={{flex:1, minWidth:140}} onClick={()=>setPage(p.id)}>
                    {t("Bekijk product","View product")} <Icon name="arrow" size={14}/>
                  </button>
                  <button className="btn btn-ghost" onClick={(e)=>{ e.stopPropagation(); cart.add(p.id); }}>
                    <Icon name="cart" size={14}/> +
                  </button>
                </div>
              </div>
            </article>
          );})}
        </div>
        <div style={{display:"flex", justifyContent:"center", marginTop:32}}>
          <button className="btn btn-ghost" onClick={()=>setPage("compare")}>
            {t("Vergelijk beide modellen","Compare both models")} <Icon name="arrow" size={15}/>
          </button>
        </div>
      </div>
    </section>

    {/* Marquee */}
    <div className="marquee-wrap">
      <div className="marquee">
        {Array.from({length:3}).map((_,k)=>(
          <React.Fragment key={k}>
            <span>250W {t("Pedelec","Pedelec")}</span><span className="dot">◆</span>
            <span>{t("EU Type-goedgekeurd","EU Type-approved")}</span><span className="dot">◆</span>
            <span>{t("Hydraulische schijfremmen","Hydraulic disc brakes")}</span><span className="dot">◆</span>
            <span>Shimano 7-speed</span><span className="dot">◆</span>
            <span>{t("Service in NL","Service in NL")}</span><span className="dot">◆</span>
            <span>{t("Mollie · iDEAL · Apple Pay","Mollie · iDEAL · Apple Pay")}</span><span className="dot">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>

    {/* Waarom Zyro */}
    <section className="section">
      <div className="wrap">
        <SecHead eyebrow={t("Waarom Zyro Electric","Why Zyro Electric")} title={<>{t("Gemaakt om elke","Built to work")}<br/>{t("dag te werken.","every day.")}</>}
          sub={t(
            "Geen marketingpraat — e-bikes voor mensen die er écht op rijden: bezorgers, studenten, woon-werk forensen.",
            "No marketing fluff — e-bikes for people who actually ride: couriers, students, commuters."
          )}/>
        <div className="grid-3">
          {[
            {i:"shield", tt:t("100% legaal","100% legal"),                d:t("EU type-goedgekeurd. 250W motor, ondersteuning tot 25 km/u. Geen helm- of verzekeringsplicht voor volwassenen. Wij doen niet aan opvoeren.","EU type-approved. 250W motor, assist up to 25 km/h. No helmet or insurance required for adults. We don't do tuning.")},
            {i:"truck",  tt:t("Ophalen of bezorgen","Pickup or delivery"), d:t("Ophalen is gratis in onze showroom in Utrecht. Bezorgen gebruikt de actuele verzendkosten uit de checkout. Standaard ongemonteerd of kies montage door Zyro (+ € 50).","Pickup is free at our Utrecht showroom. Delivery uses the current shipping rate from checkout. Standard unassembled or choose assembly by Zyro (+ €50).")},
            {i:"tools",  tt:t("Hulp & service","Help & service"), d:t("Vragen over je e-bike, onderhoud of garantie? Neem contact op via WhatsApp, dan kijken we er samen naar.","Questions about your e-bike, maintenance or warranty? Contact us via WhatsApp and we'll look into it together.")},
            {i:"chat",   tt:t("WhatsApp advies","WhatsApp support"),      d:t("Niet zeker welk model bij je past? Stuur ons een berichtje via WhatsApp en we denken met je mee.","Not sure which model suits you? Send us a WhatsApp message and we'll help you think it through.")},
            {i:"award",  tt:t("Fabrieksgarantie","Factory warranty"),       d:t("Je e-bike heeft fabrieksgarantie. Een probleem binnen de garantieperiode? Neem contact op, dan lossen we het samen op.","Your e-bike comes with a factory warranty. A problem within the warranty period? Contact us and we'll sort it out together.")},
            {i:"lock",   tt:t("Veilig op slot","Secure & locked"),         d:t("V20 Pro inclusief ART-2 ringslot en alarm. Optioneel: extra ART-3 vouwslot voor maximale verzekeringsdekking.","V20 Pro includes ART-2 ring lock and alarm. Optional: extra ART-3 folding lock for max insurance coverage.")},
          ].map(f => (
            <div key={f.tt} className="card" style={{padding:28}}>
              <div style={{width:44, height:44, borderRadius:10, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", marginBottom:18}}>
                <Icon name={f.i} size={20}/>
              </div>
              <h4 className="h-display case" style={{fontSize:19, marginBottom:8, textTransform:"uppercase"}}>{f.tt}</h4>
              <p style={{color:"var(--ink-dim)", fontSize:14}}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Vergelijking met andere aanbieders */}
    <section className="section" style={{background:"var(--paper)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Waarom kiezen voor Zyro?","Why choose Zyro?")} title={t("Vergelijk ons met de rest.","Compare us with the rest.")}/>
        <div className="card" style={{padding:0, overflow:"hidden"}}>
          <div style={{display:"grid", gridTemplateColumns:"1.5fr 1fr 1fr 1fr", padding:"16px 24px", background:"var(--ink)", color:"var(--bg)", alignItems:"center"}}>
            <div className="mono" style={{fontSize:11, letterSpacing:".15em", textTransform:"uppercase", color:"#aaa"}}>{t("FEATURE","FEATURE")}</div>
            <div className="h-display accent" style={{fontSize:15}}>ZYRO</div>
            <div className="mono" style={{fontSize:12, color:"#aaa"}}>{t("Goedkope import","Cheap import")}</div>
            <div className="mono" style={{fontSize:12, color:"#aaa"}}>{t("Premium brand X","Premium brand X")}</div>
          </div>
          {[
            {f:t("Hulp & service in NL","Help & service in NL"),               a:t("✓ Via WhatsApp","✓ Via WhatsApp"), b:t("✗ Buitenland","✗ Abroad"),                c:"✓"},
            {f:t("WhatsApp advies","WhatsApp support"),                        a:"✓", b:"✗",                  c:"✗"},
            {f:t("ART-slot inbegrepen (V20)","ART lock included (V20)"),       a:t("✓ ART-2 ringslot","✓ ART-2 ring lock"), b:"✗",  c:t("€ 99 extra","€ 99 extra")},
            {f:t("Fabrieksgarantie","Factory warranty"),                       a:"✓", b:t("6 maanden","6 months"),     c:"✓"},
            {f:t("Bezorging & montage","Delivery & assembly"),                 a:t("✓ Gratis ophalen · montage € 50","✓ Free pickup · assembly € 50"),      b:t("Zelf bouwen, geen support","Self-assemble, no support"),  c:t("€ 49 bezorging + € 99 montage","€ 49 delivery + € 99 assembly")},
            {f:t("Veilig betalen via Mollie","Secure payment via Mollie"),    a:"✓", b:"✗",                  c:"✓"},
            {f:t("Prijs V20 fatbike-klasse","Price V20 fat-bike class"),       a:formatEUR(950),  b:formatEUR(1199),  c:formatEUR(2199)},
          ].map((r, i, arr) => (
            <div key={r.f} style={{display:"grid", gridTemplateColumns:"1.5fr 1fr 1fr 1fr", padding:"14px 24px", borderBottom: i < arr.length-1 ? "1px solid var(--line)" : "none", alignItems:"center", fontSize:14}}>
              <div style={{color:"var(--ink-dim)"}}>{r.f}</div>
              <div style={{fontWeight:600, color: r.a.startsWith("✓") ? "var(--ok)" : "var(--ink)"}}>{r.a}</div>
              <div style={{color: r.b.startsWith("✗") ? "var(--bad)" : "var(--ink-dim)"}}>{r.b}</div>
              <div style={{color:"var(--ink-dim)"}}>{r.c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Eerlijk & duidelijk — nieuw bedrijf, geen reviews/statistieken */}
    <section className="section">
      <div className="wrap">
        <SecHead eyebrow={t("Eerlijk & duidelijk","Honest & clear")} title={<>{t("Een nieuw bedrijf,","A new company,")}<br/><span className="accent">{t("eerlijk verkocht.","honestly run.")}</span></>}
          sub={t(
            "Zyro Electric Nederland is net gestart in Utrecht Overvecht. We doen niet groter dan we zijn — duidelijke prijzen, eerlijk advies en veilige betaling.",
            "Zyro Electric Nederland just started in Utrecht Overvecht. We don't pretend to be bigger than we are — clear prices, honest advice and secure payment."
          )}/>
        <div className="grid-3">
          {[
            {i:"shield", tt:t("Legaal & duidelijk","Legal & clear"),     d:t("Alleen 250W pedelecs, EU type-goedgekeurd. Duidelijke productinformatie, geen overdreven verkooppraatjes.","Only 250W pedelecs, EU type-approved. Clear product info, no over-the-top sales talk.")},
            {i:"lock",   tt:t("Veilig betalen","Secure payment"),        d:t("Online via Mollie (iDEAL, creditcard, Apple Pay) of contant bij ophalen. Na betaling ontvang je een factuur/kassabon.","Online via Mollie (iDEAL, card, Apple Pay) or cash on pickup. You get an invoice/receipt after payment.")},
            {i:"truck",  tt:t("Ophalen of bezorgen","Pickup or delivery"), d:t("Ophalen in onze showroom in Utrecht, of bezorgen waar beschikbaar. De bezorgkosten zie je in de checkout.","Pick up at our Utrecht showroom, or have it delivered where available. Shipping costs are shown at checkout.")},
          ].map(f => (
            <div key={f.tt} className="card" style={{padding:28}}>
              <div style={{width:44, height:44, borderRadius:10, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", marginBottom:18}}>
                <Icon name={f.i} size={20}/>
              </div>
              <h4 className="h-display case" style={{fontSize:19, marginBottom:8, textTransform:"uppercase"}}>{f.tt}</h4>
              <p style={{color:"var(--ink-dim)", fontSize:14}}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* FAQ preview */}
    <section className="section-sm" style={{background:"var(--paper)", borderTop:"1px solid var(--line)"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Veelgestelde vragen","FAQ")} title={t("Eerlijke antwoorden.","Honest answers.")}
          right={<button className="btn btn-ghost btn-sm" onClick={()=>setPage("regels")}>{t("Alle FAQ","All FAQ")} <Icon name="arrow" size={13}/></button>}/>
        <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. Zyro modellen zijn 250W pedelecs met ondersteuning tot 25 km/u — wettelijk gelijk aan een gewone fiets. Geen helm-, rijbewijs- of kentekenplicht.",
              "No. Zyro models are 250W pedelecs with assist up to 25 km/h — legally the same as a regular bicycle. No helmet, driver's licence or registration required."
            )}
          />
          <FAQItem
            q={t("Hoe snel rijdt een Zyro?","How fast does a Zyro go?")}
            a={t(
              "De motor ondersteunt tot 25 km/u. Daarboven blijf je gewoon trappen — zonder motorhulp. Walk-assist tot 6 km/u voor aan de hand lopen.",
              "The motor assists up to 25 km/h. Above that you keep pedalling — without motor help. Walk-assist up to 6 km/h for walking it."
            )}
          />
          <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 in cash / card at the counter when picking up."
            )}
          />
        </div>
      </div>
    </section>

    {/* Big CTA */}
    <section className="section-sm">
      <div className="wrap">
        <div className="card dark" style={{padding:"56px 40px", textAlign:"center", border:"1px solid #333", borderRadius:"var(--r-lg)"}}>
          <span className="eyebrow" style={{color:"var(--accent)"}}>{t("Showroom Utrecht","Showroom Utrecht")}</span>
          <h2 className="h-display" style={{fontSize:48, marginTop:14, marginBottom:18}}>{t("Eerst rijden.","Ride first.")} <span className="accent">{t("Dan beslissen.","Then decide.")}</span></h2>
          <p style={{color:"#aaa", maxWidth:520, margin:"0 auto 32px", fontSize:16}}>
            {t("Plan een gratis proefrit in onze showroom of laat je adviseren via WhatsApp.","Book a free test ride in our showroom or get advice via WhatsApp.")}
          </p>
          <div className="gap-12" style={{justifyContent:"center"}}>
            <button className="btn btn-accent btn-lg" onClick={()=>setPage("contact")}>{t("Plan proefrit","Book a test ride")} <Icon name="arrow" size={16}/></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 btn-lg">
              <Icon name="whatsapp" size={16} fill="#06281a"/> {t("WhatsApp advies","WhatsApp support")}
            </a>
          </div>
        </div>
      </div>
    </section>
  </div>
);
};

const SpecPill = ({ icon, k, v }) => (
  <div style={{display:"flex", alignItems:"center", gap:10, padding:"10px 12px", background:"var(--bg)", borderRadius:8, border:"1px solid var(--line)"}}>
    <div style={{width:28, height:28, borderRadius:6, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", flexShrink:0}}>
      <Icon name={icon} size={14}/>
    </div>
    <div style={{minWidth:0, overflow:"hidden"}}>
      <div className="mono" style={{fontSize:9.5, letterSpacing:".12em", color:"var(--ink-mute)"}}>{k}</div>
      <div style={{fontSize:12.5, fontWeight:600, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{v}</div>
    </div>
  </div>
);

const FAQItem = ({q, a, defaultOpen=false}) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className="card" style={{padding:0, overflow:"hidden"}}>
      <button onClick={()=>setOpen(o=>!o)} style={{width:"100%", padding:"18px 24px", display:"flex", alignItems:"center", justifyContent:"space-between", gap:16, textAlign:"left"}}>
        <span style={{fontWeight:600, fontSize:15}}>{q}</span>
        <Icon name="arrowDown" size={16} style={{color:"var(--accent)", flexShrink:0, transform:open?"rotate(180deg)":"rotate(0)", transition:"transform .2s"}}/>
      </button>
      {open && (
        <div style={{padding:"0 24px 20px", color:"var(--ink-dim)", fontSize:14, lineHeight:1.65, borderTop:"1px dashed var(--line)", paddingTop:16}}>{a}</div>
      )}
    </div>
  );
};

window.PageHome = PageHome;
window.SpecPill = SpecPill;
window.FAQItem = FAQItem;
window.CardRating = CardRating;