// ProductCard
const BADGE_MAP = {
  neu: ["new", "Neu"], beliebt: ["best", "Beliebt"],
  limitiert: ["limited", "Limitiert"], ausverkauft: ["soldout", "Ausverkauft"],
};
function ProductCard({ p, onOpen, onAdd }) {
  const b = BADGE_MAP[p.badge];
  return (
    <article className="pcard" onClick={() => onOpen(p)}>
      <div className="pcard__media" style={!p.image ? { background: p.media } : undefined}>
        {/* Optional secondary photo, stacked underneath. On hover the primary
            fades out and reveals this one. Only rendered when Shopify has a
            second image for the product. */}
        {p.image && p.imageSecondary && (
          <img className="product-photo pcard__photo-alt" src={p.imageSecondary} alt="" loading="lazy" decoding="async" />
        )}
        {p.image && <img className="product-photo pcard__photo" src={p.image} alt={p.name} loading="lazy" decoding="async" />}
        {b && <span className="pcard__badge"><Badge kind={b[0]}>{b[1]}</Badge></span>}
        <button className="pcard__fav" aria-label="Merken" onClick={(e) => e.stopPropagation()}>
          <Icon name="heart" size={17} />
        </button>
        {!p.image && <Bottle color={p.bottle} />}
      </div>
      <div className="pcard__body">
        {/* Drink type · first Geschmackswelt (no dangling separator when
            the product has neither tags nor a character line). */}
        <span className="eyebrow">
          {p.category}
          {(p.geschmack && p.geschmack[0]) ? ` · ${taxLabel("geschmack", p.geschmack[0])}` : (p.character ? ` · ${p.character}` : "")}
        </span>
        <h3 className="pcard__name">{p.name}</h3>
        <p className="pcard__tag">{p.tagline}</p>
        <div className="pcard__foot">
          <span className="price">{money(p.price)}</span>
          <Button variant="secondary" size="sm" onClick={(e) => {
            e.stopPropagation();
            const card  = e.currentTarget.closest(".pcard");
            const media = card && card.querySelector(".pcard__media");
            onAdd(p, 1, media || e.currentTarget);
          }}>Dazu</Button>
        </div>
      </div>
    </article>
  );
}
Object.assign(window, { ProductCard, BADGE_MAP });