// shop.jsx — catalog with live filters function Shop({ lang, openPDP, addToCart, filterPrefill }) { const t = (ar, en) => lang === 'ar' ? ar : en; const [families, setFamilies] = React.useState(new Set(filterPrefill?.family ? [filterPrefill.family] : [])); const [sizes, setSizes] = React.useState(new Set()); const [concs, setConcs] = React.useState(new Set()); const [price, setPrice] = React.useState([200, 1500]); const [sort, setSort] = React.useState('new'); const [q, setQ] = React.useState(''); const toggle = (set, setter, v) => { const next = new Set(set); if (next.has(v)) next.delete(v); else next.add(v); setter(next); }; const filtered = React.useMemo(() => { let r = PRODUCTS.filter(p => { if (families.size && !families.has(p.family)) return false; if (concs.size && !concs.has(p.concentration)) return false; if (sizes.size) { const hasSize = p.sizes.some(s => sizes.has(s.ml)); if (!hasSize) return false; } if (p.price < price[0] || p.price > price[1]) return false; if (q) { const ql = q.toLowerCase(); if (!p.name_ar.includes(q) && !p.name_en.toLowerCase().includes(ql)) return false; } return true; }); if (sort === 'price-asc') r = [...r].sort((a, b) => a.price - b.price); if (sort === 'price-desc') r = [...r].sort((a, b) => b.price - a.price); if (sort === 'rating') r = [...r].sort((a, b) => b.rating - a.rating); if (sort === 'new') r = [...r].sort((a, b) => b.year - a.year); return r; }, [families, sizes, concs, price, sort, q]); const countByFamily = (f) => PRODUCTS.filter(p => p.family === f).length; const concentrations = ['EDT', 'EDP', 'Parfum', 'Extrait']; return (
{t('الكولكشن الكامل', 'The Full Collection')}

{t('كل العطور', 'All Fragrances')}

{filtered.length} {t('من', 'of')} {PRODUCTS.length}
{t('ترتيب', 'Sort')}
{filtered.length === 0 ? (
No match.
{t('جرب توسيع التصفية', 'Try widening the filters.')}
) : (
{filtered.map(p => ( ))}
)}
); } window.Shop = Shop;