/* SMILE ROOM — Web UI kit · tienda (ecommerce) * Catálogo (servicios · packs · productos), carrito deslizante y checkout. * Consume los tokens (styles.css) y los componentes de parts.jsx. * Producto estrella: Blanqueamiento POLUS (Ultrasonido + LED + Halógena). * NOTA: los precios son marcadores de posición — ajústalos en CATALOG. */ const { KBtn, Eyebrow, Rule, SectionHeading, Reveal, useViewport } = window; /* ---- estilos propios de la tienda (badge pulse + slide del carrito) ---- */ const ensureShopStyle = () => { if (typeof document === 'undefined' || document.getElementById('sr-shop-style')) return; const el = document.createElement('style'); el.id = 'sr-shop-style'; el.textContent = ` @keyframes sr-badgepop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}} @keyframes sr-toastin{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}} .sr-cart-badge{animation:sr-badgepop .42s var(--ease-out)} .sr-toast{animation:sr-toastin .4s var(--ease-out)} .sr-drawer-scrim{transition:opacity .35s var(--ease-out)} .sr-drawer-panel{transition:transform .42s var(--ease-out)}`; document.head.appendChild(el); }; const MXN = n => '$' + Number(n).toLocaleString('es-MX') + ' MXN'; /* ---------------------------------- CATÁLOGO ---------------------------------- */ const CATALOG = [ /* —— SERVICIOS —— */ { id: 'blanqueamiento-polus', cat: 'Servicios', name: 'Blanqueamiento POLUS', icon: 'ph-thin ph-sparkle', price: 4500, badge: 'El mejor del mercado', desc: 'Sistema robótico Ultrasonido + LED + Halógena. Aclara tu sonrisa varios tonos en una sesión de ~20 minutos, sin sensibilidad. Premiado 16 años consecutivos por Dental Advisor USA.', }, { id: 'limpieza-tech', cat: 'Servicios', name: 'Limpieza de Alta Tecnología', icon: 'ph-thin ph-drop', price: 850, desc: 'Profilaxis profunda y precisa con equipos de última generación. Una limpieza suave, minuciosa y profundamente efectiva que protege tu salud dental.', }, /* —— PACKS —— */ { id: 'pack-sonrisa', cat: 'Packs', name: 'Pack Sonrisa Completa', icon: 'ph-thin ph-crown-simple', price: 4990, oldPrice: 5350, badge: 'Más vendido', desc: 'Limpieza de Alta Tecnología + Blanqueamiento POLUS en una sola visita. La rutina completa para una sonrisa sana y luminosa.', includes: ['Limpieza de Alta Tecnología', 'Blanqueamiento POLUS · 20 min', 'Valoración profesional previa'], }, { id: 'pack-brillo-casa', cat: 'Packs', name: 'Pack Brillo en Casa', icon: 'ph-thin ph-house-line', price: 5590, oldPrice: 6040, desc: 'Blanqueamiento POLUS + kit de mantenimiento para conservar tu nuevo tono mucho más tiempo.', includes: ['Blanqueamiento POLUS', 'Gel de mantenimiento', 'Cepillo Smile Room'], }, /* —— PRODUCTOS (para llevar a casa) —— */ { id: 'gel-mantenimiento', cat: 'Productos', name: 'Gel de Mantenimiento', icon: 'ph-thin ph-drop-half', price: 650, desc: 'Gel de aclaramiento suave para uso en casa. Prolonga los resultados de tu blanqueamiento con un cuidado diario delicado con el esmalte.', }, { id: 'cepillo', cat: 'Productos', name: 'Cepillo Smile Room', icon: 'ph-thin ph-paint-brush', price: 350, desc: 'Cepillo de cerdas suaves y cuidado premium, diseñado para una limpieza delicada que respeta el esmalte y el brillo de tu sonrisa.', }, { id: 'pluma', cat: 'Productos', name: 'Pluma Blanqueadora', icon: 'ph-thin ph-pen-nib', price: 550, desc: 'Aplicador de precisión para retoques entre sesiones. Ideal para mantener el tono en las zonas más visibles de tu sonrisa.', }, ]; const FILTERS = ['Todo', 'Servicios', 'Packs', 'Productos']; /* ---------------------------------- CARRITO (hook) ---------------------------------- */ const useCart = () => { ensureShopStyle(); const [items, setItems] = React.useState([]); // [{id, qty}] const [open, setOpen] = React.useState(false); const add = (id) => { setItems(prev => { const found = prev.find(i => i.id === id); if (found) return prev.map(i => i.id === id ? { ...i, qty: i.qty + 1 } : i); return [...prev, { id, qty: 1 }]; }); setOpen(true); // mini-cart: muestra el carrito al agregar }; const setQty = (id, qty) => setItems(prev => qty <= 0 ? prev.filter(i => i.id !== id) : prev.map(i => i.id === id ? { ...i, qty } : i)); const remove = (id) => setItems(prev => prev.filter(i => i.id !== id)); const clear = () => setItems([]); const detailed = items.map(i => ({ ...CATALOG.find(p => p.id === i.id), qty: i.qty })); const count = items.reduce((s, i) => s + i.qty, 0); const total = detailed.reduce((s, i) => s + i.price * i.qty, 0); return { items, detailed, count, total, add, setQty, remove, clear, open, setOpen }; }; /* ---------------------------------- TARJETA DE PRODUCTO ---------------------------------- */ const ProductCard = ({ p, onAdd, featured }) => (
{ e.currentTarget.style.boxShadow = 'var(--shadow-lg), var(--ring-hairline)'; e.currentTarget.style.transform = 'translateY(-3px)'; }} onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-sm), var(--ring-hairline)'; e.currentTarget.style.transform = 'none'; }}> {p.badge && ( {p.badge} )}
{p.name}

{p.desc}

{p.includes && ( )}
{p.oldPrice && ( {MXN(p.oldPrice)} )} {MXN(p.price)}
onAdd(p.id)}>Agregar
); /* ---------------------------------- SECCIÓN TIENDA ---------------------------------- */ const Shop = ({ cart }) => { const { isMobile, isTablet } = useViewport(); const [filter, setFilter] = React.useState('Todo'); const list = CATALOG.filter(p => filter === 'Todo' || p.cat === filter); return (
{/* filtros */}
{FILTERS.map(f => ( ))}
{/* grid */}
{list.map((p, k) => ( ))}
); }; /* ---------------------------------- CARRITO DESLIZANTE ---------------------------------- */ const Stepper = ({ qty, onChange }) => (
{qty}
); const stepBtn = { width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--text-strong)', }; const CartDrawer = ({ cart, onCheckout }) => { const { isMobile } = useViewport(); const { open, setOpen, detailed, total, count, setQty } = cart; const close = () => setOpen(false); const W = isMobile ? '100%' : 420; return (
{/* scrim */}
{/* panel */}
); }; /* botón de carrito para el nav (con badge animado) */ const CartButton = ({ cart, light }) => ( ); Object.assign(window, { useCart, Shop, CartDrawer, CartButton, ProductCard, MXN });