// shared.jsx — MinduBier × Copa 2026 — Shared utilities, constants, icons, mocks, validations // ─── Tokens ──────────────────────────────────────────────────────────── const MB = { copper: '#c5762a', amber: '#efa31f', gold: '#ffd503', bgLight: '#fffff4', bgDark: '#444444', bgDarker: '#323231', bgFooter: '#2a2a29', white: '#ffffff', copaGreen: '#009739', copaGreenDeep: '#00622a', copaYellow: '#fedd00', copaBlue: '#002776', error: '#c0392b', success: '#1f8a5b', display: "'Outfit', system-ui, sans-serif", body: "'Nunito Sans', system-ui, sans-serif", ease: 'cubic-bezier(0.16, 1, 0.3, 1)', }; // ─── Constants ───────────────────────────────────────────────────────── const TAMANHOS = ['P', 'M', 'G', 'GG', 'XG']; const TABELA_MEDIDAS = [ { tamanho: 'P', largura: 54, comprimento: 70 }, { tamanho: 'M', largura: 56, comprimento: 72 }, { tamanho: 'G', largura: 58, comprimento: 73.5 }, { tamanho: 'GG', largura: 60, comprimento: 75.5 }, { tamanho: 'XG', largura: 64, comprimento: 77.5 }, ]; const PRECO_CAMISA_CENTAVOS = 9900; // ─── BRL formatting ──────────────────────────────────────────────────── function brl(centavos) { return (centavos / 100).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2, }); } function brlNumber(centavos) { // No "R$" prefix; for use after "R$" already in template return (centavos / 100).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } // ─── Masks (inline, no libs) ─────────────────────────────────────────── function maskCEP(v) { const d = (v || '').replace(/\D/g, '').slice(0, 8); if (d.length <= 5) return d; return d.slice(0, 5) + '-' + d.slice(5); } function unmaskCEP(v) { return (v || '').replace(/\D/g, ''); } function maskTelefone(v) { const d = (v || '').replace(/\D/g, '').slice(0, 11); if (d.length === 0) return ''; if (d.length < 3) return '(' + d; if (d.length < 7) return '(' + d.slice(0, 2) + ') ' + d.slice(2); if (d.length <= 10) return '(' + d.slice(0, 2) + ') ' + d.slice(2, 6) + '-' + d.slice(6); return '(' + d.slice(0, 2) + ') ' + d.slice(2, 7) + '-' + d.slice(7); } function unmaskTelefone(v) { return (v || '').replace(/\D/g, ''); } // ─── Mocks ───────────────────────────────────────────────────────────── async function mockConsultarCEP(cep) { const cepLimpo = (cep || '').replace(/\D/g, ''); const r = await fetch(`/api/cep?cep=${cepLimpo}`); if (!r.ok) { const data = await r.json().catch(() => ({})); throw new Error(data.error || 'CEP não encontrado'); } const data = await r.json(); return { cep: data.cep, logradouro: data.logradouro, bairro: data.bairro, cidade: data.cidade, estado: data.estado, }; } async function mockCalcularFrete(cepDestino, quantidade) { const r = await fetch('/api/frete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ cepDestino: (cepDestino || '').replace(/\D/g, ''), quantidade: quantidade, }), }); if (!r.ok) { const data = await r.json().catch(() => ({})); throw new Error(data.error || 'Não foi possível calcular o frete'); } const data = await r.json(); return { opcoes: data.opcoes }; } async function enviarCadastro(pedido) { const r = await fetch('/api/cadastro', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(pedido), }); const data = await r.json().catch(() => ({})); if (!r.ok) { throw new Error(data.error || 'Erro ao enviar cadastro'); } return data; // { success: true, protocolo } } // ─── Validation (Zod-style without zod) ──────────────────────────────── function validateCadastro(data) { const e = {}; if (!data.nome || data.nome.trim().length < 3) e.nome = 'Nome muito curto'; else if (data.nome.length > 100) e.nome = 'Nome muito longo'; if (!data.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = 'E-mail inválido'; const tel = unmaskTelefone(data.telefone); if (!/^\d{10,11}$/.test(tel)) e.telefone = 'Telefone deve ter DDD + número'; const cep = unmaskCEP(data.cep); if (!/^\d{8}$/.test(cep)) e.cep = 'CEP deve ter 8 dígitos'; if (!data.logradouro || !data.logradouro.trim()) e.logradouro = 'Informe o logradouro'; if (!data.numero || !String(data.numero).trim()) e.numero = 'Informe o número'; if (!data.bairro || !data.bairro.trim()) e.bairro = 'Informe o bairro'; if (!data.cidade || !data.cidade.trim()) e.cidade = 'Informe a cidade'; if (!data.estado || data.estado.length !== 2) e.estado = 'UF inválida'; const totalCamisas = (data.itens || []).reduce((s, i) => s + (i.quantidade || 0), 0); if (totalCamisas === 0) e.itens = 'Selecione pelo menos uma camisa'; if (!data.tipoEntrega) e.tipoEntrega = 'Escolha como receber'; return e; } // ─── Icons (inline SVG, lucide-style) ────────────────────────────────── const Icon = { Check: (p) => ( ), Plus: (p) => ( ), Minus: (p) => ( ), ArrowRight: (p) => ( ), ArrowDown: (p) => ( ), Trophy: (p) => ( ), Sparkles: (p) => ( ), Shirt: (p) => ( ), Package: (p) => ( ), MapPin: (p) => ( ), Award: (p) => ( ), Truck: (p) => ( ), X: (p) => ( ), AlertCircle: (p) => ( ), Loader: (p) => ( ), ChevronLeft: (p) => ( ), ChevronRight: (p) => ( ), Whatsapp: (p) => ( ), }; // ─── Countdown helper ────────────────────────────────────────────────── // FIFA World Cup 2026 kickoff: June 11, 2026 const COPA_KICKOFF = new Date('2026-06-11T17:00:00-04:00'); function useCountdown(target) { const [now, setNow] = React.useState(() => new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const diff = Math.max(0, target.getTime() - now.getTime()); const days = Math.floor(diff / 86_400_000); const hours = Math.floor((diff % 86_400_000) / 3_600_000); const minutes = Math.floor((diff % 3_600_000) / 60_000); const seconds = Math.floor((diff % 60_000) / 1000); return { days, hours, minutes, seconds, done: diff === 0 }; } // ─── Toast system ────────────────────────────────────────────────────── const ToastContext = React.createContext(null); function ToastProvider({ children }) { const [toasts, setToasts] = React.useState([]); const push = React.useCallback((toast) => { const id = Math.random().toString(36).slice(2); setToasts((t) => [...t, { id, ...toast }]); setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), toast.duration || 4500); }, []); return ( {children}
{toasts.map((t) => (
{t.kind === 'success' ? : } {t.message}
))}
); } function useToast() { return React.useContext(ToastContext); } // ─── Logo SVG (MinduBier "M" mark, fallback if avif fails) ───────────── function MinduMark({ size = 28, color = MB.copper }) { return ( ); } // Standalone-bundle resource helper: returns bundled blob URL if available, otherwise the dev fallback path. function R(id, fallback) { return (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || fallback; } // Export everything to window Object.assign(window, { MB, TAMANHOS, TABELA_MEDIDAS, PRECO_CAMISA_CENTAVOS, brl, brlNumber, maskCEP, unmaskCEP, maskTelefone, unmaskTelefone, mockConsultarCEP, mockCalcularFrete, enviarCadastro, validateCadastro, Icon, MinduMark, COPA_KICKOFF, useCountdown, ToastProvider, ToastContext, useToast, R, });