/* ============ Category page ============ */ function CategoryPage({ store, categoryId, navigate }) { const cat = store.categories.find(c => c.id === categoryId) || store.categories[0]; const all = store.products.filter(p => p.category === cat.id); const [sort, setSort] = useState("featured"); const [priceMax, setPriceMax] = useState(2000); const [materials, setMaterials] = useState(() => new Set()); // vacío = sin filtro (todos) const [size, setSize] = useState(null); // null = sin filtro // Filters: open by default on desktop, closed on mobile. const [filtersOpen, setFiltersOpen] = useState(() => typeof window === "undefined" ? true : window.innerWidth >= 900 ); // Lock body scroll when the mobile filter drawer is open useEffect(() => { if (typeof window === "undefined") return; const isMobile = window.innerWidth < 900; if (filtersOpen && isMobile) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; } }, [filtersOpen]); // Reset filters when switching to a different category useEffect(() => { setMaterials(new Set()); setSize(null); setPriceMax(2000); setSort("featured"); }, [cat.id]); function toggleMaterial(m) { setMaterials(prev => { const next = new Set(prev); if (next.has(m)) next.delete(m); else next.add(m); return next; }); } // Show material options based on what actually exists in this category const materialOptions = useMemo(() => { const set = new Set(); all.forEach(p => { const m = (p.material || "").toLowerCase(); if (m.includes("oro")) set.add("Oro"); if (m.includes("plata")) set.add("Plata"); }); return Array.from(set); }, [all]); // Show size options that exist in this category const sizes = useMemo(() => { const set = new Set(); all.forEach(p => (p.sizes || []).forEach(s => set.add(s))); return Array.from(set); }, [all]); const filtered = useMemo(() => { let list = all.filter(p => p.price <= priceMax); if (materials.size > 0) { list = list.filter(p => { const m = (p.material || "").toLowerCase(); // OR across selected materials if (materials.has("Oro") && m.includes("oro")) return true; if (materials.has("Plata") && m.includes("plata")) return true; return false; }); } if (size) { list = list.filter(p => Array.isArray(p.sizes) && p.sizes.includes(size)); } if (sort === "asc") list = [...list].sort((a,b)=>a.price-b.price); if (sort === "desc") list = [...list].sort((a,b)=>b.price-a.price); if (sort === "name") list = [...list].sort((a,b)=>a.name.localeCompare(b.name)); return list; }, [all, sort, priceMax, materials, size]); // Always show only products that belong to this category — no padding. const showSet = filtered; return (
{/* Hero header */}
navigate("/")} style={{ cursor: "pointer" }}>Inicio / {cat.name}

{cat.name}

{cat.tagline && (

{cat.tagline}

)}
{/* Toolbar */}
{filtered.length} piezas
{/* Body */}
{filtersOpen && (
setFiltersOpen(false)}/> )} {filtersOpen && ( )} {showSet.length > 0 ? (
{showSet.map(p => ( navigate("/p/"+p.id)}/> ))}
) : (
Sin piezas todavía
{all.length === 0 ? "Aún no hay piezas en esta categoría." : "Ninguna pieza coincide con los filtros."}
{all.length > 0 && ( )}
)}
); } function FilterGroup({ title, children, hideBorder }) { const [open, setOpen] = useState(true); return (
{open &&
{children}
}
); } window.CategoryPage = CategoryPage;