/* ═══════════════════════════════════════ ROMAJA — Shared Components ═══════════════════════════════════════ */ /* ─── ERROR BOUNDARY ─── Red de seguridad global: si cualquier componente tira un error inesperado al renderizar, React desmonta toda la app y queda la pantalla en blanco (así es como funciona React, no hay forma de evitarlo salvo esto). Este componente atrapa ese error y muestra una pantalla con un botón para volver al inicio, en vez de blanco. Usa plano (no navigate()) a propósito, porque si el error viene de más arriba en el árbol (ej. los Context de Nav/Carrito) no podemos confiar en que esos hooks sigan funcionando. */ class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.error("Error no capturado:", error, info); } render() { if (this.state.hasError) { return (
Ups, algo salió mal
Ocurrió un error inesperado. Probá volver al inicio.
Ir al Inicio
); } return this.props.children; } } /* ─── THEME ─── */ const T = { bg: "#faf6ef", bgSoft: "#f2ebe0", primary: "#c87d52", primaryDk: "#a8623c", green: "#7a9468", greenBg: "#e4ecdf", dark: "#3a2c1e", mid: "#7a6050", light: "#b89a84", border: "#e5d9cc", card: "#ffffff", topbar: "#c87d52", }; Object.assign(window, { T }); /* ─── LOGO ─── */ const Logo = ({ size = 26, onClick }) => { const { navigate } = useNav(); return (
navigate("/"))} style={{ cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1 }}> Romaja Crochet & Bisutería
); }; /* ─── NAV ─── */ const Navbar = () => { const { navigate, route } = useNav(); const { count } = useCart(); const [menuOpen, setMenuOpen] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); const isMobile = useMobile(); React.useEffect(() => { const h = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", h); return () => window.removeEventListener("scroll", h); }, []); // Close menu on route change React.useEffect(() => { setMenuOpen(false); }, [route]); const links = [ { label: "Inicio", path: "/" }, { label: "Tienda", path: "/tienda" }, { label: "Sobre Mí", path: "/sobre-mi" }, { label: "Contacto", path: "/contacto" }, { label: "FAQ", path: "/faq" }, ]; const isActive = (path) => { if (path === "/") return route === "/" || route === ""; return route.startsWith(path); }; const WaIcon = () => ( ); return ( <> {/* Top bar */}
🌿 Envíos a todo Costa Rica · Coordinamos por WhatsApp
{/* Main nav */} ); }; /* ─── FOOTER ─── */ const Footer = () => { const { navigate } = useNav(); const isMobile = useMobile(); return ( ); }; /* ─── PRODUCT CARD ─── */ const ProductCard = ({ product }) => { const { navigate } = useNav(); const { addItem } = useCart(); const [hovered, setHovered] = React.useState(false); const isMobile = useMobile(); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: T.card, cursor: "pointer", transition: "transform 0.22s, box-shadow 0.22s", transform: hovered ? "translateY(-5px)" : "none", boxShadow: hovered ? "0 14px 36px rgba(58,44,30,0.13)" : "0 2px 10px rgba(58,44,30,0.06)", borderRadius: 2, overflow: "hidden", }}> {/* Image area */}
navigate(`/producto/${product.id}/${slugify(product.name)}`)} style={{ position: "relative", overflow: "hidden", height: 240 }}> {(() => { const img = product.imagen_url || (product.imagenes && product.imagenes[0]); return img ? {product.name} { e.target.style.display = "none"; e.target.nextElementSibling.style.display = "flex"; }} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block", transition: "transform 0.3s", transform: hovered ? "scale(1.03)" : "scale(1)" }} /> : null; })()}
{product.name}
{CATEGORIES[product.category].label}
{product.stock <= 0 ? (
Agotado
) : product.stock <= 5 && (
Últimas {product.stock}
)}
{/* Info */}
{product.sub}
navigate(`/producto/${product.id}/${slugify(product.name)}`)} style={{ fontFamily: "'DM Serif Display', serif", fontSize: 15, color: T.dark, marginBottom: 8, lineHeight: 1.3 }}>{product.name}
{formatPrice(product.price)}
); }; /* ─── BREADCRUMB ─── */ const Breadcrumb = ({ items }) => { const { navigate } = useNav(); return (
{items.map((item, i) => ( {i > 0 && ›} {item.path ? ( navigate(item.path)} style={{ cursor: "pointer", color: i === items.length - 1 ? T.dark : T.primary }}>{item.label} ) : ( {item.label} )} ))}
); }; /* ─── SECTION HEADER ─── */ const SectionHeader = ({ eyebrow, title, center = false }) => (
{eyebrow &&
{eyebrow}
}

{title}

); /* ─── EXPORT ─── */ Object.assign(window, { T, Logo, Navbar, Footer, ProductCard, Breadcrumb, SectionHeader, ErrorBoundary });