/* Reusable atoms: ProductCard, CategoryCard, Stars, Toast, QuickView, ReviewCard, BlogCard, SectionTitle, FloralAccents */ const Stars = ({ value = 5, size = 14 }) => { const full = Math.round(value); return ( {[0,1,2,3,4].map((i) => ( ))} ); }; const SectionTitle = ({ eyebrow, title, sub, center, dark }) => (
{eyebrow &&
{eyebrow}
}

{sub &&

{sub}

}

); const FloralAccent = ({ style, color = "#E84DA3", size = 100 }) => ( ); const Tag = ({ tag }) => { if (!tag) return null; const map = { new: { cls: "badge--new", label: "Nuevo" }, sale: { cls: "badge--sale", label: "Promoción" }, top: { cls: "badge--top", label: "Más vendido" }, rec: { cls: "badge--rec", label: "Recomendado" } }; const t = map[tag]; if (!t) return null; return {t.label}; }; const ProductCard = ({ product, onQuick }) => { const { addToCart, setRoute } = useStore(); const stock = stockState(product.stock); const out = stock.kind === "out"; const wa = waLink(`Hola, quiero consultar por ${product.name}.`); return (
setRoute("product", { id: product.id })}> {product.name} e.currentTarget.style.transform = "scale(1.06)"} onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"} />
{product.oldPrice && product.tag !== "sale" && }
{CATEGORIES.find((c) => c.id === product.category)?.name} {stock.label}

setRoute("product", { id: product.id })}>{product.name}

({product.reviews})
{fmtGs(product.price)} {product.oldPrice && {fmtGs(product.oldPrice)}}
{out ? ( Consultar ) : ( )}
); }; const CategoryCard = ({ cat, onClick }) => (
{cat.name} e.currentTarget.style.transform = "scale(1.05)"} onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"} />

{cat.name}

{cat.desc}

Ver productos →
); const ReviewCard = ({ r }) => (

"{r.text}"

{r.name.split(" ").map((s) => s[0]).join("").slice(0,2)}
{r.name}
{r.product} · vía {r.channel}
); const BlogCard = ({ a }) => (
{a.title}
{a.cat} · {a.date} · {a.read} lectura

{a.title}

{a.excerpt}

Leer artículo →
); const Toast = () => { const { toast, setRoute } = useStore(); if (!toast) return null; return (
{toast.msg} {toast.to && ( )}
); }; const QuickView = () => { const { quickView, setQuickView, addToCart } = useStore(); if (!quickView) return null; const p = quickView; const stock = stockState(p.stock); const out = stock.kind === "out"; return (
setQuickView(null)}>
e.stopPropagation()}>
{p.name}
{CATEGORIES.find((c) => c.id === p.category)?.name}

{p.name}

({p.reviews})
{fmtGs(p.price)} {p.oldPrice && {fmtGs(p.oldPrice)}}
{stock.label}

{p.desc}

{out ? ( Consultar disponibilidad ) : ( )}
); }; const DNSelect = ({ value, onChange, children, style }) => { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); const options = React.Children.map(children, (c) => ({ value: c.props.value, label: c.props.children })); const selected = options.find((o) => String(o.value) === String(value)) || options[0]; React.useEffect(() => { const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); const pick = (opt) => { onChange({ target: { value: opt.value } }); setOpen(false); }; return (
{open && (
{options.map((opt) => { const isSel = String(opt.value) === String(value); return (
pick(opt)} style={{ padding: "10px 14px", cursor: "pointer", fontSize: 14, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "space-between", color: isSel ? "var(--c-primary-deep)" : "var(--c-ink)", fontWeight: isSel ? 600 : 400, transition: "background .12s" }} onMouseEnter={(e) => { e.currentTarget.style.background = "var(--c-rose-50)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}> {opt.label} {isSel && ( )}
); })}
)}
); }; Object.assign(window, { Stars, SectionTitle, FloralAccent, Tag, ProductCard, CategoryCard, ReviewCard, BlogCard, Toast, QuickView, DNSelect });