function ProductCard({ product, onAddToCart, onViewDetail }) {
  const [added, setAdded] = React.useState(false);

  const handleAdd = (e) => {
    e.stopPropagation();
    onAddToCart(cartItemFor(product, defaultVariant(product)), 1);
    setAdded(true);
    setTimeout(() => setAdded(false), 1800);
  };

  return (
    <div onClick={() => onViewDetail(product)} style={{
      background:'#fff', border:'3px solid #111', borderRadius:10,
      cursor:'pointer', overflow:'hidden', transition:'transform 0.2s, box-shadow 0.2s',
      boxShadow:'4px 4px 0 #111',
      fontFamily:"'DM Sans', sans-serif",
    }}
      onMouseEnter={e => { e.currentTarget.style.transform='translateY(-4px)'; e.currentTarget.style.boxShadow='6px 8px 0 #111'; }}
      onMouseLeave={e => { e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow='4px 4px 0 #111'; }}
    >
      {/* Image area */}
      <div style={{ position:'relative', borderBottom:'3px solid #111', background:'#FAF6EE' }}>
        <span style={{ position:'absolute', top:12, left:12, background:'#111', color:'#F5C400', fontSize:11, fontWeight:800, padding:'3px 10px', borderRadius:4, letterSpacing:1, zIndex:1 }}>{product.tag}</span>
        <img src={product.image} alt={`${product.name} ${product.subtitle}`} style={{ width:'100%', height:240, objectFit:'contain', display:'block' }}/>
      </div>
      {/* Info */}
      <div style={{ padding:'20px 20px 16px' }}>
        <h3 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:20, margin:'0 0 2px', color:'#111', letterSpacing:0.3 }}>{product.name}</h3>
        <p style={{ color:'#666', fontSize:14, fontWeight:600, margin:'0 0 12px' }}>{product.subtitle}</p>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontSize:26, fontWeight:900, color:'#111' }}>${product.price.toFixed(2)}</span>
          <button onClick={handleAdd} style={{
            background: added ? '#22c55e' : '#111', color: added ? '#fff' : '#F5C400',
            border:'2px solid #111', borderRadius:6, padding:'8px 16px',
            fontWeight:800, fontSize:13, cursor:'pointer', transition:'all 0.2s',
            whiteSpace:'nowrap',
          }}>
            {added ? '✓ Added' : '+ Add to Cart'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductCard });