function ProductCard({ product, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: 'var(--wht)', border: '1px solid var(--blk)',
      cursor: 'pointer', display: 'flex', flexDirection: 'column',
      transition: 'transform 120ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 120ms',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-2px,-2px)'; e.currentTarget.style.boxShadow = '4px 4px 0 0 var(--blk)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <div style={{ position: 'relative' }}>
        <ProductImage product={product} size="md" />
        {product.badge && (
          <span style={{
            position: 'absolute', top: 12, left: 12,
            padding: '4px 9px', background: 'var(--blk)', color: 'var(--wht)',
            fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
            textTransform: 'uppercase', borderRadius: 2,
          }}>{product.badge}</span>
        )}
      </div>
      <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.05,
          textTransform: 'uppercase', letterSpacing: '-0.01em', color: 'var(--blk)',
        }}>{product.name} — {product.color}</div>
        <div style={{ fontSize: 13, color: 'var(--fg-3)' }}>{product.blurb.split('.')[0]}.</div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginTop: 8,
        }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 14 }}>${product.price}</span>
          <span style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {product.sizes.length === 1 ? product.sizes[0] : `${product.sizes.length} sizes`}
          </span>
        </div>
      </div>
    </div>
  );
}

function ProductGrid({ products, filter, setFilter, onSelect }) {
  const cats = ['All', 'Tees', 'Hoodies', 'Gear'];
  const filtered = filter && filter !== 'All' ? products.filter(p => p.category === filter) : products;
  return (
    <section style={{ padding: '56px 48px 96px', background: 'var(--wht)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 6 }}>SHOP / EVERYTHING</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 56, margin: 0,
            textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.95,
          }}>The whole inventory.</h2>
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-3)' }}>{filtered.length} {filtered.length === 1 ? 'item' : 'items'}</div>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 32, borderBottom: '1px solid var(--blk)', paddingBottom: 16 }}>
        {cats.map(c => (
          <button key={c} onClick={() => setFilter(c)} style={{
            padding: '8px 14px', borderRadius: 999, cursor: 'pointer',
            fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            background: (filter === c || (!filter && c === 'All')) ? 'var(--blk)' : 'transparent',
            color: (filter === c || (!filter && c === 'All')) ? 'var(--wht)' : 'var(--blk)',
            border: '1.5px solid var(--blk)',
          }}>{c}</button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {filtered.map(p => (
          <ProductCard key={p.id} product={p} onClick={() => onSelect(p)} />
        ))}
      </div>
    </section>
  );
}

window.ProductCard = ProductCard;
window.ProductGrid = ProductGrid;