// ═══════════════════════════════════════════════════════════════════════════
// QUIZ 8BAC — capa + 3 perguntas + popup de captura
// ═══════════════════════════════════════════════════════════════════════════
const QUIZ_LABELS = {
tem_trafego: { sim: 'Sim, já invisto/investi', nao: 'Não, ainda não' },
faturamento: {
'ate-30k': 'Até R$ 30 mil',
'30-60k': 'R$ 30 a 60 mil',
'60-150k': 'R$ 60 a 150 mil',
'150k+': 'R$ 150 mil ou mais',
},
atendimento: { ligacao: 'Ligação', mensagem: 'Mensagem', video: 'Vídeo-chamada' },
};
function Quiz({ onCapture, onClose, originText, mode }) {
const isOverlay = mode === 'overlay';
const [step, setStep] = React.useState(0); // 0=capa, 1..3=perguntas
const [modalOpen, setModalOpen] = React.useState(false);
const [answers, setAnswers] = React.useState({ tem_trafego: '', faturamento: '', atendimento: '' });
React.useEffect(() => {
if (window.lucide) window.lucide.createIcons();
}, [step, modalOpen]);
React.useEffect(() => {
if (isOverlay) {
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = ''; };
}
}, [isOverlay]);
function startQuiz() {
fireCustom('QuizStart');
setStep(1);
}
function pickAnswer(key, value, eventName) {
setAnswers(a => ({ ...a, [key]: value }));
fireCustom(eventName, { [key]: value });
const next = step + 1;
setTimeout(() => {
if (next <= 3) setStep(next);
else setModalOpen(true);
}, 380);
}
return (
{step === 0 && }
{step === 1 && (
pickAnswer('tem_trafego', v, 'QuizStep_TemTrafego')}
/>
)}
{step === 2 && (
pickAnswer('faturamento', v, 'QuizStep_Faturamento')}
/>
)}
{step === 3 && (
pickAnswer('atendimento', v, 'QuizStep_Atendimento')}
/>
)}
{modalOpen && (
setModalOpen(false)}
onSubmit={onCapture}
/>
)}
);
}
// ─── CAPA ────────────────────────────────────────────────────────────────────
function Cover({ onStart }) {
return (
DIAGNÓSTICO ESTRATÉGICO · 30 SEGUNDOS
Bora! Vamos começar.
Vou te fazer 3 perguntas rapidinho antes da
gente conversar — é o jeito mais rápido de eu já chegar
com a estratégia certa pro seu negócio.
Seus dados são protegidos · sem spam
);
}
// ─── PERGUNTA ────────────────────────────────────────────────────────────────
function Question({ current, total, label, sub, options, selected, onAnswer }) {
const [picked, setPicked] = React.useState('');
function handlePick(v) {
if (picked) return; // evita duplo clique
setPicked(v);
onAnswer(v);
}
const pct = (current / total) * 100;
return (
PERGUNTA {current} DE {total}
{Math.round(pct)}%
{label}
{sub && {sub}
}
{options.map(opt => (
))}
);
}