// ============================================================ // PRODUCTS INDEX — full filterable catalog // Direction B aesthetic. Sidebar filters + grid/list toggle. // ============================================================ function ProductsIndex({ onNavigate, params }) { const [view, setView] = React.useState('grid'); // grid | table const [cat, setCat] = React.useState(params?.cat ? mapCatSlug(params.cat) : 'all'); const [app, setApp] = React.useState('all'); const [purity, setPurity] = React.useState(99); const [search, setSearch] = React.useState(''); const [sort, setSort] = React.useState('default'); const filtered = PRODUCTS.filter(p => { if (cat !== 'all' && p.category !== cat) return false; if (app !== 'all') { const appName = APPLICATIONS.find(a => a.id === app)?.name || ''; if (!p.market.toLowerCase().includes(appName.toLowerCase().split(' ')[0])) return false; } if (p.silica_pct < purity) return false; if (search && !`${p.name} ${p.sku} ${p.market}`.toLowerCase().includes(search.toLowerCase())) return false; return true; }); const sorted = [...filtered].sort((a, b) => { if (sort === 'purity') return b.silica_pct - a.silica_pct; if (sort === 'iron') return a.iron_ppm - b.iron_ppm; return 0; }); // Pad PRODUCTS for catalog feel — show some duplicates with grade variants const expanded = [ ...sorted, ...sorted.map(p => ({ ...p, sku: p.sku + '-LO', name: p.name + ' (Low-Iron variant)', iron_ppm: Math.max(40, p.iron_ppm - 30) })).slice(0, 4), ...sorted.map(p => ({ ...p, sku: p.sku + '-HD', name: p.name + ' (High-Density variant)' })).slice(0, 4), ]; return (
{/* Sidebar filters */} {/* Results */}
Showing {expanded.length} of {PRODUCTS.length + 8} grades
SORT
{view === 'grid' ? : }
); } function mapCatSlug(slug) { return ({ 'whole-grain': 'Whole Grain', 'ground': 'Ground Silica', 'micronized': 'Micronized', 'proppants': 'Proppant', 'specialty': 'Specialty' })[slug] || 'all'; } function FilterGroup({ label, value, onChange, options }) { return (
{label}
{options.map(([v, l, count]) => ( ))}
); } function ProductGrid({ products, onNavigate }) { return (
{products.map((p, i) => (
onNavigate('product', { sku: p.sku })} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', cursor: 'pointer', transition: 'transform .15s, box-shadow .15s', }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 16px 30px rgba(10,10,10,0.06)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
{p.sku}
{p.category.toUpperCase()}

{p.name}

{p.market}
{p.silica_pct}% SiO₂ {p.mesh} {p.iron_ppm} ppm Fe
))}
); } function ProductTable({ products, onNavigate }) { return (
SKUProductCategoryMarketsMeshSiO₂Iron
{products.map((p, i) => (
onNavigate('product', { sku: p.sku })} style={{ display: 'grid', gridTemplateColumns: '50px 90px 2fr 1.2fr 1.2fr 90px 100px 90px 40px', gap: 14, padding: '14px 18px', borderBottom: i < products.length - 1 ? '1px solid var(--line)' : 'none', alignItems: 'center', cursor: 'pointer', }} onMouseEnter={(e) => e.currentTarget.style.background = 'oklch(0.97 0 0)'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
{p.sku} {p.name} {p.category} {p.market} {p.mesh}
{p.silica_pct}%
{p.iron_ppm} ppm
))}
); } // ============================================================ // PAGE HEADER — shared lockup for non-home pages // ============================================================ function PageHeader({ title, subtitle, breadcrumbs, onNavigate, eyebrow, dark, cover, height }) { if (dark || cover) { return (
{cover && }
{breadcrumbs && ( )} {eyebrow &&
{eyebrow}
}

{title}

{subtitle &&

{subtitle}

}
); } return (
{breadcrumbs && ( )} {eyebrow &&
{eyebrow}
}

{title}

{subtitle &&

{subtitle}

}
); } Object.assign(window, { ProductsIndex, PageHeader });