// ========================================== // Mística — Shared components // ========================================== const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- Icons ---------- const Icon = ({ name, size = 18, stroke = 1.5 }) => { const paths = { search: <>, bag: <>, heart: , user: <>, menu: <>, close: <>, arrow: <>, arrowSm: <>, plus: <>, minus: <>, check: , truck: <>, shield: <>, sparkle: <>, leaf: , instagram: <>, facebook: , tiktok: , whatsapp: , star: , chevronDown: , chevronRight: , chevronLeft: , cart: <>, eye: <>, flame: , swatch: <>, refresh: <>, }; return ( {paths[name]} ); }; // ---------- Product placeholder (SVG illustration as image stand-in) ---------- const Placeholder = ({ ph, label, className = "" }) => { const style = { "--ph-bg": ph?.bg || "#d9c7af", "--ph-a": ph?.a || "#f0dcc0", "--ph-b": ph?.b || "#9a6f43", }; return (
{label && ( {label} )}
); }; const ProductShape = ({ kind = "bag-tote" }) => { const size = 180; // Simple, abstract product silhouettes — kept geometric on purpose (placeholders for real photography) const shapes = { "bag-tote": ( ), "bag-cross": ( ), "bag-clutch": ( ), "bag-back": ( ), "bag-hobo": ( ), "bag-mini": ( ), "wallet": ( ), "perfume-square": ( M ), "perfume-tall": ( M ), "perfume-round": ( Mística ), }; return shapes[kind] || shapes["bag-tote"]; }; // ---------- Logo ---------- const Logo = ({ palette = "gold", size = "md" }) => { const h = size === "lg" ? 180 : size === "sm" ? 100 : 160; const src = palette === "noir" ? "logos/transparente.jpeg" : "logos/logo.png"; return ( Mística ); }; // ---------- Header ---------- const Header = ({ route, setRoute, cartCount, openCart, openSearch, favoritesCount, palette }) => { const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { setMobileOpen(false); }, [route]); const isOn = (r) => route.name === r ? "nav__link is-active" : "nav__link"; return ( <>
setRoute({ name:"home" })}>
); }; // ---------- Instagram Banner ---------- const InstagramBanner = () => (
Síguenos en Instagram
@mistica_bylc
Nuevas llegadas, looks del día y promos exclusivas para seguidoras
); // ---------- Footer ---------- const Footer = ({ setRoute, palette }) => ( ); // ---------- Product card ---------- const ProductCard = ({ product, onOpen, onAdd, isFav, onToggleFav }) => { const handleFav = (e) => { e.stopPropagation(); onToggleFav(product.id); }; const handleQuick = (e) => { e.stopPropagation(); onAdd(product); }; return (
onOpen(product)}>
{product.img ? {product.name} : } {product.badge && ( {product.badge} )}
{product.category || (product.categoryKey === "bolsos" ? "Bolsos" : "Perfumes")}
{product.name}
{window.formatPrice(product.price)} {product.oldPrice && {window.formatPrice(product.oldPrice)}} {product.oldPrice && ( -{Math.round((1 - product.price / product.oldPrice) * 100)}% )}
); }; // ---------- Cart drawer ---------- const CartDrawer = ({ open, onClose, items, updateQty, removeItem, total, onCheckout, setRoute }) => ( <>
); // ---------- Search overlay ---------- const SearchOverlay = ({ open, onClose, products, onOpenProduct }) => { const [q, setQ] = useState(""); const inputRef = useRef(null); useEffect(() => { if (open) { setTimeout(() => inputRef.current?.focus(), 100); } else { setQ(""); } }, [open]); const results = useMemo(() => { if (!q.trim()) return products.slice(0, 4); const ql = q.toLowerCase(); return products.filter(p => p.name.toLowerCase().includes(ql) || p.sub?.toLowerCase().includes(ql) || p.category?.toLowerCase().includes(ql) ); }, [q, products]); return (
¿Qué buscas hoy?
setQ(e.target.value)} />
{q && results.length === 0 && (

Sin resultados para "{q}"

)} {results.map(p => (
{ onOpenProduct(p); onClose(); }}>
{p.img ? {p.name} : }
{p.name}
{p.sub}
{window.formatPrice(p.price)}
))}
); }; // ---------- Chat Widget (FAQ + WhatsApp) ---------- const FAQ_ITEMS = [ { q: "¿Hacen envíos a todo Colombia?", a: "¡Sí! Enviamos a todo el país. El envío es gratis en pedidos desde $150.000. En ciudades principales llega en 2–3 días hábiles." }, { q: "¿Cómo hago un pedido?", a: "Elige tu producto, selecciona color o talla, agrégalo al carrito y toca 'Finalizar por WhatsApp'. ¡Te acompañamos en cada paso!" }, { q: "¿Aceptan Nequi o transferencia?", a: "¡Claro! Aceptamos Nequi, transferencia bancaria y contraentrega. El pago se coordina directamente con nosotras por WhatsApp." }, { q: "¿Cuánto tarda en llegar mi pedido?", a: "Despachamos en 24 horas hábiles. Ciudades principales: 2–3 días. Municipios: 4–6 días. Te compartimos el número de guía para rastrear." }, { q: "¿Tienen garantía o cambios?", a: "Sí. Tienes 30 días para solicitar un cambio si el producto no cumple tus expectativas. Tu satisfacción es lo primero." }, ]; // step: "intro" | "questions" | number const WhatsAppFab = ({ phone = "573133265915" }) => { const [open, setOpen] = useState(false); const [step, setStep] = useState("intro"); const openWA = () => window.open( `https://wa.me/${phone}?text=${encodeURIComponent("¡Hola! Quisiera más información sobre Mística.")}`, "_blank" ); const toggle = () => { setOpen(o => !o); setStep("intro"); }; return (
{open && (
Mística
Mística
Asistente · En línea
{step === "intro" && ( <>
Hola, soy Mistic, tu asesora personal. ✨
Estoy aquí para ayudarte con todo lo que necesites.
)} {step === "questions" && ( <>
¿Sobre qué te puedo ayudar?
{FAQ_ITEMS.map((item, i) => ( ))}
)} {typeof step === "number" && ( <>
{FAQ_ITEMS[step].q}
{FAQ_ITEMS[step].a}
)}
)}
); }; // ---------- Toast ---------- const Toast = ({ msg, show }) => (
{msg}
); // ---------- Mobile Bottom Navigation ---------- const MobileBottomNav = ({ route, setRoute, cartCount, favoritesCount, openCart }) => ( ); Object.assign(window, { Icon, Placeholder, ProductShape, Logo, Header, Footer, InstagramBanner, ProductCard, CartDrawer, SearchOverlay, WhatsAppFab, Toast, MobileBottomNav, });