// ProductGrid.jsx — bordered grid that highlights an active filter
function ProductGrid({ products, activeFilter, onOpen }) {
  const filtered = activeFilter === 'All'
    ? products
    : products.filter(p => p.platform === activeFilter);
  return (
    <div id="products" style={{
      maxWidth: 1200, margin: '0 auto', padding: '40px var(--gutter) 96px',
    }}>
      <div className="nn-product-grid" style={{
        gap: 0,
        border: '1px solid var(--border)',
      }}>
        {filtered.map((p) => (
          <div key={p.name} style={{
            borderRight: '1px solid var(--border)',
            borderBottom: '1px solid var(--border)',
            marginRight: -1, marginBottom: -1,
          }}>
            <ProductCard product={p} onOpen={onOpen} />
          </div>
        ))}
        {filtered.length === 0 && (
          <div style={{
            padding: 48, fontSize: 14, color: 'var(--fg-3)',
            textAlign: 'center', gridColumn: '1 / -1',
          }}>
            Nothing here yet — check back soon.
          </div>
        )}
      </div>
    </div>
  );
}
window.ProductGrid = ProductGrid;