// Shared components for Artesanías Chepe const { useState, useEffect, useRef, useCallback, useMemo } = React; // ----- Currency ----- const formatMXN = (n) => "$" + n.toLocaleString("es-MX", { maximumFractionDigits: 0 }); // ----- Logo (proxy to Lockup system) ----- const Logo = ({ size = 48, light = false, orientation = "stacked", variant = "henequen", showTagline = true }) => { return ( ); }; // ----- Top Bar ----- const TopBar = ({ onMenu, onCart, cartCount, onLogo, scrolled }) => (
); // ----- Drawer Menu ----- const DrawerMenu = ({ open, onClose, onNav, page }) => { const drawerRef = useRef(null); const items = [ { id: "home", label: "Inicio" }, { id: "catalog", label: "Catálogo" }, { id: "projects", label: "Proyectos comerciales" }, { id: "wholesale", label: "Mayoreo" }, { id: "about", label: "Sobre Chepe" }, { id: "brand", label: "Marca · Identidad" }, { id: "contact", label: "Contacto" }, ]; // Esc + focus trap useEffect(() => { const el = drawerRef.current; if (!el) return; if (!open) { el.setAttribute("inert", ""); el.setAttribute("aria-hidden", "true"); return; } el.removeAttribute("inert"); el.setAttribute("aria-hidden", "false"); const FOCUSABLE = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; const focusable = [...el.querySelectorAll(FOCUSABLE)]; if (focusable.length) focusable[0].focus(); const onKeyDown = (e) => { if (e.key === "Escape") { onClose(); return; } if (e.key !== "Tab" || !focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [open, onClose]); return ( {open && (
)} ); }; // ----- Cart Drawer ----- const CartDrawer = ({ open, onClose, items, onChangeQty, onRemove, onCheckout, onContinue }) => { const drawerRef = useRef(null); const subtotal = items.reduce((a, it) => a + it.price * it.qty, 0); // Esc + focus trap useEffect(() => { const el = drawerRef.current; if (!el) return; if (!open) { el.setAttribute("inert", ""); el.setAttribute("aria-hidden", "true"); return; } el.removeAttribute("inert"); el.setAttribute("aria-hidden", "false"); const FOCUSABLE = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; const focusable = [...el.querySelectorAll(FOCUSABLE)]; if (focusable.length) focusable[0].focus(); const onKeyDown = (e) => { if (e.key === "Escape") { onClose(); return; } if (e.key !== "Tab" || !focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [open, onClose]); return ( {open && (
)} ); }; // ----- Footer ----- const Footer = ({ onNav }) => (
Tienda
{[["catalog","Catálogo"],["projects","Proyectos"],["wholesale","Mayoreo"]].map(([id,l]) => ( ))}
Casa
{[["about","Historia"],["contact","Contacto"],["contact","WhatsApp"]].map(([id,l],i) => ( ))}
{[ { n: "ig", label: "Instagram" }, { n: "fb", label: "Facebook" }, { n: "pin", label: "Pinterest" }, { n: "wa", label: "WhatsApp" }, ].map(({ n, label }) => ( ))}
Calle 60 × 41, Centro Histórico · Mérida, Yuc.
Lun – Sáb · 10:00 – 19:00
© 2026 Artesanías Chepe · Hecho a mano en Yucatán
); // ----- Section header ----- const SectionHead = ({ eyebrow, title, action, onAction }) => (
{eyebrow &&
{eyebrow}
}

{title}

{action && ( )}
); // ----- Product Card ----- const ProductCard = ({ product, onClick, onAdd, compact }) => { const images = product.images || []; const hasImages = images.length > 0; const [activeImg, setActiveImg] = useState(0); const touchStartX = useRef(null); const didSwipe = useRef(false); const onTouchStart = (e) => { touchStartX.current = e.touches[0].clientX; didSwipe.current = false; }; const onTouchEnd = (e) => { if (touchStartX.current === null || images.length <= 1) return; const diff = touchStartX.current - e.changedTouches[0].clientX; if (Math.abs(diff) > 40) { didSwipe.current = true; if (diff > 0) setActiveImg(i => Math.min(i + 1, images.length - 1)); else setActiveImg(i => Math.max(i - 1, 0)); } touchStartX.current = null; }; const handleClick = () => { if (!didSwipe.current) onClick(product); }; return (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(product); } }} tabIndex={0} role="article" aria-label={product.name} className="fade-up" style={{ cursor: "pointer", width: compact ? 240 : "100%", outline: "none" }} >
{/* Imagen real o placeholder */} {hasImages ? ( {product.name} ) : (
{product.placeholderLabel}
)} {/* Badge */} {product.badge && ( {product.badge} )} {/* Botón agregar */} {/* Dots estilo Instagram */} {images.length > 1 && ( )}

{product.name}

{formatMXN(product.price)}

{product.materials[0]}

); }; // ----- Marquee ----- const Marquee = ({ items, speed = 32 }) => ( ); window.formatMXN = formatMXN; window.Logo = Logo; window.TopBar = TopBar; window.DrawerMenu = DrawerMenu; window.CartDrawer = CartDrawer; window.Footer = Footer; window.SectionHead= SectionHead; window.ProductCard= ProductCard; window.Marquee = Marquee;