// ═══════════════════════════════════════════════════════════════════════════ // PLAN QUIZ 8BAC — recomendador dinâmico de plano // Capa → Negócio → Orçamento → Necessidade → Resultado // ═══════════════════════════════════════════════════════════════════════════ const PLANS = { basico: { id: 'basico', nome: 'Básico', precoMensal: 397, tipo: 'recorrente', tagline: 'Tráfego rodando + Instagram organizado', features: [ ['Estruturar Instagram', true], ['Social Mídia Inteligente', '1 post / semana'], ['Site 100% trackeado', false], ['Gestão de Tráfego Completa', true], ['Reunião Mensal', 'Só relatório'], ], }, inter: { id: 'inter', nome: 'Intermediário', precoMensal: 697, tipo: 'recorrente', tagline: 'Mais conteúdo + tráfego escalando', features: [ ['Estruturar Instagram', true], ['Social Mídia Inteligente', '2 posts / semana'], ['Site 100% trackeado', false], ['Gestão de Tráfego Completa', true], ['Reunião Mensal', 'Só relatório'], ], }, completo: { id: 'completo', nome: 'Completo', precoMensal: 997, tipo: 'recorrente', tagline: 'Operação inteira: site, tráfego, conteúdo e call', features: [ ['Estruturar Instagram', true], ['Social Mídia Inteligente', '2 posts / semana'], ['Site 100% trackeado', true], ['Gestão de Tráfego Completa', true], ['Reunião Mensal', 'Call de alinhamento'], ], }, avulso_ig: { id: 'avulso_ig', nome: 'Estruturar Instagram', precoMensal: 297, tipo: 'avulso', tagline: 'Pagamento único · entra na comunidade pra rodar tráfego sozinho', features: [ ['Estruturação completa do perfil', true], ['BIO + Destaques com SEO', true], ['Acesso à comunidade', true], ['Pagamento único', true], ], }, avulso_site: { id: 'avulso_site', nome: 'Site 100% Trackeado', precoMensal: 447, tipo: 'avulso', tagline: 'Pagamento único · site que faz ponte pro WhatsApp', features: [ ['Site direto pra conversão', true], ['Rastreamento via API (Meta + Google)', true], ['Banco de dados vivo', true], ['Pagamento único', true], ], }, }; const RECORRENTES = ['basico', 'inter', 'completo']; function recommendPlan(orcamento, precisa) { if (precisa === 'instagram') return 'avulso_ig'; if (precisa === 'site') return 'avulso_site'; if (precisa === 'trafego') return 'basico'; // completo / nao_sei → baseado no orçamento total if (orcamento >= 2500) return 'completo'; if (orcamento >= 1800) return 'inter'; if (orcamento >= 565) return 'basico'; return 'avulso_ig'; } // Preço por periodicidade (tudo à vista) function precoPeriodo(precoMensal, periodo) { if (periodo === 'semestral') { const total = Math.round(precoMensal * 6 * 0.85); return { total, equiv: total / 6, sufixo: 'à vista (6 meses · -15%)' }; } if (periodo === 'anual') { const total = precoMensal * 10; // 2 meses grátis return { total, equiv: total / 12, sufixo: 'à vista (12 meses · 2 grátis)' }; } return { total: precoMensal, equiv: precoMensal, sufixo: '/mês' }; } const BRL = n => 'R$ ' + Number(n).toLocaleString('pt-BR', { minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 }); const NEGOCIOS = [ { value: 'estetica', label: 'Estética e Beleza', icon: 'sparkles' }, { value: 'saude', label: 'Saúde e Bem-estar', icon: 'heart-pulse' }, { value: 'alimentacao', label: 'Alimentação e Delivery', icon: 'utensils' }, { value: 'educacao', label: 'Educação e Cursos', icon: 'graduation-cap' }, { value: 'info', label: 'Infoprodutos e Mentorias',icon: 'monitor-play' }, { value: 'ecommerce', label: 'E-commerce', icon: 'shopping-bag' }, { value: 'servicos', label: 'Serviços Profissionais', icon: 'briefcase' }, { value: 'imobiliario', label: 'Imobiliário', icon: 'home' }, { value: 'outros', label: 'Outros', icon: 'edit-3', custom: true }, ]; const NEGOCIO_LABEL = v => { if (!v) return ''; if (v.startsWith('outros:')) return 'Outros: ' + v.slice(7).trim(); const f = NEGOCIOS.find(n => n.value === v); return f ? f.label : v; }; const PRECISA = [ { value: 'tudo', label: 'Operação completa', sub: 'Instagram + tráfego + site, tudo conectado', icon: 'rocket' }, { value: 'trafego', label: 'Só gestão de tráfego', sub: 'Já tenho perfil, quero anúncio rodando', icon: 'bar-chart-3' }, { value: 'instagram', label: 'Só organizar Instagram',sub: 'Quero o perfil estruturado pra vender', icon: 'sparkles' }, { value: 'site', label: 'Só um site que converte',sub: 'Preciso de uma página que traga contato', icon: 'globe' }, ]; const PRECISA_LABEL = v => { const f = PRECISA.find(p => p.value === v); return f ? f.label : v; }; function PlanQuiz({ onCapture }) { const [step, setStep] = React.useState(0); // 0=capa,1=negocio,2=orcamento,3=precisa,4=resultado const [answers, setAnswers] = React.useState({ negocio: '', orcamento: 0, precisa: '' }); const [periodo, setPeriodo] = React.useState('mensal'); const [modalOpen, setModalOpen] = React.useState(false); // Dispara evento ao VER cada tela (não só ao responder) React.useEffect(() => { if (step === 0) { if (window.fireEvent) window.fireEvent('ViewContent', { content_name: 'Plan Quiz 8BAC', content_type: 'product' }); } else if (step === 1) fireCustom('Viu_Negocio'); else if (step === 2) fireCustom('Viu_Orcamento'); else if (step === 3) fireCustom('Viu_Precisa'); else if (step >= 4) fireCustom('Viu_PlanoIdeal'); }, [step]); function start() { fireCustom('PlanQuizStart'); setStep(1); } function pick(key, value, evt) { setAnswers(a => ({ ...a, [key]: value })); fireCustom(evt, { [key]: typeof value === 'string' ? value : String(value) }); setTimeout(() => setStep(s => s + 1), 380); } const recomendado = step >= 4 ? recommendPlan(answers.orcamento, answers.precisa) : null; function buildWhatsAppMessage(form) { const plan = PLANS[recomendado]; const p = precoPeriodo(plan.precoMensal, plan.tipo === 'avulso' ? 'mensal' : periodo); return [ 'Olá! Fiz o quiz de planos no site da 8BAC 👋', '', `Sou o(a) *${form.nome.trim()} ${form.sobrenome.trim()}*`, `📧 ${form.email.trim()}`, `🎂 ${form.nascimento}`, '', '*Minhas respostas:*', `✓ Negócio: ${NEGOCIO_LABEL(answers.negocio)}`, `✓ Orçamento marketing/mês: ${BRL(answers.orcamento)}`, `✓ Preciso de: ${PRECISA_LABEL(answers.precisa)}`, '', `*Plano recomendado: ${plan.nome}*`, plan.tipo === 'avulso' ? `💰 ${BRL(plan.precoMensal)} (pagamento único)` : `💰 ${BRL(p.total)} ${p.sufixo}${periodo !== 'mensal' ? ` · equiv. ${BRL(p.equiv)}/mês` : ''}`, '', 'Quero fechar esse plano / tirar dúvidas.' ].join('\n'); } return (
8 BAC
{step === 0 && } {step === 1 && ( pick('negocio', v, 'PlanQuiz_Negocio')} /> )} {step === 2 && ( pick('orcamento', v, 'PlanQuiz_Orcamento')} /> )} {step === 3 && ( pick('precisa', v, 'PlanQuiz_Precisa')} /> )} {step >= 4 && recomendado && ( { fireCustom('PlanQuiz_CTA', { plano: recomendado }); setModalOpen(true); }} /> )}
{modalOpen && ( setModalOpen(false)} onSubmit={onCapture} buildMessage={buildWhatsAppMessage} /> )}
); } // ─── CAPA ─────────────────────────────────────────────────────────────────── function PqCover({ onStart }) { return (
RECOMENDAÇÃO PERSONALIZADA · 1 MINUTO

Qual plano é
melhor pra mim?

Responde 3 perguntas rápidas que eu te mostro exatamente o plano certo pro momento da sua empresa — sem achismo, com base no que você pode investir.

Sem compromisso · você decide no fim
); } // ─── ESTILOS DE PROGRESSO (compartilhados por PqChoice e PqBudget) ────────── function pqProgressStyles() { return ` .pqq__progress { margin-bottom: 26px; } .pqq__meta { display:flex; justify-content:space-between; margin-bottom:8px; } .pqq__step { font-family: var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em; color: var(--bac-blue); } .pqq__pct { font-family: var(--font-mono); font-size:11px; font-weight:600; color: var(--ink-4); } .pqq__bar { height:6px; border-radius:999px; background: var(--line); overflow:hidden; } .pqq__fill { height:100%; background: var(--bac-blue); border-radius:999px; transition: width .42s var(--ease-out); } .pqq__title { font-family: var(--font-display); font-weight:900; font-size: clamp(26px,6.4vw,38px); line-height:1.1; letter-spacing:-0.025em; color: var(--ink-1); margin:0 0 28px; } `; } // ─── BOTÃO PADRÃO ─────────────────────────────────────────────────────────── function pqBtnStyles() { return ` .pq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--bac-blue); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 16px; padding: 16px 26px; border-radius: 12px; border: 0; cursor: pointer; transition: all .16s var(--ease-out); -webkit-tap-highlight-color: transparent; min-height: 56px; width: 100%; } .pq-btn:hover:not(:disabled){ background: var(--bac-blue-700); transform: translateY(-2px); } .pq-btn:disabled { opacity: .45; cursor: not-allowed; } .pq-btn--lg { max-width: 360px; font-size: 17px; min-height: 60px; box-shadow: 0 12px 30px rgba(0,102,254,.32); } `; } // ─── CHOICE ───────────────────────────────────────────────────────────────── function PqChoice({ current, total, label, options, customPlaceholder, onAnswer }) { const [picked, setPicked] = React.useState(''); const [customText, setCustomText] = React.useState(''); const [showCustom, setShowCustom] = React.useState(false); const isLocked = picked && !showCustom; const pct = (current / total) * 100; function handlePick(opt) { if (isLocked) return; if (opt.custom) { setPicked(opt.value); setShowCustom(true); } else { setShowCustom(false); setCustomText(''); setPicked(opt.value); onAnswer(opt.value); } } function submitCustom(e) { if (e) e.preventDefault(); const t = customText.trim(); if (!t) return; onAnswer('outros:' + t); } return (
PERGUNTA {current} DE {total} {Math.round(pct)}%

{label}

{options.map(opt => ( ))}
{showCustom && (
setCustomText(e.target.value)} />
)}
); } // ─── ORÇAMENTO ────────────────────────────────────────────────────────────── function PqBudget({ current, total, onAnswer }) { const [raw, setRaw] = React.useState(''); const pct = (current / total) * 100; const num = parseInt(raw.replace(/\D/g, '') || '0', 10); const fmt = num ? num.toLocaleString('pt-BR') : ''; function submit(e) { if (e) e.preventDefault(); if (num < 50) return; onAnswer(num); } return (
PERGUNTA {current} DE {total} {Math.round(pct)}%

Quanto você pensa investir em marketing por mês?

É o valor TOTAL de marketing: a prestação de serviço da 8BAC + o crédito que vai pro tráfego pago. Estudos mostram que investir ~20% do faturamento em marketing acelera o crescimento.
R$ setRaw(e.target.value)} /> /mês
{num > 0 && num < 565 && 'Orçamento enxuto — vou te mostrar a melhor porta de entrada.'} {num >= 565 && num < 1800 && 'Dá pra rodar uma operação sólida. Bora ver.'} {num >= 1800 && num < 2500 && 'Bom orçamento — dá pra escalar de verdade.'} {num >= 2500 && 'Orçamento forte — operação completa faz sentido.'}
); } // ─── RESULTADO ────────────────────────────────────────────────────────────── function PqResult({ planId, answers, periodo, setPeriodo, onCTA }) { const plan = PLANS[planId]; const isAvulso = plan.tipo === 'avulso'; const p = precoPeriodo(plan.precoMensal, isAvulso ? 'mensal' : periodo); const motivo = (() => { if (planId === 'avulso_ig') return 'Pelo seu orçamento agora, o melhor é começar estruturando seu Instagram e entrar na comunidade pra rodar tráfego com a gente te orientando. Quando crescer, sobe pro plano completo.'; if (planId === 'avulso_site') return 'Você precisa de um site que converte de verdade — feito pra levar o cliente pro WhatsApp, com rastreamento completo pra otimizar suas campanhas.'; if (planId === 'basico') return `Com ${BRL(answers.orcamento)}/mês, o Básico te dá Instagram organizado + tráfego rodando. Sobra crédito pro anúncio escalar com inteligência.`; if (planId === 'inter') return `Seu orçamento permite mais conteúdo e tráfego escalando com folga. O Intermediário acelera os resultados sem comprometer o caixa.`; return `Com ${BRL(answers.orcamento)}/mês você tem a operação inteira: site trackeado, tráfego, conteúdo e call mensal de alinhamento. É a configuração que mais escala.`; })(); return (
SEU PLANO IDEAL
{plan.nome}
{plan.tagline}
{!isAvulso && (
{[['mensal','Mensal'],['semestral','Semestral'],['anual','Anual']].map(([k,lb]) => ( ))}
)}
{BRL(p.total)}
{isAvulso ? 'pagamento único' : p.sufixo} {!isAvulso && periodo !== 'mensal' && ` · equivale a ${BRL(p.equiv)}/mês`}

{motivo}

{!isAvulso && (
Comparar com os outros planos
{RECORRENTES.map(id => ( ))} {PLANS.completo.features.map(([nome], r) => ( {RECORRENTES.map(id => { const v = PLANS[id].features[r][1]; return ( ); })} ))}
{PLANS[id].nome}
{BRL(PLANS[id].precoMensal)}/mês
{nome} {v === true ? '✓' : v === false ? '—' : v}
)}
); }