// Sunehra — Collections / Listing page const { useState, useEffect, useMemo } = React; // =============== Catalogue data =============== const CAT_LABEL = { bridal: "The Bridal Edit", necklaces: "Necklaces & Haar", earrings: "Earrings & Jhumka", rings: "Rings & Solitaires", bangles: "Bangles & Kangan", mangalsutra: "Mangalsutra", nosepins: "Nose Pins · Nath", anklets: "Anklets · Payal", diamond: "Diamonds", }; const CAT_SUB = { bridal: "Aabhushan · Vivaha", necklaces: "Aabhushan · Haar", earrings: "Aabhushan · Karna", rings: "Aabhushan · Anguthi", bangles: "Aabhushan · Kangan", mangalsutra: "Aabhushan · Mangal", nosepins: "Aabhushan · Nath", anklets: "Aabhushan · Payal", diamond: "Dhatu · Heera", }; const CAT_BLURB = { bridal: "Twenty-three pieces composed for the seven pheras — rani-haars, jadau chokers, nath, and bangles that travel through generations.", necklaces: "From single-line solitaire chains to weighted rani-haars in polki and meenakari. Wear daily, or wear the day.", earrings: "Chandbalis, jhumkas, ear-cuffs, and studs — for the temple, the office, and the wedding.", rings: "Solitaire engagement bands, anniversary rings, and the everyday gold cocktail.", bangles: "Stacked kangans, single jadau bangles, and meenakari cuffs from Bikaner.", mangalsutra: "Sacred and modern — black bead, gold pendant, with an optional diamond accent.", diamond: "GIA-certified solitaires, halos, and pavé settings from .25 to 3 carats.", }; // Catalogue lives in shared.jsx (window.CATALOG) so the wishlist page can // resolve saved ids too. This page just reuses it. const PRODUCTS = CATALOG; // =============== Filter UI =============== const FILTERS = { metal: ["22K Gold", "18K Gold", "Platinum", "22K + Kundan", "22K + Pearl"], occasion: ["Bridal", "Engagement", "Festive", "Sangeet", "Everyday"], weight: ["Under 20g", "20–50g", "50g+"], craft: ["Polki", "Jadau", "Meenakari", "Temple", "Solitaire"], }; function FilterChip({ label, active, onClick }) { return ( ); } function FilterGroup({ title, options, value, onToggle }) { return (
◇ {title}
{options.map(o => { const checked = value.includes(o); return ( ); })}
); } // =============== Product card =============== function ProductCard({ p, onWish, wished }) { const [hover, setHover] = useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", flexDirection: "column", gap: 14, position: "relative" }}> {/* badges */}
{p.isNew && New} {p.best && Best Seller}
{/* wishlist */} {/* hover overlay */}
QUICK VIEW →
{p.metal.toUpperCase()} · {p.weight}G
{p.name}
{p.type}
); } // =============== Page hero =============== function CatHero({ cat, count }) { const label = CAT_LABEL[cat] || "All Collections"; const sub = CAT_SUB[cat] || "Aabhushan · Catalogue"; const blurb = CAT_BLURB[cat] || "Every piece in the Sunehra atelier, indexed for browsing."; return (
HOME  /  COLLECTIONS  /  {label.toUpperCase()}
◈   {sub}

{label.split(" ").slice(0, -1).join(" ")} {label.split(" ").slice(-1)}

{blurb}

{count} pieces BIS Hallmarked GIA Certified
); } // =============== Toolbar (sort + view) =============== function Toolbar({ active, onChange, sort, setSort, view, setView, total }) { const quick = ["new", "bestsellers", "polki", "diamond", "under-50g", "bridal"]; return (
{quick.map(q => ( onChange(active === q ? null : q)}/> ))}
{total} pieces
); } // =============== Editorial inline block =============== function EditorialBlock() { return (
◇ EDITOR'S NOTE

The polki revival.

Why uncut diamonds are leaving the Mughal court and finding their way back to modern brides — read our editor's note.

Read the journal →
); } // =============== Main app =============== function App() { const params = new URLSearchParams(window.location.search); const cat = params.get("cat") || "bridal"; const wishlist = useWishlist(); const [filters, setFilters] = useState({ metal: [], occasion: [], weight: [], craft: [] }); const [quickFilter, setQuickFilter] = useState(null); const [sort, setSort] = useState("featured"); const [view, setView] = useState(3); const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false); // Lock body scroll while the filter drawer is open on mobile. useEffect(() => { const prev = document.body.style.overflow; if (mobileFiltersOpen) document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [mobileFiltersOpen]); const toggleWish = (id) => wishlist.toggle(id); const toggleFilter = (group, val) => setFilters(f => { const arr = f[group]; return { ...f, [group]: arr.includes(val) ? arr.filter(x => x !== val) : [...arr, val] }; }); const filtered = useMemo(() => { let list = PRODUCTS.filter(p => { if (cat && cat !== "all" && !p.cat.includes(cat)) return false; if (filters.metal.length && !filters.metal.some(m => p.metal.includes(m.split(" ")[0]))) return false; if (filters.occasion.length && !filters.occasion.includes(p.occasion)) return false; if (filters.craft.length && !filters.craft.some(c => p.type.includes(c))) return false; if (filters.weight.length) { const w = p.weight; const ok = filters.weight.some(b => (b === "Under 20g" ? w < 20 : b === "20–50g" ? w >= 20 && w <= 50 : w > 50)); if (!ok) return false; } if (quickFilter === "new" && !p.isNew) return false; if (quickFilter === "bestsellers" && !p.best) return false; if (quickFilter === "polki" && !p.type.includes("Polki") && !p.metal.includes("Kundan")) return false; if (quickFilter === "diamond" && !p.cat.includes("diamond")) return false; if (quickFilter === "under-50g" && p.weight >= 50) return false; if (quickFilter === "bridal" && !p.cat.includes("bridal")) return false; return true; }); if (sort === "new") list = [...list].sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0)); if (sort === "weight-asc") list = [...list].sort((a, b) => a.weight - b.weight); if (sort === "weight-desc") list = [...list].sort((a, b) => b.weight - a.weight); return list; }, [cat, filters, quickFilter, sort]); return (
{/* Mobile filter toggle */} {/* Sidebar */} {/* Grid */}
{/* Active filter pills */} {(Object.values(filters).flat().length > 0 || quickFilter) && (
FILTERED BY: {quickFilter && ( )} {Object.entries(filters).flatMap(([g, vals]) => vals.map(v => ( )) )}
)} {filtered.length === 0 ? (
Nothing in this combination, yet.
Try removing a filter, or commission a custom piece.
) : (
{filtered.slice(0, 6).map(p => ( ))} {filtered.length > 6 && } {filtered.slice(6).map(p => ( ))}
)}
{/* Related categories */}

Continue browsing by craft.

{[ { name: "Polki", desc: "Uncut diamonds", v: "gold", img: IMG.featRaniHaar }, { name: "Jadau", desc: "Setting craft", v: "emerald", img: IMG.craftHand }, { name: "Meenakari", desc: "Enamel work", v: "", img: IMG.featKangan }, { name: "Temple", desc: "South heritage", v: "ink", img: IMG.matTemple }, ].map((c, i) => (
{c.name}
{c.desc}
 ))}
); } ReactDOM.createRoot(document.getElementById("root")).render();