// ZION ProductGrid — "COLLECTION" with brush header, dark theme, working filters
function ProductGrid({ products, onOpen }) {
  const [filter, setFilter] = React.useState('all');
  const tabs = [
    { key: 'all', label: 'ALL' },
    { key: 'tees', label: 'TEES' },
    { key: 'sweats', label: 'SWEATS' },
    { key: 'sets', label: 'SETS' },
    { key: 'bags', label: 'BAGS' },
  ];
  const shown = filter === 'all' ? products : products.filter(p => p.cat === filter);
  return (
    <section style={{
      color: '#fff', padding: '120px 32px 88px',
      background: '#0A0A0A',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Corner inferno glow — soft, kept well inside so edges never clip hard */}
      <div aria-hidden style={{
        position: 'absolute', top: 40, right: 80, width: 420, height: 420, pointerEvents: 'none',
        background: 'radial-gradient(circle, rgba(247,89,31,0.12) 0%, transparent 60%)',
        filter: 'blur(30px)',
      }} />
      <div aria-hidden style={{
        position: 'absolute', bottom: 120, left: 80, width: 420, height: 420, pointerEvents: 'none',
        background: 'radial-gradient(circle, rgba(247,89,31,0.09) 0%, transparent 60%)',
        filter: 'blur(30px)',
      }} />

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <h2 style={{
          fontFamily: "var(--font-script)", fontStyle: 'italic', textTransform: 'uppercase',
          fontSize: 'clamp(72px, 12vw, 200px)', lineHeight: 0.88, letterSpacing: '0.005em',
          margin: '0 0 12px', color: '#fff', textAlign: 'center',
        }}>COLLECTION</h2>

        {/* Filter tabs */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginBottom: 48 }}>
          {tabs.map(t => (
            <Tab key={t.key} active={filter === t.key} onClick={() => setFilter(t.key)}>{t.label}</Tab>
          ))}
        </div>

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

function Tab({ children, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: 'Poppins', fontWeight: 700, fontSize: 12, letterSpacing: '0.16em',
        textTransform: 'uppercase', cursor: 'pointer',
        color: active ? '#fff' : hover ? '#F7591F' : '#9A9A9A',
        borderBottom: active ? '2px solid #F7591F' : '2px solid transparent',
        paddingBottom: 4,
        textShadow: hover && !active ? '0 0 14px rgba(247,89,31,0.7), 0 0 32px rgba(247,89,31,0.35)' : 'none',
        transition: 'color 160ms, text-shadow 200ms',
      }}>{children}</a>
  );
}

window.ProductGrid = ProductGrid;