/* global React */ const { useState, useEffect, useRef, useMemo, useCallback } = React; // ============ ICONS ============ const Icon = { search: (p = {}) => , user: (p = {}) => , heart: (p = {}) => , heartFilled: (p = {}) => , cart: (p = {}) => , close: (p = {}) => , menu: (p = {}) => , chev: (p = {}) => , chevDown: (p = {}) => , check: (p = {}) => , filter: (p = {}) => , grid: (p = {}) => , list: (p = {}) => , shield: (p = {}) => , truck: (p = {}) => , bolt: (p = {}) => , pin: (p = {}) => , phone: (p = {}) => , mail: (p = {}) => , eye: (p = {}) => , star: (filled, p = {}) => , ig: (p = {}) => , yt: (p = {}) => , fb: (p = {}) => }; // ============ Product imagery (SVG placeholders w/ iconography) ============ // each product gets a categorical glyph on a brand-colored panel const PROD_GLYPHS = { helmet: (c = 'currentColor') => , jacket: (c = 'currentColor') => , glove: (c = 'currentColor') => , knee: (c = 'currentColor') => , back: (c = 'currentColor') => , boot: (c = 'currentColor') => , elbow: (c = 'currentColor') => , collar: (c = 'currentColor') => , filter: (c = 'currentColor') => , brake: (c = 'currentColor') => , tire: (c = 'currentColor') => {Array.from({ length: 12 }).map((_, i) => { const a = i * 30 * Math.PI / 180;const x1 = 120 + Math.cos(a) * 48,y1 = 120 + Math.sin(a) * 48; const x2 = 120 + Math.cos(a) * 78,y2 = 120 + Math.sin(a) * 78; return ; })} , chain: (c = 'currentColor') => {[40, 80, 120, 160].map((x, i) => )} , spark: (c = 'currentColor') => , wrench: (c = 'currentColor') => , jack: (c = 'currentColor') => , stand: (c = 'currentColor') => , torque: (c = 'currentColor') => , bike: (c = 'currentColor') => , scooter: (c = 'currentColor') => , gear: (c = 'currentColor') => {Array.from({ length: 8 }).map((_, i) => { const a = i * 45 * Math.PI / 180;const x = 120 + Math.cos(a) * 60,y = 120 + Math.sin(a) * 60; return ; })} }; // background tint by category (subtle) const PROD_TINT = { cascos: ['#F4F1EA', '#0A0A0A'], chamarras: ['#EAE5DA', '#0A0A0A'], proteccion: ['#EFEAE0', '#0A0A0A'], refacciones: ['#E8E2D4', '#0A0A0A'], herramientas: ['#E5DFD2', '#0A0A0A'], bicicletas: ['#EAE5DA', '#0A0A0A'], patines: ['#EFEAE0', '#0A0A0A'] }; function ProductArt({ product, dark, accent }) { const Glyph = PROD_GLYPHS[product.icon] || PROD_GLYPHS.gear; const tint = PROD_TINT[product.cat] || ['#F4F1EA', '#0A0A0A']; const bg = dark ? '#181818' : tint[0]; const stroke = dark ? '#F4F1EA' : '#0A0A0A'; const ac = accent || '#E60023'; // If real product image exists, render photo with a subtle annotation overlay if (product.image) { return (

{ e.currentTarget.style.display = 'none'; }} /> {/* corner overlay annotations — subtle, garage spec sheet feel */}

{product.id.toUpperCase()} {product.brand}

); } // SVG fallback (no image assigned) return ( ); } // ============ Star rating ============ function Stars({ value, reviews, showCount = true }) { const full = Math.round(value); return ( {[1, 2, 3, 4, 5].map((i) => {Icon.star(i <= full)})} {showCount && {value.toFixed(1)} · {reviews}} ); } // ============ Price utils ============ const fmtMXN = (n) => new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 }).format(n); // ============ Product card ============ function ProductCard({ product, variant = 'default', onQuickView, onAddToCart, onToggleFav, isFav, dark, accent }) { const cartBtnRef = useRef(null); const cls = `pcard ${variant !== 'default' ? variant : ''}`; return (

{product.badge &&

{product.badge === 'sale' && −{Math.round((1 - product.price / product.oldPrice) * 100)}%} {product.badge === 'new' && Nuevo} {product.badge === 'top' && Top}

} onQuickView(product, 'view')} style={{ cursor: 'pointer', display: 'block', height: '100%' }}>

{product.brand} onQuickView(product, 'view')} style={{ cursor: 'pointer' }}>{product.name}

{fmtMXN(product.price)} {product.oldPrice && {fmtMXN(product.oldPrice)}}

); } // Export to window so other Babel scripts see them Object.assign(window, { Icon, ProductArt, ProductCard, Stars, fmtMXN, useState, useEffect, useRef, useMemo, useCallback });