// Maison Dahab — shared components // Header (mega-menu + mobile drawer), product card, footer, contact FABs, Rise entrance helper. const { useState, useEffect, useRef } = React; // ---- fade-up-once entrance (IntersectionObserver) ---- function Rise({ children, delay = 0, as = "div", className = "", ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let done = false; let io = null; let iv = null; const reveal = () => { if (done) return; done = true; el.classList.add("is-in"); if (io) io.disconnect(); if (iv) clearInterval(iv); window.removeEventListener("scroll", check); window.removeEventListener("resize", check); }; const check = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight || 800; if (r.top < vh * 0.96 && r.bottom > 0) reveal(); }; if ("IntersectionObserver" in window) { io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) reveal(); }); }, { threshold: 0.08 }); io.observe(el); } window.addEventListener("scroll", check, { passive: true }); window.addEventListener("resize", check); const t = setTimeout(check, 80); // initial in-view check iv = setInterval(check, 250); // env-proof fallback (some hosts never fire scroll/IO) return () => { clearTimeout(t); if (io) io.disconnect(); if (iv) clearInterval(iv); window.removeEventListener("scroll", check); window.removeEventListener("resize", check); }; }, []); const Tag = as; return ( {children} ); } // ---- image slot wrapper (custom element) ---- function Slot({ slotId, placeholder, style, className }) { return ( ); } // ---- icons (minimal strokes) ---- const Icon = { bag: ( ), menu: ( ), close: ( ), search: ( ), phone: ( ), wa: ( ), }; // ---- header ---- function Header({ nav, cartCount, onOpenCart, onOpenMenu }) { const [openMega, setOpenMega] = useState(null); // top-level cat id const closeTimer = useRef(null); const enter = (id) => { clearTimeout(closeTimer.current); setOpenMega(id); }; const leave = () => { closeTimer.current = setTimeout(() => setOpenMega(null), 150); }; return (
Maison Dahab Bijouterie — Or 18k & 21k
); } // ---- mobile nav drawer ---- function MobileNav({ nav, onClose }) { const [open, setOpen] = useState(null); const go = (hash) => { onClose(); nav(hash); }; return (
); } // ---- product card ---- function ProductCard({ product, onOpen, onAdd, delay = 0 }) { const cat = DB.category(product.category); return (
onOpen(product.id)}>
{product.attributes.carat}
{product.name} {cat ? cat.name : ""} · {product.attributes.weight}
{FMT_MAD(product.price)}
); } // ---- floating contact ---- function ContactFabs() { return (
{Icon.wa} {Icon.phone}
); } // ---- footer ---- function Footer({ nav }) { return ( ); } Object.assign(window, { Rise, Slot, Icon, Header, MobileNav, ProductCard, ContactFabs, Footer });