{step}/{total}

); }; // === BenefitCard — Auxílio Brasil styled === // Always shows max value (R$ 6.484). Status starts "Em análise", finishes "Semi-aprovado". const STAGE_LABELS = { pregnant: { label: 'Gestante' }, born: { label: 'Mãe' }, }; const WHEN_LABELS = { lt6_p: { label: 'Início gestação' }, gte6_p: { label: 'Reta final' }, lt30d_b: { label: 'Recém-nascido' }, lt6_b: { label: 'Até 6 meses' }, mid_b: { label: 'Até 5 anos' }, gt5_b: { label: '5+ anos' }, }; const WORK_LABELS = { clt: { label: 'CLT' }, dom: { label: 'Doméstica' }, mei: { label: 'MEI' }, aut: { label: 'Autônoma' }, cas: { label: 'Do lar' }, des: { label: 'Desempregada' }, }; const INSS_LABELS = { now: { label: 'INSS em dia' }, lt1: { label: 'INSS recente' }, gt1: { label: 'INSS antigo' }, no: { label: 'Sem INSS' }, }; function BenefitCard({ answers, name, step, finalAmount, isFinal }) { const [bumping, setBumping] = React.useState(false); const prevStr = React.useRef(''); React.useEffect(() => { const cur = JSON.stringify({ answers, name, isFinal }); if (prevStr.current && prevStr.current !== cur) { setBumping(true); const t = setTimeout(() => setBumping(false), 600); return () => clearTimeout(t); } prevStr.current = cur; }, [answers, name, isFinal]); const stage = answers.stage ? STAGE_LABELS[answers.stage] : null; const whenKey = answers.when && answers.stage ? `${answers.when}_${answers.stage === 'pregnant' ? 'p' : 'b'}` : null; const when = whenKey ? WHEN_LABELS[whenKey] : null; const work = answers.work ? WORK_LABELS[answers.work] : null; const inss = answers.inss ? INSS_LABELS[answers.inss] : null; const tags = []; if (stage) tags.push({ key: 'stage', label: stage.label }); if (when) tags.push({ key: 'when', label: when.label }); if (work) tags.push({ key: 'work', label: work.label }); if (inss) tags.push({ key: 'inss', label: inss.label }); const displayName = (name || '').trim().toUpperCase() || null; // NIS-style number reveals progressively const seg1 = step >= 1 ? '1234' : '••••'; const seg2 = step >= 2 ? '5678' : '••••'; const seg3 = step >= 3 ? '9012' : '••••'; const seg4 = isFinal ? '3456' : (step >= 4 ? '34••' : '••••'); // Status: "Em análise" → "Semi-aprovado" const status = isFinal ? { label: 'Semi-aprovado', tone: 'final' } : { label: 'Em análise', tone: 'analysis' }; return (

{/* Decorative wave (Auxílio Brasil-inspired) */} {/* Top: brand row */}

Garanteprev Previdência social

{status.label}

{/* Big wordmark — Auxílio Brasil style with gold underline */}

SALÁRIO MATERNIDADE

{/* Value row */}

Valor estimado

até R$ 6.484

{/* Tags */}

{tags.length === 0 ? ( aguardando suas respostas ) : tags.map(t => ( {t.label} ))}

{/* Bottom: titular + number */}

Titular

{displayName || Seu nome aqui}

NIS {seg1}.{seg2}.{seg3}-{seg4}

); } // Option card const OptionCard = ({ icon, title, sub, onClick, selected, tapped }) => ( ); const TrustStrip = ({ text = "Seus dados são protegidos · LGPD" }) => (

{text}

); const fmtBRL = (n) => 'R$ ' + n.toLocaleString('pt-BR'); // Prefixo +55 é fixo na UI. maskPhone sempre tira 55 do começo se presente, // já que DDD 55 não existe no Brasil. const maskPhone = (v) => { let d = (v || '').replace(/\D/g, ''); if (d.startsWith('55') && d.length >= 11) d = d.slice(2); d = d.slice(0, 11); if (!d) return ''; if (d.length <= 2) return `(${d}`; if (d.length <= 3) return `(${d.slice(0,2)}) ${d.slice(2)}`; if (d.length <= 7) return `(${d.slice(0,2)}) ${d.slice(2,3)} ${d.slice(3)}`; return `(${d.slice(0,2)}) ${d.slice(2,3)} ${d.slice(3,7)}-${d.slice(7)}`; }; Object.assign(window, { Icon, StatusBar, LogoMark, TopChrome, BenefitCard, OptionCard, TrustStrip, fmtBRL, maskPhone, });