const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ============== Utility hooks ============== */ function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; // If IntersectionObserver isn't available, reveal immediately so content // is never stuck invisible. if (typeof IntersectionObserver === "undefined") { el.classList.add("in"); return; } const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting || e.intersectionRatio > 0) { e.target.classList.add("in"); io.unobserve(e.target); } }), // threshold 0 + generous rootMargin so sections taller than the mobile // viewport (where 12% may never be visible at once) still reveal as // soon as any pixel enters — or even slightly before. { threshold: 0, rootMargin: "200px 0px" } ); io.observe(el); // Safety net: if for any reason the observer never fires (iOS Safari // sometimes skips initial callbacks until the next paint/orientation // change), force-reveal after a short delay. const fallback = setTimeout(() => { if (el && !el.classList.contains("in")) el.classList.add("in"); }, 1200); return () => { io.disconnect(); clearTimeout(fallback); }; }, []); return ref; } function useScrollY() { const [y, setY] = useState(0); useEffect(() => { const onScroll = () => setY(window.scrollY); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return y; } /* Mobile breakpoint: ≤720px = phones, ≤1024px = tablet (single column). */ function useIsMobile(breakpoint = 720) { const [m, setM] = useState(() => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false ); useEffect(() => { const onResize = () => setM(window.innerWidth <= breakpoint); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, [breakpoint]); return m; } window.useIsMobile = useIsMobile; /* ============== Painting placeholder ============== */ function Painting({ p, aspect = "4/5", framed = false, tag = true, className = "", style = {}, imageIndex = 0, fit = "cover" }) { const img = p.images && p.images[imageIndex]; // fit modes: // "cover" → background-image with cover crop, fixed `aspect` box (tiles, grids) // "contain" → fixed `aspect` box, image letterboxed inside on paper bg // "natural" → no forced aspect; the image controls the rendered shape // For uploaded images we honour the requested fit. The "natural" mode is // what the artwork detail page uses so a landscape painting stays // landscape, a portrait stays portrait, etc. if (img && fit !== "cover") { if (fit === "natural") { if (framed) { return (
{p.title} {tag &&
{p.title}
}
); } return (
{p.title} {tag &&
{p.title}
}
); } if (fit === "contain") { if (framed) { return (
{p.title} {tag &&
{p.title}
}
); } return (
{p.title} {tag &&
{p.title}
}
); } } // Default cropped-cover / gradient placeholder behaviour. const bgImage = img ? `url("${img}")` : null; const bgStyle = bgImage ? { backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", aspectRatio: aspect } : { background: p.grad, aspectRatio: aspect }; if (framed) { return (
{tag &&
{p.title}
}
); } return (
{tag &&
{p.title}
}
); } /* ============== Icons (minimal line) ============== */ const Icon = { Search: (p) => , Bag: (p) => , Menu: (p) => , Close: (p) => , ArrowR: (p) => , ArrowL: (p) => , ArrowDown: (p) => , Plus: (p) => , Minus: (p) => , Heart: (p) => , Check: (p) => , Zoom: (p) => , Star: (p) => , Leaf: (p) => , Brush: (p) => }; /* ============== Nav ============== */ function Nav({ route, navigate, cartCount, openCart, openMenu }) { const y = useScrollY(); const scrolled = y > 40; const items = [ ["Home", "home"], ["Gallery", "gallery"], ["About", "about"], ["Collector", "collector"]]; return (
navigate("home")} style={{ cursor: "pointer", textAlign: "center", display: "block" }}>
LARISSA
Fine Art · Ontario
Search
); } function MenuPanel({ onClose, navigate }) { const items = [ ["Home", "home"], ["The Gallery", "gallery"], ["About Larissa", "about"], ["Collector Experience", "collector"]]; // Lock page scroll while the menu is open so the underlying page can't // peek through if a stacking-context quirk renders the panel translucent. useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, []); return (
); } /* ============== Footer ============== */ function Footer({ navigate }) { return ( ); } /* ============== Cart Drawer ============== */ function CartDrawer({ open, onClose, items, removeItem, navigate }) { const total = items.reduce((s, i) => s + i.price, 0); if (!open) return null; return (
); } Object.assign(window, { useReveal, useScrollY, Painting, Icon, Nav, Footer, CartDrawer });