// Sunehra — shared primitives across home, collections, product pages. // Exports to window for cross-script use under Babel. const { useState, useEffect, useRef } = React; function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1 }); io.observe(el); return () => io.disconnect(); }, []); return ref; } const Sparkle = ({ size = 12, color = "currentColor" }) => ( ); const Diamond = ({ size = 10, color = "currentColor" }) => ( ); // Editorial moody placeholder — falls back to gradient when no src or src errors. // `imgSize` lets callers hint a target width (px). Smaller thumbnails request smaller payloads. function Ph({ variant = "", cap, tag, children, style, className = "", aspect, src, imgSize = 900, imgPriority = false }) { const cls = `ph ${variant ? "ph--" + variant : ""} ${className}`; const imgUrl = src ? (src.includes("?") ? src : `${src}?w=${imgSize}&q=70&auto=format&fit=crop`) : null; return (

{imgUrl && ( {cap

{ e.currentTarget.style.display = "none"; }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", zIndex: 0, }} /> )} {tag && {tag}} {cap && {cap}} {children}

); } // Central image catalog — Unsplash hotlinks. Centralised so they can be swapped easily. const IMG = { // Hero hero: "https://images.unsplash.com/photo-1610173827043-9db50e0d8ef9", // Categories catRings: "https://images.unsplash.com/photo-1611955167811-4711904bb9f8", catNecklaces: "https://images.unsplash.com/photo-1587271407850-8d438ca9fdf2", catEarrings: "https://images.unsplash.com/photo-1693213085235-ea6deadf8cee", catBangles: "https://images.unsplash.com/photo-1690175867343-2af70ea57537", catMangalsutra: "https://images.unsplash.com/photo-1617633150878-7df1d12a9a57", catNosepins: "https://images.unsplash.com/photo-1542042161784-26ab9e041e89", catAnklets: "https://images.unsplash.com/photo-1664506061150-ffc206b8bfd3", // Featured Vivaha edit featRaniHaar: "https://images.unsplash.com/photo-1600685890506-593fdf55949b", featChandbali: "https://images.unsplash.com/photo-1693212793204-bcea856c75fe", featTikka: "https://images.unsplash.com/photo-1665960213508-48f07086d49c", featKangan: "https://images.unsplash.com/photo-1611598935678-c88dca238fce", featSolitaire: "https://images.unsplash.com/photo-1631982686092-e6561a853187", // Heritage workshop: "https://images.unsplash.com/photo-1623365545467-d0f2c7ecd677", craftHand: "https://images.unsplash.com/photo-1705326454924-f6777522b030", // Materials matGold: "https://images.unsplash.com/photo-1631982690223-8aa4be0a2497", matDiamond: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338", matSilver: "https://images.unsplash.com/photo-1622398925373-3f91b1e275f5", matTemple: "https://images.unsplash.com/photo-1597157639073-69284dc0fdaf", matPlatinum: "https://images.unsplash.com/photo-1603561596973-8166e9e089d1", // Lookbook lookPheras: "https://images.unsplash.com/photo-1727430256509-0f897d6f4765", lookMehendi: "https://images.unsplash.com/photo-1610047614301-13c63f00c032", lookSangeet: "https://images.unsplash.com/photo-1619516388835-2b60acc4049e", lookVidaai: "https://images.unsplash.com/photo-1654764746225-e63f5e90facd", // Collections editorial editorial: "https://images.unsplash.com/photo-1571908599407-cdb918ed83bf", // Product detail gallery (Raagini Polki Rani-Haar — 6 angles) prodFront: "https://images.unsplash.com/photo-1600685890506-593fdf55949b", prodDetail: "https://images.unsplash.com/photo-1671642883395-0ab89c3ac890", prodReverse: "https://images.unsplash.com/photo-1652374968229-a66a1c170c04", prodScale: "https://images.unsplash.com/photo-1610173827043-9db50e0d8ef9", prodPearl: "https://images.unsplash.com/photo-1727430228383-aa1fb59db8bf", prodTrunk: "https://images.unsplash.com/photo-1641699862936-be9f49b1c38d", // Product atelier film atelierFilm: "https://images.unsplash.com/photo-1599071338288-49173359e0fd", }; window.IMG = IMG; // ============================================================================ // Catalogue — shared so the wishlist page can resolve saved ids without // loading collections.jsx. collections.jsx reuses this same array. // ============================================================================ const CATALOG = [ { id: "p1", name: "Raagini Polki Rani-Haar", type: "Necklace · Polki", metal: "22K Gold", v: "gold", occasion: "Bridal", weight: 62.4, isNew: true, best: true, cat: ["necklaces", "bridal"], img: IMG.featRaniHaar }, { id: "p2", name: "Jhilmil Jadau Chandbalis", type: "Earrings · Jadau", metal: "22K Gold", v: "emerald", occasion: "Bridal", weight: 18.2, isNew: true, cat: ["earrings", "bridal"], img: IMG.featChandbali }, { id: "p3", name: "Surya Maang Tikka", type: "Tikka · Temple", metal: "22K Gold", v: "ivory", occasion: "Bridal", weight: 9.8, cat: ["bridal"], img: IMG.featTikka }, { id: "p4", name: "Vamika Solitaire Ring", type: "Ring · GIA Solitaire", metal: "Platinum", v: "", occasion: "Engagement", weight: 4.1, best: true, cat: ["rings", "diamond"], img: IMG.featSolitaire }, { id: "p5", name: "Kalashri Bangle Stack", type: "Bangles · Set of 6", metal: "22K + Kundan", v: "ink", occasion: "Bridal", weight: 88.6, cat: ["bangles", "bridal"], img: IMG.featKangan }, { id: "p6", name: "Meera Temple Necklace", type: "Necklace · Temple", metal: "22K Gold", v: "gold", occasion: "Festive", weight: 54.2, cat: ["necklaces"], img: IMG.matTemple }, { id: "p7", name: "Nayantara Diamond Studs", type: "Earrings · Diamond", metal: "Platinum", v: "", occasion: "Everyday", weight: 2.4, isNew: true, cat: ["earrings", "diamond"], img: "https://images.unsplash.com/photo-1588444650733-d0767b753fc8" }, { id: "p8", name: "Aaradhya Mangalsutra", type: "Mangalsutra · Modern", metal: "18K Gold", v: "ink", occasion: "Bridal", weight: 14.0, cat: ["mangalsutra", "bridal"], img: IMG.catMangalsutra }, { id: "p9", name: "Chandni Polki Choker", type: "Choker · Polki", metal: "22K Gold", v: "emerald", occasion: "Bridal", weight: 41.8, best: true, cat: ["necklaces", "bridal"], img: "https://images.unsplash.com/photo-1671642883395-0ab89c3ac890" }, { id: "p10", name: "Padma Lotus Jhumkas", type: "Earrings · Jhumka", metal: "22K Gold", v: "gold", occasion: "Festive", weight: 22.6, cat: ["earrings"], img: "https://images.unsplash.com/photo-1588444650700-fd887f15a9e7" }, { id: "p11", name: "Anaya Diamond Tennis", type: "Bracelet · Diamond", metal: "Platinum", v: "ivory", occasion: "Everyday", weight: 12.4, cat: ["bangles", "diamond"], img: "https://images.unsplash.com/photo-1679156271456-d6068c543ee7" }, { id: "p12", name: "Riddhi Meena Kada", type: "Bangle · Meenakari", metal: "22K Gold", v: "emerald", occasion: "Festive", weight: 38.2, cat: ["bangles"], img: "https://images.unsplash.com/photo-1655707063513-a08dad26440e" }, { id: "p13", name: "Tara Diamond Halo", type: "Ring · Halo", metal: "Platinum", v: "ivory", occasion: "Engagement", weight: 3.4, isNew: true, cat: ["rings", "diamond"], img: "https://images.unsplash.com/photo-1603561596973-8166e9e089d1" }, { id: "p14", name: "Saanvi Pearl Choker", type: "Necklace · Pearl", metal: "22K + Pearl", v: "ivory", occasion: "Sangeet", weight: 28.0, cat: ["necklaces", "bridal"], img: "https://images.unsplash.com/photo-1652374968229-a66a1c170c04" }, { id: "p15", name: "Avni Temple Jhumka", type: "Earrings · Temple", metal: "22K Gold", v: "gold", occasion: "Festive", weight: 24.4, best: true, cat: ["earrings"], img: "https://images.unsplash.com/photo-1597157639073-69284dc0fdaf" }, { id: "p16", name: "Diya Solitaire Pendant", type: "Pendant · Diamond", metal: "Platinum", v: "", occasion: "Everyday", weight: 1.8, isNew: true, cat: ["necklaces", "diamond"], img: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338" }, ]; const CATALOG_BY_ID = CATALOG.reduce((m, p) => { m[p.id] = p; return m; }, {}); window.CATALOG = CATALOG; window.CATALOG_BY_ID = CATALOG_BY_ID; // ============================================================================ // Wishlist — localStorage-backed, no server. Shared across all pages. // ============================================================================ const WISHLIST_KEY = "sunehra_wishlist_v1"; function getWishlistIds() { try { const v = JSON.parse(localStorage.getItem(WISHLIST_KEY)); return Array.isArray(v) ? v : []; } catch (e) { return []; } } function saveWishlistIds(ids) { try { localStorage.setItem(WISHLIST_KEY, JSON.stringify(ids)); } catch (e) {} // Notify listeners in this tab (storage event only fires across tabs). window.dispatchEvent(new CustomEvent("sunehra-wishlist")); } function toggleWishlistId(id) { const ids = getWishlistIds(); const next = ids.includes(id) ? ids.filter(x => x !== id) : [...ids, id]; saveWishlistIds(next); return next; } // React hook — subscribes to changes from any source. function useWishlist() { const [ids, setIds] = useState(getWishlistIds); useEffect(() => { const h = () => setIds(getWishlistIds()); window.addEventListener("sunehra-wishlist", h); window.addEventListener("storage", h); return () => { window.removeEventListener("sunehra-wishlist", h); window.removeEventListener("storage", h); }; }, []); return { ids, count: ids.length, has: (id) => ids.includes(id), toggle: (id) => setIds(toggleWishlistId(id)), }; } function AnnouncementBar() { const messages = [ "Sunehra Vivaha — the bridal edit of 2026, now in stores", "Complimentary engraving on all 22K gold purchases", "Book a private consultation at our Mumbai atelier", ]; const [i, setI] = useState(0); useEffect(() => { const t = setInterval(() => setI(x => (x + 1) % messages.length), 4200); return () => clearInterval(t); }, []); return (

◈ {messages[i]} ◈

); } function Header({ active }) { const [scrolled, setScrolled] = useState(false); const [mobileNav, setMobileNav] = useState(false); const { count: wishCount } = useWishlist(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); // Lock body scroll while the mobile nav drawer is open. useEffect(() => { const prev = document.body.style.overflow; if (mobileNav) document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [mobileNav]); const nav = [ { label: "Bridal", href: "collections.html?cat=bridal", key: "bridal" }, { label: "Necklaces", href: "collections.html?cat=necklaces", key: "necklaces" }, { label: "Earrings", href: "collections.html?cat=earrings", key: "earrings" }, { label: "Rings", href: "collections.html?cat=rings", key: "rings" }, { label: "Bangles", href: "collections.html?cat=bangles", key: "bangles" }, { label: "Mangalsutra", href: "collections.html?cat=mangalsutra", key: "mangalsutra" }, { label: "Diamonds", href: "collections.html?cat=diamond", key: "diamond" }, { label: "Heritage", href: "about.html", key: "about" }, { label: "Stores", href: "stores.html", key: "stores" }, { label: "Contact", href: "contact.html", key: "contact" }, ]; return (

{/* Left utilities (desktop) / hamburger (mobile) */}

Stores Heritage

EST. 1947 · JAIPUR S U N E H R A JEWELLERS · INDIA

Enquire {wishCount > 0 ? "♥" : "♡"} Saved {wishCount > 0 ? "♥" : "♡"} ({wishCount})

{/* Mobile nav overlay — rendered OUTSIDE

so backdrop-filter on the scrolled header doesn't become its containing block and trap it. */} {mobileNav && (

setMobileNav(false)} style={{ position: "fixed", inset: 0, background: "rgba(31,20,16,.6)", zIndex: 100, }}>

e.stopPropagation()} style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "80%", maxWidth: 320, background: "var(--bg)", padding: "32px 24px", overflowY: "auto", display: "flex", flexDirection: "column", gap: 8, boxShadow: "4px 0 24px rgba(0,0,0,.25)", }}>

EST. 1947 · JAIPUR

S U N E H R A

{nav.map(n => ( {n.label} ))} Care & Hallmark Enquire Book a Viewing →

)} ); } function Footer() { return ( ); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "bridal", "fontpair": "cormorant-manrope" }/*EDITMODE-END*/; function SunehraTweaks() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.documentElement.setAttribute("data-theme", t.theme); document.documentElement.setAttribute("data-fontpair", t.fontpair); }, [t.theme, t.fontpair]); return ( setTweak("theme", v)} /> setTweak("fontpair", v)} /> ); } Object.assign(window, { useReveal, Sparkle, Diamond, Ph, IMG, CATALOG, CATALOG_BY_ID, getWishlistIds, saveWishlistIds, toggleWishlistId, useWishlist, AnnouncementBar, Header, Footer, SunehraTweaks, });