/* Shared UI primitives for CiaoItalia prototype */ const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; // ===================================================== // App context: route, device, theme, cart // ===================================================== const AppCtx = createContext(null); const useApp = () => useContext(AppCtx); function AppProvider({ children }) { const [route, setRoute] = useState('home'); const [routeParams, setRouteParams] = useState({}); const [cartOpen, setCartOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [cart, setCart] = useState([ { id: 'agv-pista-gp-rr', name: 'AGV Pista GP RR', variant: 'Mono Carbon · M', price: 34990, qty: 1, sku: 'AGV-PGP-CB-M' }, { id: 'dainese-racing-4', name: 'Dainese Racing 4', variant: 'Negro/Rojo · 52', price: 18490, qty: 1, sku: 'DAI-RC4-BR-52' }, ]); const go = (r, params = {}) => { setRoute(r); setRouteParams(params); window.scrollTo(0, 0); }; const addToCart = (item) => setCart(c => { const ex = c.find(x => x.id === item.id && x.variant === item.variant); if (ex) return c.map(x => x === ex ? { ...x, qty: x.qty + 1 } : x); return [...c, { ...item, qty: 1 }]; }); const removeFromCart = (id, variant) => setCart(c => c.filter(x => !(x.id === id && x.variant === variant))); const updateQty = (id, variant, qty) => setCart(c => c.map(x => (x.id === id && x.variant === variant) ? { ...x, qty: Math.max(1, qty) } : x)); return ( {children} ); } // ===================================================== // Logo (recreates the ciao italia sailboat mark, original) // ===================================================== function Logo({ size = 24, mono = false, wordmark = true }) { const gr = mono ? 'currentColor' : 'var(--it-green)'; const rd = mono ? 'currentColor' : 'var(--it-red)'; const ink = 'currentColor'; return (
{/* three sails — abstract boat silhouette */} {wordmark && ( ciao italia )}
); } // ===================================================== // Placeholder image // ===================================================== function PH({ label, tag, ratio = '1/1', style = {}, children, tall }) { const st = { aspectRatio: tall ? undefined : ratio, height: tall || undefined, width: '100%', ...style, }; return (
{tag && ◇ {tag}} {label && {label}} {children}
); } // ===================================================== // Price formatter (MXN) // ===================================================== const fmtMXN = (n) => '$' + n.toLocaleString('es-MX', { minimumFractionDigits: 0 }); // ===================================================== // Announcement bar // ===================================================== function AnnouncementBar() { const msgs = [ 'Envío gratis en pedidos superiores a $2,500 MXN', 'Hasta 12 MSI con tarjetas participantes', 'Boutique CDMX · Polanco — Lun a Sáb 11:00–20:00', ]; const [i, setI] = useState(0); useEffect(() => { const t = setInterval(() => setI(x => (x + 1) % msgs.length), 4500); return () => clearInterval(t); }, []); return (
{msgs[i]}
); } // ===================================================== // Header // ===================================================== function Header({ mobile }) { const { go, route, cart, setCartOpen, setSearchOpen, setMenuOpen } = useApp(); const cartCount = cart.reduce((a, b) => a + b.qty, 0); const NavLink = ({ to, children, active }) => ( ); if (mobile) { return (
); } return (
); } // ===================================================== // Footer // ===================================================== function Footer() { const col = (title, items) => (
{title}
); return ( ); } // ===================================================== // Product Card // ===================================================== function ProductCard({ product, mobile }) { const { go } = useApp(); const [hover, setHover] = useState(false); return ( ); } // ===================================================== // Cart Drawer // ===================================================== function CartDrawer() { const { cartOpen, setCartOpen, cart, removeFromCart, updateQty, go } = useApp(); const subtotal = cart.reduce((a, b) => a + b.price * b.qty, 0); return ( <>
setCartOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', opacity: cartOpen ? 1 : 0, pointerEvents: cartOpen ? 'auto' : 'none', transition: 'opacity 200ms', zIndex: 100, }}/> ); } // ===================================================== // Search Overlay // ===================================================== function SearchOverlay() { const { searchOpen, setSearchOpen, go } = useApp(); const [q, setQ] = useState(''); useEffect(() => { if (searchOpen) { const t = setTimeout(() => document.getElementById('search-input')?.focus(), 100); return () => clearTimeout(t); } }, [searchOpen]); const trending = ['AGV Pista GP RR', 'Dainese Racing', 'Guantes ciclismo', 'Casco integral', 'Sidi Wire 2']; const suggestions = q ? [ { brand: 'AGV', name: `${q} · K6 S`, price: 14990 }, { brand: 'Dainese', name: `${q} · Racing 4`, price: 18490 }, { brand: 'Rudy Project', name: `${q} · Cutline`, price: 5290 }, ] : []; return ( <>
setSearchOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', opacity: searchOpen ? 1 : 0, pointerEvents: searchOpen ? 'auto' : 'none', transition: 'opacity 200ms', zIndex: 100, }}/>
setQ(e.target.value)} placeholder="Buscar cascos, jerseys, marcas…" style={{ flex: 1, border: 0, background: 'transparent', outline: 'none', fontFamily: 'var(--font-display)', fontSize: 32, fontStyle: 'italic', }}/>
{!q && ( <>
Tendencias
{trending.map(t => ( ))}
)} {q && ( <>
{suggestions.length} resultados
{suggestions.map((s, i) => ( ))}
)}
); } // ===================================================== // Export to window // ===================================================== Object.assign(window, { AppCtx, useApp, AppProvider, Logo, PH, fmtMXN, AnnouncementBar, Header, Footer, ProductCard, CartDrawer, SearchOverlay, });