/* global React */ // ── icons ──────────────────────────────────────────────────────────── const Icon = ({ name, size = 16 }) => { const paths = { arrowSm: <> }; return ( {paths[name]} ); }; // ── header ─────────────────────────────────────────────────────────── const Header = ({ route, setRoute }) => { const link = (id, label) => {e.preventDefault();setRoute(id);}} href={`#${id}`}>{label}; return (
{e.preventDefault();setRoute("shop");}} href="#shop">
Sparkle ’n’ Shine
Handmade Jewelry
); }; // ── footer ─────────────────────────────────────────────────────────── const Footer = ({ setRoute }) => ; // ── product card (photo · name · description · price) ───────────────── const ProductCard = ({ p }) =>
{p.name}
{p.cat}

{p.name}

{p.desc}

${p.price} {p.mat}
; // ── hero photo fader (decorative side images) ───────────────────────── const HERO_POS = ["hf-1", "hf-2", "hf-3", "hf-4", "hf-5", "hf-6"]; const HeroFrame = ({ images, pos, delay, startIdx }) => { const [idx, setIdx] = React.useState(startIdx); const [on, setOn] = React.useState(false); React.useEffect(() => { let tFade, tSwap, tStart; const cycle = () => { setOn(true); // fade in tFade = setTimeout(() => { setOn(false); // fade out tSwap = setTimeout(() => { setIdx((i) => (i + 1 + Math.floor(Math.random() * (images.length - 1))) % images.length); cycle(); }, 1700); // stay hidden, then swap }, 3200 + Math.random() * 2800); // visible duration }; tStart = setTimeout(cycle, delay); return () => {clearTimeout(tStart);clearTimeout(tFade);clearTimeout(tSwap);}; }, []); return ( ); }; const HeroFader = ({ products }) => ; Object.assign(window, { Icon, Header, Footer, ProductCard, HeroFader });