// ZION ProductCard — single tile for PLP (modernized to match site)
// Color circles swap variant images; front image shown in card; quick-view → PDP.
function ProductCard({ product, onOpen }) {
  const [hover, setHover] = React.useState(false);
  const [vi, setVi] = React.useState(0);

  const variants = product.variants || null;
  const mainImg = variants ? variants[vi].img : product.img;
  // Swatch colors: from variants, else product.colors
  const swatches = variants
    ? variants.map(v => v.color)
    : (product.colors || []);

  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'block', userSelect: 'none' }}>
      {/* Photo card — rounded, glows + lifts on hover */}
      <div style={{
        position: 'relative', overflow: 'hidden', borderRadius: 16,
        border: `1px solid ${hover ? 'rgba(247,89,31,0.5)' : 'rgba(255,255,255,0.10)'}`,
        boxShadow: hover ? '0 22px 56px rgba(247,89,31,0.18)' : '0 12px 32px rgba(0,0,0,0.4)',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'border-color 280ms, box-shadow 320ms, transform 320ms cubic-bezier(0.16,1,0.3,1)',
      }}>
        {mainImg ? (
          <div style={{ aspectRatio: '1 / 1.15', width: '100%', overflow: 'hidden', background: product.bg || '#141414' }}>
            <img src={mainImg} alt={product.name} style={{
              width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center top', display: 'block',
              transform: hover ? 'scale(1.04)' : 'scale(1)',
              transition: 'transform 700ms cubic-bezier(0.16,1,0.3,1)',
            }} />
          </div>
        ) : (
          <image-slot
            data-id={`product-${product.id}`}
            data-placeholder={`drop ${product.name.toLowerCase()} photo`}
            data-shape="rect"
            style={{
              aspectRatio: '1 / 1.15', width: '100%', display: 'block',
              background: '#141414',
              '--is-bg': '#141414', '--is-border': 'rgba(255,255,255,0.10)', '--is-fg': 'rgba(255,255,255,0.5)',
            }}
          />
        )}

        {/* warm gradient wash on hover */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'linear-gradient(180deg, transparent 55%, rgba(247,89,31,0.14) 100%)',
          opacity: hover ? 1 : 0, transition: 'opacity 280ms',
        }} />

        {product.tag && (
          <div style={{
            position: 'absolute', top: 14, left: 14, zIndex: 2,
            fontFamily: 'Poppins', fontWeight: 800, fontStyle: 'italic', fontSize: 11,
            letterSpacing: '0.08em', textTransform: 'uppercase', color: '#fff',
            background: product.tag === 'HOT' ? '#F7591F' : 'rgba(0,0,0,0.55)',
            border: '1.5px solid #F7591F',
            padding: '4px 9px 2px', pointerEvents: 'none',
          }}>{product.tag}</div>
        )}

        {/* Quick-view ribbon */}
        <button
          onClick={(e) => { e.stopPropagation(); onOpen(product, vi); }}
          style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            background: '#F7591F', color: '#fff', border: 'none',
            fontFamily: 'Poppins', fontWeight: 800, fontSize: 12, letterSpacing: '0.14em',
            textTransform: 'uppercase', textAlign: 'center', padding: '13px 0',
            cursor: 'pointer',
            transform: hover ? 'translateY(0)' : 'translateY(100%)',
            transition: 'transform 220ms cubic-bezier(0.7,0,0.2,1)',
            boxShadow: '0 -8px 24px rgba(0,0,0,0.3)',
            zIndex: 3,
          }}>QUICK VIEW &nbsp;↗</button>
      </div>

      {/* Meta */}
      <div style={{ marginTop: 14 }}>
        <div onClick={() => onOpen(product, vi)} style={{ cursor: 'pointer' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{
              fontFamily: 'Helvetica Neue, Arial, sans-serif', fontWeight: 700, fontSize: 13,
              letterSpacing: '0.12em', textTransform: 'uppercase', color: '#fff',
            }}>{product.name}</div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#F7591F' }}>${product.price}</div>
          </div>
          <div style={{ fontFamily: 'Poppins', fontWeight: 500, fontSize: 11, color: '#B8B8B8', marginTop: 3, letterSpacing: '0.02em' }}>
            {product.sub}
          </div>
        </div>

        {/* Color swatches — clickable when variants exist */}
        <div style={{ display: 'flex', gap: 7, marginTop: 9 }}>
          {swatches.map((c, i) => {
            const active = variants && i === vi;
            return (
              <button key={c + i}
                onClick={(e) => { e.stopPropagation(); if (variants) setVi(i); }}
                aria-label="colour"
                style={{
                  width: 14, height: 14, padding: 0, borderRadius: '50%',
                  background: c, cursor: variants ? 'pointer' : 'default',
                  border: c.toUpperCase() === '#FFFFFF' || c === '#F7F5F1' ? '1px solid #888' : 'none',
                  outline: active ? '2px solid #F7591F' : 'none', outlineOffset: 2,
                  transition: 'outline 160ms',
                }} />
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.ProductCard = ProductCard;