// ---- SÉRÈNE — shared components ---------------------------------------
const { useState, useEffect, useRef } = React;
/* ---------- Icons (simple stroke UI glyphs) ---------- */
const Ico = ({ d, size = 19, fill = "none", sw = 1.4, children, vb = 24 }) => (
);
const IconSearch = (p) => ;
const IconBag = (p) => ;
const IconUser = (p) => ;
const IconMenu = (p) => ;
const IconClose = (p) => ;
const IconArrow = (p) => ;
const IconChevron = (p) => ;
const IconMinus = (p) => ;
const IconPlus = (p) => ;
const IconHeart = (p) => ;
const IconCheck = (p) => ;
const IconTruck = (p) => ;
const IconLeaf = (p) => ;
const IconGift = (p) => ;
/* ---------- Image placeholder ---------- */
const Ph = ({ label, tone, ratio = "1 / 1", style = {}, className = "" }) => (
{label}
);
/* ---------- Color swatch ---------- */
const Swatch = ({ tone, active, onClick, title }) => (
);
/* ---------- Qty stepper ---------- */
const Stepper = ({ value, onChange, small }) => (
{value}
);
/* ---------- Product card ---------- */
const ProductCard = ({ p, onOpen, onAdd }) => {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ cursor: "pointer" }} onClick={() => onOpen(p.id)}>
{p.tag && (
{p.tag}
)}
{p.name}
{fmt(p.price)}
{p.catName}
);
};
/* ---------- Section heading ---------- */
const SectionHead = ({ eyebrow, title, action, onAction }) => (
{eyebrow &&
{eyebrow}
}
{title}
{action &&
}
);
Object.assign(window, {
Ph, Swatch, Stepper, ProductCard, SectionHead,
IconSearch, IconBag, IconUser, IconMenu, IconClose, IconArrow, IconChevron,
IconMinus, IconPlus, IconHeart, IconCheck, IconTruck, IconLeaf, IconGift,
});