// Accessoires pagina
const { useState, useEffect, useContext } = React;

const PageAccessories = ({ 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">
      <section style={{padding:"56px 0 40px", background:"var(--paper)", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap">
          <div className="eyebrow" style={{marginBottom:14}}>{t("Accessoires","Accessories")}</div>
          <h1 className="h-display" style={{fontSize:"clamp(36px,5vw,64px)"}}>
            {t("Alles voor je","Everything for your")} <span className="accent">Zyro</span>.
          </h1>
          <p style={{color:"var(--ink-dim)", marginTop:14, maxWidth:640, fontSize:16}}>
            {t(
              "ART-goedgekeurde sloten, helmen, telefoonhouders en onderhouds-essentials. Alleen wat je écht gebruikt — getest in de Nederlandse stad.",
              "ART-approved locks, helmets, phone mounts and maintenance essentials. Only what you actually use — tested in Dutch city streets."
            )}
          </p>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="prod-grid">
            {ACCESSORIES.map(a => {
              const A = Acc[a.icon];
              return (
                <article key={a.id} className="prod-card">
                  <div className="stage" style={{padding:30}}>
                    {A && <A size={140}/>}
                  </div>
                  <div className="body">
                    <div className="mono" style={{fontSize:10.5, letterSpacing:".12em", color:"var(--ink-mute)", textTransform:"uppercase"}}>
                      {t("Accessoire","Accessory")}
                    </div>
                    <h3>{LP(a,"name",lang) || a.name}</h3>
                    <p className="desc">{LP(a,"desc",lang) || a.desc}</p>
                    <div className="price-row">
                      <span className="price">{formatEUR(a.price)}</span>
                    </div>
                    {window.vatLabel && (
                      <div className="mono" style={{fontSize:10.5, color:"var(--ink-mute)", marginTop:-4, marginBottom:8}}>
                        {window.vatLabel(langCtx.lang)}
                      </div>
                    )}
                    <div className="ctas">
                      <button className="btn btn-accent btn-block" onClick={()=>cart.add(a.id)}>
                        <Icon name="cart" size={14}/> {t("Voeg toe aan winkelmand","Add to cart")}
                      </button>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="card" style={{padding:32, display:"flex", justifyContent:"space-between", alignItems:"center", gap:24, flexWrap:"wrap"}}>
            <div>
              <h3 className="h-display" style={{fontSize:24, marginBottom:6}}>{t("Niet zeker wat past op je Zyro?","Not sure what fits your Zyro?")}</h3>
              <p style={{color:"var(--ink-dim)", fontSize:14}}>{t("Stuur ons even een appje via WhatsApp — we denken met je mee.","Send us a WhatsApp message — we'll help you think it through.")}</p>
            </div>
            <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>
      </section>
    </div>
  );
};
window.PageAccessories = PageAccessories;