// Product card — used in grid + featured strips
const Ic = window.Ic;
function ProductCard({ p, onOpen }) {
  return (
    <article style={pcStyles.card} onClick={() => onOpen(p)}>
      <div style={{...pcStyles.media, background: p.img ? "#FAFAFB" : (p.palette && p.palette[0] || "#F2F1F3")}}>
        {p.sale && <span style={pcStyles.sale}>−{p.sale}%</span>}
        {p.badge && <span style={pcStyles.badge}>{p.badge}</span>}
        <span style={pcStyles.wish}><Ic.Heart size={16}/></span>
        {p.img
          ? <img src={p.img} style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }} loading="lazy" decoding="async" width="400" height="400" />
          : <img src={String(p.id||"").startsWith("ipn") || String(p.id||"").startsWith("ips") ? "assets/icon-ipod.svg" : "assets/chrome-orb.svg"} style={pcStyles.img} loading="lazy" decoding="async" width="200" height="200" />
        }
      </div>
      <div style={pcStyles.body}>
        <span style={pcStyles.cat}>{(p.cat||"").toUpperCase()}</span>
        <h3 style={pcStyles.name}>{p.name}</h3>
        <span style={pcStyles.sub}>{p.sub}</span>
        <div style={pcStyles.priceRow}>
          <span style={pcStyles.price}>₮ {p.price.toLocaleString()}</span>
          {p.was && <span style={pcStyles.was}>₮ {p.was.toLocaleString()}</span>}
        </div>
        {p.tagline && <p style={pcStyles.tagline}>{p.tagline}</p>}
      </div>
    </article>
  );
}

const pcStyles = {
  card: { background:"#FAFAFB", border:"1px solid #E8E7E9", borderRadius:16, overflow:"hidden", cursor:"pointer", display:"flex", flexDirection:"column", transition:"transform 220ms cubic-bezier(.22,.61,.36,1)" },
  media: { position:"relative", aspectRatio:"1/1", display:"flex", alignItems:"center", justifyContent:"center", overflow:"hidden" },
  img: { width:"58%", height:"58%", objectFit:"contain", transition:"transform 420ms ease" },
  sale: { position:"absolute", top:12, left:12, background:"#FF6A30", color:"#fff", padding:"5px 10px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.15em", fontWeight:700, zIndex:2 },
  badge: { position:"absolute", top:12, left:12, background:"#0E0D11", color:"#fff", padding:"5px 10px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.15em", fontWeight:700, zIndex:2 },
  wish: { position:"absolute", top:10, right:10, width:32, height:32, background:"rgba(255,255,255,0.85)", borderRadius:999, display:"flex", alignItems:"center", justifyContent:"center", color:"#0E0D11", cursor:"pointer", zIndex:2 },
  body: { padding:"14px 16px 16px" },
  cat: { fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", color:"#8A8990" },
  name: { margin:"4px 0 0", fontFamily:"Inter, sans-serif", fontWeight:700, fontSize:16, color:"#0E0D11", letterSpacing:"-0.01em" },
  sub: { fontFamily:"Inter, sans-serif", fontSize:13, color:"#4A4852" },
  priceRow: { marginTop:10, display:"flex", gap:8, alignItems:"baseline" },
  price: { fontFamily:"Inter, sans-serif", fontWeight:800, fontSize:17, color:"#0E0D11" },
  was: { fontFamily:"Inter, sans-serif", fontSize:10, color:"#8A8990", textDecoration:"line-through" },
  tagline: { margin:"6px 0 0", fontFamily:"Inter, sans-serif", fontStyle:"italic", fontSize:12, color:"#8A8990", lineHeight:1.4 },
  swRow: { marginTop:10, display:"flex", gap:6, alignItems:"center" },
  sw: { width:16, height:16, borderRadius:999, border:"1px solid rgba(0,0,0,0.08)" },
};

window.ProductCard = ProductCard;