// Product detail page
function ProductPage({ p, onNav, onOpen, onAdd }) {
  const [qty, setQty] = useState(1);
  const [thumb, setThumb] = useState(0);
  const b = BADGE_MAP[p.badge];
  const related = PRODUCTS.filter((x) => x.id !== p.id && x.category === p.category).slice(0, 4);
  const fill = related.length < 4 ? PRODUCTS.filter((x) => x.id !== p.id && !related.includes(x)).slice(0, 4 - related.length) : [];
  const recos = [...related, ...fill];

  // Real images from Shopify (primary + secondary). We used to hard-code
  // [0,1,2] thumbnails all pointing at p.image — three dupes. Now we render
  // exactly as many thumbnails as the product actually has images for.
  const images = [p.image, p.imageSecondary].filter(Boolean);
  const activeImage = images[thumb] || p.image;

  return (
    <section className="pdp">
      <div className="wrap">
        <div className="pdp__crumbs">
          <span onClick={() => onNav("home")}>{t("pdp.crumb.home")}</span> / <span onClick={() => onNav("collection")}>{t("pdp.crumb.shop")}</span> / {p.name}
        </div>
        <div className="pdp__grid">
          <div className="pdp__gallery">
            <div className="pdp__main-img" style={!activeImage ? { background: p.media } : undefined}>
              {activeImage && <img className="product-photo" src={activeImage} alt={p.name} />}
              {b && <span className="pcard__badge"><Badge kind={b[0]}>{b[1]}</Badge></span>}
              {!activeImage && <Bottle color={p.bottle} />}
            </div>
            {images.length > 1 && (
              <div className="pdp__thumbs">
                {images.map((src, i) => (
                  <button key={i} className={`pdp__thumb${thumb === i ? " on" : ""}`} onClick={() => setThumb(i)}>
                    <img className="product-photo" src={src} alt="" loading="lazy" />
                  </button>
                ))}
              </div>
            )}
          </div>

          <div>
            {/* Drink type · first Geschmackswelt from Shopify tags (falls
                back to just the type — no dangling separator). */}
            <span className="eyebrow">
              {p.category}
              {(p.geschmack && p.geschmack[0]) ? ` · ${taxLabel("geschmack", p.geschmack[0])}` : (p.character ? ` · ${p.character}` : "")}
            </span>
            <h1>{p.name}</h1>
            <div className="pdp__price">
              <span className="price">{money(p.price)}</span>
              {p.oldPrice && <span className="old">{money(p.oldPrice)}</span>}
              {p.oldPrice && <Badge kind="new">{Math.round((1 - p.price / p.oldPrice) * 100)}% sparen</Badge>}
            </div>
            <p className="pdp__desc">{p.desc}</p>
            <div className="pdp__notes">
              {p.notes.map((n) => <span className="note-chip" key={n}>{n}</span>)}
            </div>
            <div className="pdp__buy">
              <div className="stepper">
                <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={16} /></button>
                <span>{qty}</span>
                <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={16} /></button>
              </div>
              <Button variant="primary" size="lg" onClick={(e) => {
                const media = document.querySelector(".pdp__main-img");
                onAdd(p, qty, media || e.currentTarget);
              }}>
                <Icon name="shopping-bag" size={18} /> {t("pdp.addtocart")} · {money(p.price * qty)}
              </Button>
            </div>
            <dl className="pdp__specs">
              {Object.entries(p.specs).map(([k, v]) => (
                <div className="pdp__spec" key={k}><dt>{k}</dt><dd>{v}</dd></div>
              ))}
            </dl>
            <div className="pdp__trust">
              <span><Icon name="truck" size={17} color="var(--brand)" /> {t("pdp.freefrom")}</span>
              <span><Icon name="leaf" size={17} color="var(--brand)" /> {t("pdp.plasticfree")}</span>
              <span><Icon name="rotate-ccw" size={17} color="var(--brand)" /> {t("pdp.returns")}</span>
            </div>
          </div>
        </div>

        {/* recommendations */}
        <div style={{ marginTop: 80 }}>
          <div className="section__head"><h2>{t("pdp.pairs")}</h2></div>
          <div className="grid grid--4">
            {recos.map((r) => <ProductCard key={r.id} p={r} onOpen={onOpen} onAdd={onAdd} />)}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ProductPage });