// Quiz qualificador — Franquia NexFarm3D.
// Roda como MODAL aberto a partir do CTA da landing (não tem hero próprio).
// Dois eixos: (1) PLANO recomendado que a pessoa vê (Starter/Pro/Ultra, sem preço);
//             (2) qualidade do lead A/B/C escondida — só A dispara Lead pro Meta.
// Persona + abordagem vão pro tracker/Kommo pro Alan abrir a conversa certo.

// ============================================================
// PLANOS — números REAIS do deck NexFarm3D (4 modalidades, cap13-17).
// Editar aqui muda landing + resultado do quiz num lugar só.
// ============================================================
const PLANS = {
  micro: {
    key: 'micro', name: 'Micro Farm', tag: 'O ponto de entrada pra validar antes de escalar',
    machines: '2 Bambu Lab A1', filament: '25kg de filamento', revenue: 'R$ 2 a 4 mil/mês',
    invest: 'R$ 22.497',
    blurb: 'Entre com risco controlado, valide o modelo e cresça com base em resultado, não em achismo.',
  },
  standard: {
    key: 'standard', name: 'Standard Farm', tag: 'Renda extra consistente desde o primeiro mês',
    machines: '4 Bambu Lab A1', filament: '50kg de filamento', revenue: 'R$ 4 a 8 mil/mês',
    invest: 'R$ 34.997',
    blurb: 'Pra quem quer uma operação rodando em paralelo ao trabalho atual, gerando renda significativa.',
  },
  pro: {
    key: 'pro', name: 'Pro Farm', tag: 'Negócio principal, operação profissional desde o dia 1',
    machines: '8 Bambu Lab A1', filament: '70kg de filamento', revenue: 'R$ 8 a 16 mil/mês',
    invest: 'R$ 54.997',
    blurb: 'O ponto de equilíbrio do ecossistema: operação suficiente pra virar sua principal fonte de renda.',
  },
  ultra: {
    key: 'ultra', name: 'Ultra Farm', tag: 'Não tem catálogo, tem projeto',
    machines: 'Máquinas sob projeto', filament: 'Filamento dimensionado', revenue: 'A partir de R$ 12 mil/mês',
    invest: 'R$ 84.997',
    blurb: 'Pra quem já decidiu dominar uma região. A operação é desenhada caso a caso com a franqueadora.',
  },
};
const PLAN_ORDER = ['micro', 'standard', 'pro', 'ultra'];

// WhatsApp do especialista (Alan) — TODO: trocar pelo número real antes de subir.
const ESPECIALISTA_WA = '5500000000000';

// ============================================================
// Resultado por nível (o que a PESSOA vê). Persona/abordagem ficam escondidas.
// ============================================================
const RESULT_VARIANTS = {
  A: {
    css: 'ideal',
    chip: { label: 'Perfil ideal', tone: 'ok' },
    headline: 'foi feito pro seu momento',
    body: 'Pelas suas respostas, você tem o perfil que mais aproveita a franquia. Um especialista vai te mostrar os números exatos (investimento, máquinas e projeção de faturamento) no WhatsApp. Sem compromisso.',
    cta: 'Falar com um especialista',
    note: 'Conversa gratuita e sem compromisso.',
  },
  B: {
    css: 'good',
    chip: { label: 'Bom potencial', tone: 'warn' },
    headline: 'combina com você',
    body: 'Seu perfil tem tudo pra rodar bem com esse modelo. Um especialista vai alinhar com você o melhor caminho pra começar, no WhatsApp, sem custo.',
    cta: 'Falar com um especialista',
    note: 'Conversa gratuita e sem compromisso.',
  },
  C: {
    css: 'warm',
    chip: { label: 'Vale conhecer', tone: 'warn' },
    headline: 'pode ser o seu primeiro passo',
    body: 'Dá pra começar a montar seu negócio com impressão 3D, e vale entender bem o caminho antes. Um especialista pode tirar suas dúvidas no WhatsApp, sem custo e sem pressão.',
    cta: 'Tirar minhas dúvidas',
    note: 'Conversa gratuita, no seu tempo.',
  },
};

// ============================================================
// Fluxo de perguntas (flat, ~10 — robusto e previsível)
// ============================================================
function buildFlow(a) {
  return ['motivacao', 'situacao', 'faixa', 'capital', 'tempo', 'espaco', 'familiaridade', 'decisor', 'intent', 'motivo'];
}

// ============================================================
// Motor de score (0 a ~86) → qualidade do lead A/B/C (escondido)
// ============================================================
function scoreOf(a) {
  let s = 0;
  s += ({ menos: 0, b22: 8, b35: 16, b55: 24, b85: 30 }[a.faixa] || 0);
  s += ({ avista: 18, parcelar: 13, financiar: 9, socio: 6, naosei: 2 }[a.capital] || 0);
  s += ({ ja: 12, meses: 8, pesquisando: 2 }[a.intent] || 0);
  s += ({ integral: 10, meio: 7, vago: 3 }[a.tempo] || 0);
  s += ({ sozinho: 8, conjuge: 6, socio: 6 }[a.decisor] || 0);
  s += ({ ja_negocio: 8, autonomo: 6, clt: 6, app: 5, parado: 3, outro: 4 }[a.situacao] || 0);
  return s;
}

// Plano roteado 1:1 pela faixa de investimento (cada faixa = a melhor que o orçamento cobre, sem sobreposição com o preço do próximo plano)
function planOf(a) {
  const map = { menos: 'micro', b22: 'micro', b35: 'standard', b55: 'pro', b85: 'ultra' };
  const key = map[a.faixa] || 'micro';
  return { ...PLANS[key], belowEntry: a.faixa === 'menos' };
}

// Persona + abordagem de venda (vai pro Alan via tracker/Kommo)
function personaOf(a) {
  const m = a.motivacao, sit = a.situacao;
  if (m === 'investir') {
    return { name: 'Investidor / quer escalar', approach: 'Pensa em retorno e escala. Vá direto em payback, margem 70-90% e potencial do Pro/Ultra com várias máquinas em paralelo. Mostre o B2B e a recompra de filamento a preço de rede.' };
  }
  if (m === 'nova_fonte' || sit === 'ja_negocio') {
    return { name: 'Já empreende, quer nova fonte', approach: 'Já tem repertório de negócio. Foque em margem, baixa operação (4-6m², roda em casa) e como a farm complementa a renda atual sem virar um segundo emprego pesado.' };
  }
  if (sit === 'app') {
    return { name: 'Trabalhador de app querendo sair da rua', approach: 'Hoje troca tempo por dinheiro na rua. Venda o negócio em casa, previsível, sem depender de plataforma. Mostre o passo a passo (40 dias) e a academy pra quem começa do zero.' };
  }
  if (m === 'sair_clt') {
    return { name: 'CLT planejando a virada', approach: 'Quer segurança na transição. Mostre que dá pra começar em meio período junto do emprego, com suporte e implantação assistida (60 dias). Reduza o medo do risco.' };
  }
  if (m === 'primeiro') {
    return { name: 'Primeiro negócio', approach: 'Nunca empreendeu. Eduque com calma: academy 23+ módulos, gerente de implantação, comunidade. Foque em segurança, não em jargão técnico.' };
  }
  return { name: 'Buscando renda extra', approach: 'Quer uma renda a mais sem virar a vida de cabeça pra baixo. Mostre o Micro Farm rodando em casa, margem alta por peça e o caminho dos 40 dias.' };
}

function classify(a) {
  const score = scoreOf(a);
  const plan = planOf(a);
  // Abaixo do piso (R$ 22 mil = entrada do Micro) DESQUALIFICA: cai em C, não vai pro Meta como Lead.
  const tier = plan.belowEntry ? 'C' : (score >= 56 ? 'A' : score >= 34 ? 'B' : 'C');
  const p = personaOf(a);
  return { tier, score, plan, persona: p.name, approach: p.approach, belowEntry: plan.belowEntry };
}

// Rótulos das respostas pra ficha legível no CRM (pergunta curta + label de cada opção)
const QUAL_LABEL = { A: 'Perfil ideal', B: 'Bom potencial', C: 'Vale conhecer' };
const FICHA = {
  motivacao:     { q: 'O que mais te move', opts: { renda_extra: 'Ter uma renda extra', sair_clt: 'Sair do CLT e ter o meu', primeiro: 'Abrir o primeiro negócio', investir: 'Investir e escalar', nova_fonte: 'Já tem negócio, quer outra fonte' } },
  situacao:      { q: 'Como gera renda hoje', opts: { clt: 'Carteira assinada (CLT)', autonomo: 'Autônomo / tem o próprio negócio', app: 'Trabalha com app ou entregas', parado: 'Parado ou entre empregos', outro: 'Outro' } },
  faixa:         { q: 'Quanto pode investir', opts: { menos: 'Menos de R$ 22 mil', b22: 'R$ 22 a 34 mil', b35: 'R$ 35 a 54 mil', b55: 'R$ 55 a 84 mil', b85: 'R$ 85 mil ou mais' } },
  capital:       { q: 'Como faria o investimento', opts: { avista: 'À vista', parcelar: 'Parcelando', financiar: 'Buscando crédito / financiamento', socio: 'Com um sócio', naosei: 'Ainda não sabe' } },
  tempo:         { q: 'Tempo por dia pro negócio', opts: { integral: 'Tempo integral', meio: 'Meio período', vago: 'Só nas horas vagas' } },
  espaco:        { q: 'Tem espaço de 4 a 6m²', opts: { sim: 'Sim, tem onde montar', organizar: 'Dá pra organizar um espaço', nao: 'Ainda não, mas resolve' } },
  familiaridade: { q: 'Experiência com impressão 3D', opts: { opero: 'Já imprime / tem impressora', conheco: 'Conhece, mas nunca operou', ouvi: 'Já ouviu falar', zero: 'Zero, mas está curioso' } },
  decisor:       { q: 'Quem decide a compra', opts: { sozinho: 'Decide sozinho', conjuge: 'Decide com o cônjuge', socio: 'Decide com um sócio' } },
  intent:        { q: 'Quando quer começar', opts: { ja: 'Quer começar agora', meses: 'Nos próximos meses', pesquisando: 'Só pesquisando' } },
  motivo:        { q: 'Por que faz sentido agora', free: true },
};
const FICHA_ORDER = ['motivacao', 'situacao', 'faixa', 'capital', 'tempo', 'espaco', 'familiaridade', 'decisor', 'intent', 'motivo'];
function buildRespostas(a) {
  return FICHA_ORDER.map((k) => {
    const def = FICHA[k]; if (!def) return null;
    const v = a[k];
    if (def.free) return { q: def.q, a: (v && v !== 'nao_respondeu') ? v : '(não respondeu)' };
    if (v == null) return null;
    return { q: def.q, a: def.opts[v] || v };
  }).filter(Boolean);
}

// Tracker (no-op se não carregou)
const track = (name, data) => {
  try {
    if (typeof window !== 'undefined' && window.lt && typeof window.lt.track === 'function') {
      window.lt.track(name, data || {});
    }
  } catch (_) {}
};

// Máscara de telefone (trata autocomplete +55)
const maskPhoneLocal = (v) => {
  const raw = String(v || '');
  let d = raw.replace(/\D/g, '');
  const hasPlus = raw.trim().startsWith('+');
  if (d.startsWith('55') && (hasPlus || d.length === 12 || d.length === 13)) 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)}`;
};

// ============================================================
// Modal shell
// ============================================================
function QuizModal({ open, onClose }) {
  React.useEffect(() => {
    if (open) document.body.classList.add('qz-lock');
    else document.body.classList.remove('qz-lock');
    return () => document.body.classList.remove('qz-lock');
  }, [open]);
  if (!open) return null;
  return (
    <div className="qz-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="qz-panel" role="dialog" aria-modal="true">
        <QuizFlow onClose={onClose}/>
      </div>
    </div>
  );
}

function QuizFlow({ onClose }) {
  const [phase, setPhase] = React.useState('quiz');
  const [qIndex, setQIndex] = React.useState(0);
  const [tappedKey, setTappedKey] = React.useState(null);
  const [answers, setAnswers] = React.useState({});
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');

  const flow = buildFlow(answers);
  const total = flow.length;
  const currentId = flow[qIndex];

  const setAnswer = (id, value) => {
    const next = { ...answers, [id]: value };
    setAnswers(next);
    track('QuizAnswer', { question: id, value });
    setTappedKey(id + ':' + value);
    setTimeout(() => setTappedKey(null), 360);
    setTimeout(() => {
      if (qIndex + 1 >= buildFlow(next).length) setPhase('capture');
      else setQIndex((i) => i + 1);
    }, 300);
  };

  const goPrev = () => {
    if (phase === 'capture') { setPhase('quiz'); return; }
    if (phase === 'quiz' && qIndex > 0) { setQIndex((i) => i - 1); return; }
    onClose();
  };

  React.useEffect(() => {
    if (phase === 'capture') track('ViewContent', { content_name: 'capture' });
  }, [phase]);

  const showProgress = phase === 'quiz' || phase === 'capture';
  const progressFill = phase === 'capture' ? 100 : (total > 0 ? ((qIndex + 1) / total) * 100 : 0);

  return (
    <>
      <TopChrome fill={showProgress ? progressFill : 0} onBack={goPrev}
                 showBack={!(phase === 'quiz' && qIndex === 0)} onClose={onClose}/>

      <div className="qz-stage">
        <div className="qz-screen" key={phase + ':' + (phase === 'quiz' ? currentId : phase)}>
          {phase === 'quiz' && (
            <QuestionScreen id={currentId} answers={answers} tappedKey={tappedKey} onAnswer={setAnswer}/>
          )}

          {phase === 'capture' && (
            <CaptureScreen
              name={name} setName={setName} phone={phone} setPhone={setPhone}
              onSubmit={() => {
                track('QuizCompleted', { answers });
                setPhase('loading');
                setTimeout(() => setPhase('result'), 1850);
              }}/>
          )}

          {phase === 'loading' && <LoadingScreen name={name}/>}

          {phase === 'result' && (() => {
            const cls = classify(answers);
            return <ResultScreen cls={cls} answers={answers} name={name} phone={phone}/>;
          })()}
        </div>
      </div>
    </>
  );
}

// ============================================================
// Campo aberto (texto livre, opcional) — sentimento/expectativa pro Alan
// ============================================================
function MotivoQuestion({ value, onSubmit }) {
  const [txt, setTxt] = React.useState(value || '');
  return (
    <>
      <h2 className="qz-q-title">Pra fechar: por que esse negócio faz sentido pra você agora?</h2>
      <p className="qz-q-sub">Conta em uma frase. É isso que o especialista lê antes de te chamar. (Opcional)</p>
      <textarea
        className="qz-motivo"
        value={txt}
        onChange={(e) => setTxt(e.target.value)}
        placeholder="Ex: quero sair do CLT, ter uma renda extra em casa, montar meu primeiro negócio sem depender de loja na rua..."
        rows={4}
        maxLength={240}
      />
      <div className="qz-spacer"/>
      <button className="qz-cta" onClick={() => onSubmit(txt.trim() || 'nao_respondeu')}>
        Ver meu resultado
        <Icon name="arrow-right" size={18} stroke={2.2}/>
      </button>
      <button className="qz-skip" onClick={() => onSubmit('nao_respondeu')}>Pular essa</button>
    </>
  );
}

// ============================================================
// Roteador de perguntas
// ============================================================
function QuestionScreen({ id, answers, tappedKey, onAnswer }) {
  const opt = (key, icon, t, s) => ({ key, icon, t, s });
  const Cards = ({ qkey, items }) => (
    <div className="qz-cards">
      {items.map((o) => (
        <OptionCard key={o.key} icon={o.icon} title={o.t} sub={o.s}
          onClick={() => onAnswer(qkey, o.key)}
          selected={answers[qkey] === o.key}
          tapped={tappedKey === qkey + ':' + o.key}/>
      ))}
    </div>
  );

  if (id === 'motivacao') {
    return (
      <>
        <h2 className="qz-q-title">O que mais te move a querer um negócio próprio?</h2>
        <p className="qz-q-sub">Escolhe o que mais combina com o seu momento.</p>
        <Cards qkey="motivacao" items={[
          opt('renda_extra', 'coins', 'Ter uma renda extra', 'Sem largar o que eu já faço'),
          opt('sair_clt', 'briefcase', 'Sair do CLT e ter o meu', 'Construir minha independência'),
          opt('primeiro', 'rocket', 'Abrir meu primeiro negócio', 'Empreender pela primeira vez'),
          opt('investir', 'trending-up', 'Investir e escalar', 'Quero retorno e crescimento'),
          opt('nova_fonte', 'bars', 'Já tenho negócio, quero outra fonte', 'Diversificar minha renda'),
        ]}/>
      </>
    );
  }

  if (id === 'situacao') {
    return (
      <>
        <h2 className="qz-q-title">Como você gera sua renda hoje?</h2>
        <p className="qz-q-sub">Aqui não tem resposta certa nem errada.</p>
        <Cards qkey="situacao" items={[
          opt('clt', 'briefcase', 'Carteira assinada', 'Salário fixo'),
          opt('autonomo', 'store', 'Autônomo / tenho meu negócio', 'Renda ao longo do mês'),
          opt('app', 'car', 'Trabalho com app ou entregas', 'Uber, motoboy, freelas'),
          opt('parado', 'clock', 'Parado ou entre empregos', 'Procurando uma virada'),
          opt('outro', 'user', 'Outro', ''),
        ]}/>
      </>
    );
  }

  if (id === 'faixa') {
    return (
      <>
        <h2 className="qz-q-title">Quanto você consegue investir pra montar seu negócio?</h2>
        <p className="qz-q-sub">É o que define qual modelo de franquia faz sentido pra você. Pode responder na real.</p>
        <Cards qkey="faixa" items={[
          opt('menos', 'wallet', 'Menos de R$ 22 mil', 'Ainda não tenho esse valor'),
          opt('b22', 'coins', 'R$ 22 a 34 mil', ''),
          opt('b35', 'briefcase', 'R$ 35 a 54 mil', ''),
          opt('b55', 'trending-up', 'R$ 55 a 84 mil', ''),
          opt('b85', 'rocket', 'R$ 85 mil ou mais', 'Quero a operação completa'),
        ]}/>
        <Explain label="Por que vocês perguntam isso?">A franquia tem modelos diferentes (mais ou menos máquinas). Saber o quanto cabe no seu bolso é o que deixa o especialista te mostrar o modelo certo, em vez de empurrar o mais caro.</Explain>
      </>
    );
  }

  if (id === 'capital') {
    return (
      <>
        <h2 className="qz-q-title">Como você faria esse investimento?</h2>
        <p className="qz-q-sub">Só pra entender o melhor caminho pra você começar.</p>
        <Cards qkey="capital" items={[
          opt('avista', 'check-circle', 'À vista', 'Tenho o valor disponível'),
          opt('parcelar', 'wallet', 'Parcelando', 'Consigo dividir o investimento'),
          opt('financiar', 'coins', 'Buscando crédito / financiamento', ''),
          opt('socio', 'users', 'Com um sócio', 'Vou dividir com alguém'),
          opt('naosei', 'help', 'Ainda não sei', 'Quero entender as opções'),
        ]}/>
      </>
    );
  }

  if (id === 'tempo') {
    return (
      <>
        <h2 className="qz-q-title">Quanto tempo por dia você teria pra tocar o negócio?</h2>
        <p className="qz-q-sub">A farm roda em casa, dá pra começar em paralelo.</p>
        <Cards qkey="tempo" items={[
          opt('integral', 'clock-fast', 'Tempo integral', 'Quero que seja meu foco'),
          opt('meio', 'clock', 'Meio período', 'Junto com o que já faço'),
          opt('vago', 'calendar', 'Só nas horas vagas', 'Começar devagar'),
        ]}/>
      </>
    );
  }

  if (id === 'espaco') {
    return (
      <>
        <h2 className="qz-q-title">Você tem um espaço de 4 a 6m² pra montar?</h2>
        <p className="qz-q-sub">Pode ser um cômodo, garagem ou cantinho da casa.</p>
        <Cards qkey="espaco" items={[
          opt('sim', 'home', 'Sim, tenho onde montar', ''),
          opt('organizar', 'box', 'Dá pra organizar um espaço', ''),
          opt('nao', 'help', 'Ainda não, mas resolvo', ''),
        ]}/>
      </>
    );
  }

  if (id === 'familiaridade') {
    return (
      <>
        <h2 className="qz-q-title">O quanto você já mexeu com impressão 3D?</h2>
        <p className="qz-q-sub">Não precisa entender nada de 3D pra começar, a academy te ensina do zero.</p>
        <Cards qkey="familiaridade" items={[
          opt('opero', 'printer', 'Já imprimo / tenho impressora', ''),
          opt('conheco', 'cube', 'Conheço, mas nunca operei', ''),
          opt('ouvi', 'info', 'Já ouvi falar', ''),
          opt('zero', 'sparkle', 'Zero, mas tô curioso', 'Quero aprender'),
        ]}/>
      </>
    );
  }

  if (id === 'decisor') {
    return (
      <>
        <h2 className="qz-q-title">Você decide sozinho ou tem mais alguém nessa?</h2>
        <p className="qz-q-sub">Só pra o especialista saber com quem vai conversar.</p>
        <Cards qkey="decisor" items={[
          opt('sozinho', 'user', 'Decido sozinho', ''),
          opt('conjuge', 'users', 'Decido com meu cônjuge', ''),
          opt('socio', 'users', 'Decido com um sócio', ''),
        ]}/>
      </>
    );
  }

  if (id === 'intent') {
    return (
      <>
        <h2 className="qz-q-title">Quando você quer começar?</h2>
        <p className="qz-q-sub">Pode falar na lata, é isso que define como o especialista vai te atender.</p>
        <Cards qkey="intent" items={[
          opt('ja', 'rocket', 'Quero começar agora', 'Já decidi que é isso'),
          opt('meses', 'target', 'Nos próximos meses', 'Tô bem perto'),
          opt('pesquisando', 'info', 'Só pesquisando por enquanto', ''),
        ]}/>
      </>
    );
  }

  if (id === 'motivo') {
    return <MotivoQuestion value={answers.motivo} onSubmit={(v) => onAnswer('motivo', v)}/>;
  }

  return null;
}

// ============================================================
// Captura (nome + WhatsApp antes do resultado)
// ============================================================
function CaptureScreen({ name, setName, phone, setPhone, onSubmit }) {
  const nameRef = React.useRef(null);
  const phoneRef = React.useRef(null);
  const [submitError, setSubmitError] = React.useState('');
  const userTypedRef = React.useRef(false);

  const syncFromDom = () => {
    if (nameRef.current) { const v = nameRef.current.value; setName(prev => (prev !== v ? v : prev)); }
    if (phoneRef.current) { const m = maskPhoneLocal(phoneRef.current.value); setPhone(prev => (prev !== m ? m : prev)); }
  };

  React.useEffect(() => {
    const id = setInterval(() => {
      if (userTypedRef.current) { clearInterval(id); return; }
      syncFromDom();
      if ((phoneRef.current?.value || '').replace(/\D/g, '').length >= 10) clearInterval(id);
    }, 250);
    return () => clearInterval(id);
  }, []);

  const handleSubmit = () => {
    syncFromDom();
    setTimeout(() => {
      const nOk = (nameRef.current?.value || '').trim().length >= 2;
      const pOk = (phoneRef.current?.value || '').replace(/\D/g, '').length >= 10;
      if (!nOk) { setSubmitError('Preenche seu nome (mínimo 2 letras).'); return; }
      if (!pOk) { setSubmitError('Preenche o WhatsApp completo (DDD + número).'); return; }
      setSubmitError(''); onSubmit();
    }, 40);
  };

  return (
    <>
      <h2 className="qz-q-title">Quase lá. Como você se chama?</h2>
      <p className="qz-q-sub">Vou te mandar o modelo ideal e os próximos passos no WhatsApp. Sem custo.</p>

      <div className="qz-fields">
        <div className="qz-field">
          <label htmlFor="qz-name">Seu nome</label>
          <input id="qz-name" ref={nameRef} type="text" placeholder="Como prefere que te chamem"
                 value={name}
                 onChange={(e) => { userTypedRef.current = true; setName(e.target.value); }}
                 onBlur={syncFromDom} onAnimationStart={syncFromDom} autoComplete="given-name"/>
        </div>
        <div className="qz-field">
          <label htmlFor="qz-phone">Seu WhatsApp</label>
          <div className="qz-phone">
            <span className="qz-phone-prefix" aria-hidden="true"><span>🇧🇷</span><span>+55</span></span>
            <input id="qz-phone" ref={phoneRef} type="text" placeholder="(11) 9 1234-5678"
                   value={phone}
                   onChange={(e) => { userTypedRef.current = true; setPhone(maskPhoneLocal(e.target.value)); }}
                   onBlur={syncFromDom} onAnimationStart={syncFromDom}
                   inputMode="numeric" autoComplete="tel" maxLength={20} aria-label="DDD e número do WhatsApp"/>
          </div>
        </div>
      </div>

      {submitError && <div className="qz-error">{submitError}</div>}
      <div className="qz-spacer"/>
      <button className="qz-cta" onClick={handleSubmit}>
        Ver meu resultado
        <Icon name="arrow-right" size={18} stroke={2.2}/>
      </button>
      <div style={{ height: 10 }}/>
      <TrustStrip text="Seus dados não são compartilhados · LGPD"/>
    </>
  );
}

// ============================================================
// Loading
// ============================================================
function LoadingScreen({ name }) {
  const [p, setP] = React.useState(0);
  const phases = ['Analisando seu perfil', 'Cruzando com os modelos de franquia', 'Montando sua recomendação'];
  React.useEffect(() => {
    const t1 = setTimeout(() => setP(1), 600);
    const t2 = setTimeout(() => setP(2), 1200);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);
  const firstName = (name || '').trim().split(' ')[0];
  const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : '';
  return (
    <div className="qz-loading">
      <div className="qz-spinner" aria-hidden="true"/>
      <div className="qz-loading-text">
        {firstName && <p className="qz-loading-hi">Só um instante, {cap(firstName)}…</p>}
        <p className="qz-loading-phase" key={p}>{phases[p]}</p>
        <div className="qz-loading-dots" aria-hidden="true">{[0, 1, 2].map(i => <span key={i} className={i <= p ? 'on' : ''}/>)}</div>
      </div>
    </div>
  );
}

// ============================================================
// Resultado
// ============================================================
const CODE_CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
function makeShortCode() { let s = ''; for (let i = 0; i < 7; i++) s += CODE_CHARS[Math.floor(Math.random() * CODE_CHARS.length)]; return s; }

function ResultScreen({ cls, answers, name, phone }) {
  const { tier, plan } = cls;
  const r = RESULT_VARIANTS[tier];
  const firstName = (name || '').trim().split(' ')[0];
  const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : '';
  const fichaToken = React.useMemo(makeShortCode, []);

  React.useEffect(() => {
    if (!tier) return;
    const digits = (phone || '').replace(/\D/g, '');
    const payload = {
      tier, score: cls.score, qualidade: QUAL_LABEL[tier] || '', plan: plan.name,
      persona: cls.persona, approach: cls.approach,
      respostas: buildRespostas(answers),
      answers: { ...answers, ficha: fichaToken },
      name: name || undefined,
      phone: digits ? `+55${digits}` : undefined,
      phone_formatted: phone || undefined,
    };
    track('LeadCapture', payload);
    if (tier === 'A') track('Lead', payload); // só o A vai pro Meta otimizar
  }, [tier]);

  const onWhatsApp = () => {
    track('WhatsAppClick', { tier, plan: plan.name });
    track('Contact', { tier });
    const fname = firstName ? cap(firstName) : '';
    const msg = encodeURIComponent(
      cls.belowEntry
        ? `Olá! Fiz o teste da franquia NexFarm3D${fname ? ` (sou ${fname})` : ''} e quero entender como me preparar pra começar.\n\nMeu código é #${fichaToken}.`
        : `Olá! Fiz o teste da franquia NexFarm3D${fname ? ` (sou ${fname})` : ''} e o modelo ${plan.name} combinou comigo. Quero ver os números.\n\nMeu código é #${fichaToken}.`
    );
    setTimeout(() => { window.location.href = `https://wa.me/${ESPECIALISTA_WA}?text=${msg}`; }, 80);
  };

  // Abaixo do piso de R$ 22 mil: resultado NEGATIVO (não qualifica, sem WhatsApp)
  if (cls.belowEntry) {
    return (
      <div className="qz-result qz-result--block">
        <div className="qz-block-ic"><Icon name="block" size={38} stroke={2}/></div>
        <h2 className="qz-block-title">
          {firstName ? `${cap(firstName)}, ` : ''}ainda não é o seu momento
        </h2>
        <p className="qz-block-body">
          A franquia NexFarm começa em <b>R$ 22 mil</b>, a Micro Farm, que é a operação mais enxuta. Pelas suas respostas, o melhor é se organizar antes de entrar, pra você começar com o pé firme e não apertado.
        </p>
        <p className="qz-block-body">Quando estiver pronto, é só voltar aqui e fazer o teste de novo.</p>
        <div className="qz-spacer"/>
        <p className="qz-result-note">Não dá pra abrir uma franquia com menos que isso, e a gente prefere ser honesto com você.</p>
      </div>
    );
  }

  return (
    <div className={`qz-result qz-result--${r.css}`}>
      <div className="qz-result-head">
        <span className={`qz-chip ${r.chip.tone}`}>
          <Icon name={r.chip.tone === 'ok' ? 'check-circle' : 'sparkle'} size={13} stroke={2.2}/>
          {r.chip.label}
        </span>
        <h2 className="qz-result-title">
          {firstName ? `${cap(firstName)}, ` : ''}o modelo <b>{plan.name}</b> {r.headline}
        </h2>
      </div>

      {/* Cartão do plano recomendado — SEM preço (o especialista crava) */}
      <div className="qz-plan">
        <div className="qz-plan-top">
          <span className="qz-plan-name">NexFarm3D <b>{plan.name}</b></span>
          <span className="qz-plan-badge">Recomendado pra você</span>
        </div>
        <p className="qz-plan-tag">{plan.tag}</p>
        <div className="qz-plan-stats">
          <div><span className="qz-plan-k">{plan.machines}</span><span className="qz-plan-l">na sua farm</span></div>
          <div><span className="qz-plan-k">{plan.revenue}</span><span className="qz-plan-l">potencial</span></div>
          <div><span className="qz-plan-k">{plan.filament}</span><span className="qz-plan-l">já incluso</span></div>
        </div>
      </div>

      <p className="qz-result-body">{r.body}</p>
      <div className="qz-spacer"/>

      <button className="qz-cta qz-cta--wa" onClick={onWhatsApp}>
        <Icon name="whatsapp" size={20}/><span>{r.cta}</span>
      </button>
      <p className="qz-result-note">{r.note}</p>
    </div>
  );
}

Object.assign(window, { PLANS, PLAN_ORDER, ESPECIALISTA_WA, QuizModal, buildFlow, classify, scoreOf, planOf, personaOf });