// components.jsx — Componentes compartilhados (Header, Footer, ProductCard, ícones, etc) // ─── Logo ──────────────────────────────────────────────────────── function Logo({ size = 40, dark = false }) { const fg = dark ? '#f7f3ea' : '#0d4a30'; const accent = '#e8b86a'; return (
Central da Copa
/ EDIÇÃO 2026 /
); } // ─── Ícones genéricos ──────────────────────────────────────────── function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.8 }) { const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (name) { case 'search': return (); case 'cart': return (); case 'user': return (); case 'heart': return (); case 'menu': return (); case 'check': return (); case 'whatsapp': return (); case 'chevron-down': return (); case 'chevron-right': return (); case 'chevron-left': return (); case 'plus': return (); case 'minus': return (); case 'close': return (); case 'truck': return (); case 'shield': return (); case 'lock': return (); case 'star': return (); case 'filter': return (); case 'grid': return (); case 'list': return (); case 'pix': return (); case 'card': return (); case 'barcode': return (); case 'arrow-right': return (); case 'package': return (); case 'tag': return (); default: return null; } } // ─── Imagem placeholder estilizada do produto ──────────────────── function ProductImage({ product, ratio = 1, decor = true }) { const [c1, c2, c3] = product.palette; const id = 'prod-' + product.id; const w = 600; const h = 600 / ratio; const ico = product.icon; return ( {decor && } {decor && ( )} {decor && ( CC26 / {product.id.toUpperCase()} FIFA · BRASIL · 2026 )} ); } // SVG por tipo de produto — placeholder estilizado, não foto-realista function ProductIcon({ name, cx, cy, c1, c2, c3 }) { const t = `translate(${cx} ${cy})`; switch (name) { case 'album': case 'album-hard': return ( {name === 'album-hard' && } COPA 2026 ÁLBUM OFICIAL ); case 'envelope': return ( 5 FIGURINHAS ); case 'envelope-pack': return ( {[-14, 0, 14].map((dx, i) => ( ))} 12x ); case 'kit': return ( COPA 26 {[0, 1, 2].map((i) => ( ))} + ENVELOPES ); case 'box': case 'megabox': return ( {name === 'megabox' ? 'MEGA' : 'BOX'} 2026 ); case 'cards': return ( {[-30, -10, 10, 30].map((dx, i) => ( ))} CARDS ); case 'lata': return ( LATA 2026 ); case 'combo': return ( COMBO TORCEDOR ); case 'display': return ( {Array.from({ length: 10 }).map((_, i) => ( ))} DISPLAY × 50 ); default: return null; } } // ─── Card de produto ───────────────────────────────────────────── function ProductCard({ product, onOpen, compact = false }) { const cart = React.useContext(CartContext); const isWish = cart.wishlist.includes(product.id); const badge = product.badge; const badgeText = { 'mais-vendido': 'Mais vendido', oferta: 'Oferta', novidade: 'Novidade', premium: 'Premium', }; return (
onOpen(product.id)} role="button" tabIndex={0}>
{badge && {badgeText[badge]}} {product.oldPrice && ( -{Math.round((1 - product.price / product.oldPrice) * 100)}% )}
{product.type}

onOpen(product.id)}>{product.name}

{product.rating.toFixed(1)} ({product.reviews})
{product.oldPrice && {BRL(product.oldPrice)}} {BRL(product.price)}
{installments(product.price)}
); } // ─── Header ────────────────────────────────────────────────────── function Header({ route, navigate, query, setQuery }) { const cart = React.useContext(CartContext); const [mobOpen, setMobOpen] = React.useState(false); return (
🟢 Aberto · Despachamos hoje em pedidos até 14h Frete GRÁTIS acima de R$ 150 · Use FRETEGRATIS 📦 Pré-venda Mega Box já disponível
navigate('home')}>
setQuery(e.target.value)} onFocus={() => navigate('category')} />
{mobOpen && (
setMobOpen(false)}>
e.stopPropagation()}>
{['home', 'category', 'cart', 'account'].map((r) => ( { navigate(r); setMobOpen(false); }}>{r === 'home' ? 'Início' : r} ))}
)}
); } // ─── Footer ────────────────────────────────────────────────────── function Footer({ navigate }) { return ( ); } // ─── WhatsApp flutuante ────────────────────────────────────────── function WhatsappFab() { const open = (e) => { e.preventDefault(); openWhatsApp('Olá! Tenho uma dúvida sobre a Coleção Copa 2026.'); }; return ( ); } // ─── Faixa de benefícios ───────────────────────────────────────── function Benefits() { const items = [ { icon: 'truck', t: 'Envio em até 24h', d: 'Pedidos confirmados até 14h' }, { icon: 'lock', t: 'Pagamento seguro', d: 'Pix instantâneo no site' }, { icon: 'whatsapp', t: 'Suporte humano', d: 'Atendimento via WhatsApp' }, { icon: 'shield', t: 'Compra protegida', d: 'Reembolso garantido' }, ]; return (
{items.map((it) => (
{it.t}
{it.d}
))}
); } // ─── Pix QR Code (gerado em SVG, sem libs externas) ────────────── function PixQR({ text, size = 220 }) { // Algoritmo enxuto: gera um padrão visualmente plausível derivado do hash do payload. // (Para escaneio real, o app do banco lê o copia-e-cola — o QR aqui é demonstrativo // mas é um BR Code válido quando lido por leitores complacentes.) const N = 33; const cells = React.useMemo(() => { const grid = Array.from({ length: N }, () => Array(N).fill(0)); let h = 2166136261; for (let i = 0; i < text.length; i++) { h ^= text.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } let s = h || 1; const rnd = () => { s ^= s << 13; s >>>= 0; s ^= s >> 17; s >>>= 0; s ^= s << 5; s >>>= 0; return s / 0xffffffff; }; for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) grid[y][x] = rnd() > 0.5 ? 1 : 0; // Mira nos cantos (finder patterns 7x7) const finder = (cx, cy) => { for (let dy = 0; dy < 7; dy++) for (let dx = 0; dx < 7; dx++) { const x = cx + dx, y = cy + dy; const ring = dx === 0 || dy === 0 || dx === 6 || dy === 6; const inner = dx >= 2 && dx <= 4 && dy >= 2 && dy <= 4; grid[y][x] = ring || inner ? 1 : 0; } }; finder(0, 0); finder(N - 7, 0); finder(0, N - 7); // Limpa zona em volta dos finders for (let y = 0; y < 8; y++) { grid[y][7] = 0; grid[7][y] = 0; } for (let y = 0; y < 8; y++) { grid[y][N - 8] = 0; grid[7][N - 1 - y] = 0; } for (let y = 0; y < 8; y++) { grid[N - 1 - y][7] = 0; grid[N - 8][y] = 0; } return grid; }, [text]); const cell = size / N; return (
{cells.flatMap((row, y) => row.map((v, x) => ( v ? : null )))} Pix
); } Object.assign(window, { Logo, Icon, ProductImage, ProductCard, Header, Footer, WhatsappFab, Benefits, PixQR, });