// ═══════════════════════════════════════════════════════════════════════════
//  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 (
    <div className="pq">
      <header className="pq__bar">
        <div className="pq__logo">
          <span style={{ color: 'var(--bac-blue)' }}>8</span>
          <span style={{ color: 'var(--bac-navy)' }}>BAC</span>
        </div>
      </header>

      <main className="pq__main">
        {step === 0 && <PqCover onStart={start} />}

        {step === 1 && (
          <PqChoice
            current={1} total={3}
            label="Qual é o seu negócio?"
            options={NEGOCIOS}
            customPlaceholder="Conta pra mim qual: ex. pet shop, oficina…"
            onAnswer={v => pick('negocio', v, 'PlanQuiz_Negocio')}
          />
        )}

        {step === 2 && (
          <PqBudget
            current={2} total={3}
            onAnswer={v => pick('orcamento', v, 'PlanQuiz_Orcamento')}
          />
        )}

        {step === 3 && (
          <PqChoice
            current={3} total={3}
            label="Do que você precisa agora?"
            options={PRECISA}
            onAnswer={v => pick('precisa', v, 'PlanQuiz_Precisa')}
          />
        )}

        {step >= 4 && recomendado && (
          <PqResult
            planId={recomendado}
            answers={answers}
            periodo={periodo}
            setPeriodo={setPeriodo}
            onCTA={() => { fireCustom('PlanQuiz_CTA', { plano: recomendado }); setModalOpen(true); }}
          />
        )}
      </main>

      {modalOpen && (
        <Modal
          answers={answers}
          onClose={() => setModalOpen(false)}
          onSubmit={onCapture}
          buildMessage={buildWhatsAppMessage}
        />
      )}

      <style>{`
        ${pqBtnStyles()}
        ${pqProgressStyles()}
        .pq { min-height: 100vh; min-height: 100dvh; background: var(--bg-alt); display: flex; flex-direction: column; }
        .pq__bar {
          padding: 18px 20px; display: flex; align-items: center; justify-content: center;
          background: #fff; border-bottom: 1px solid var(--line);
        }
        .pq__logo { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.04em; }
        .pq__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 18px 44px; }
        @media (min-width: 720px) { .pq__main { padding: 44px 24px; } }
      `}</style>
    </div>
  );
}

// ─── CAPA ───────────────────────────────────────────────────────────────────
function PqCover({ onStart }) {
  return (
    <section className="pqc">
      <div className="pqc__chip"><span className="pqc__dot"></span>RECOMENDAÇÃO PERSONALIZADA · 1 MINUTO</div>
      <h1 className="pqc__title">Qual plano é<br/><span style={{ color: 'var(--bac-blue)' }}>melhor pra mim?</span></h1>
      <p className="pqc__sub">
        Responde <strong>3 perguntas rápidas</strong> que eu te mostro
        exatamente o plano certo pro momento da sua empresa — sem
        achismo, com base no que você pode investir.
      </p>
      <button className="pq-btn pq-btn--lg" onClick={onStart}>
        Descobrir meu plano
        <Icon name="arrow-right" size={20} />
      </button>
      <div className="pqc__trust"><Icon name="shield-check" size={12} />Sem compromisso · você decide no fim</div>
      <style>{`
        .pqc { width: 100%; max-width: 560px; text-align: center; animation: pqFade .42s var(--ease-out); }
        @keyframes pqFade { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform:translateY(0);} }
        .pqc__chip {
          font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
          color: var(--bac-blue); background: rgba(0,102,254,.08); padding: 8px 14px; border-radius: 999px;
          display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
        }
        .pqc__dot { width:6px;height:6px;border-radius:50%;background:var(--bac-blue);animation:pqPulse 1.6s ease-in-out infinite; }
        @keyframes pqPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.85);} }
        .pqc__title {
          font-family: var(--font-display); font-weight: 900; font-size: clamp(34px,8.5vw,60px);
          line-height: 1.03; letter-spacing: -0.035em; color: var(--ink-1); margin: 0 0 18px;
        }
        .pqc__sub { font-family: var(--font-sans); font-size: 17px; line-height: 1.55; color: var(--ink-3); margin: 0 0 34px; }
        .pqc__sub strong { color: var(--ink-1); font-weight: 700; }
        .pqc__trust {
          font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-4);
          margin-top: 20px; display: inline-flex; align-items: center; gap: 6px;
        }
        @media (min-width: 720px){ .pqc__sub { font-size: 19px; } }
      `}</style>
    </section>
  );
}

// ─── 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 (
    <section className="pqq">
      <div className="pqq__progress">
        <div className="pqq__meta">
          <span className="pqq__step">PERGUNTA {current} DE {total}</span>
          <span className="pqq__pct">{Math.round(pct)}%</span>
        </div>
        <div className="pqq__bar"><div className="pqq__fill" style={{ width: pct + '%' }}></div></div>
      </div>

      <h2 className="pqq__title">{label}</h2>

      <div className="pqq__opts">
        {options.map(opt => (
          <button key={opt.value}
            className={'pqq__opt' + (picked === opt.value ? ' pqq__opt--on' : '')}
            onClick={() => handlePick(opt)} disabled={isLocked}>
            {opt.icon && <span className="pqq__ic"><Icon name={opt.icon} size={22} /></span>}
            <span className="pqq__lb">
              {opt.label}
              {opt.sub && <span className="pqq__sb">{opt.sub}</span>}
            </span>
            <span className="pqq__ar"><Icon name={picked === opt.value ? 'check' : 'arrow-right'} size={18} /></span>
          </button>
        ))}
      </div>

      {showCustom && (
        <form className="pqq__custom" onSubmit={submitCustom}>
          <input className="pqq__cinput" type="text" autoFocus maxLength={60}
            placeholder={customPlaceholder || 'Conta pra mim qual…'}
            value={customText} onChange={e => setCustomText(e.target.value)} />
          <button type="submit" className="pq-btn" disabled={!customText.trim()} style={{ minHeight: 48 }}>
            Continuar <Icon name="arrow-right" size={16} />
          </button>
        </form>
      )}

      <style>{`
        ${pqBtnStyles()}
        .pqq { width: 100%; max-width: 560px; animation: pqFade .4s var(--ease-out); }
        .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; }
        .pqq__opts { display:flex; flex-direction:column; gap:12px; }
        .pqq__opt {
          display:flex; align-items:center; gap:14px; padding:18px; border-radius:14px;
          background:#fff; border:2px solid var(--line); cursor:pointer; text-align:left;
          font-family: var(--font-sans); font-weight:600; font-size:16px; color: var(--ink-1);
          transition: all .16s var(--ease-out); -webkit-tap-highlight-color: transparent; min-height:64px; width:100%;
        }
        .pqq__opt:hover:not(:disabled){ border-color: var(--bac-blue); transform: translateY(-1px); box-shadow:0 4px 16px rgba(0,102,254,.08); }
        .pqq__opt:disabled { opacity:.5; cursor:default; }
        .pqq__opt--on, .pqq__opt--on:disabled { border-color: var(--bac-blue); background: rgba(0,102,254,.06); opacity:1; box-shadow:0 0 0 4px rgba(0,102,254,.12); }
        .pqq__ic { width:40px;height:40px;border-radius:10px;background:rgba(0,102,254,.08);color:var(--bac-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
        .pqq__opt--on .pqq__ic { background: var(--bac-blue); color:#fff; }
        .pqq__lb { flex:1; display:flex; flex-direction:column; gap:3px; }
        .pqq__sb { font-size:12.5px; font-weight:400; color: var(--ink-4); }
        .pqq__ar { color: var(--ink-4); display:flex; flex-shrink:0; transition: transform .16s var(--ease-out); }
        .pqq__opt:hover:not(:disabled) .pqq__ar { transform: translateX(4px); color: var(--bac-blue); }
        .pqq__opt--on .pqq__ar { color: var(--bac-blue); }
        .pqq__custom {
          display:flex; flex-direction:column; gap:10px; margin-top:16px;
          background: rgba(0,102,254,.04); border:1.5px dashed var(--bac-blue); border-radius:14px; padding:16px;
          animation: pqFade .28s var(--ease-out);
        }
        .pqq__cinput {
          font-family: var(--font-sans); font-size:16px; color: var(--ink-1); background:#fff;
          border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; outline:none; width:100%; -webkit-appearance:none;
        }
        .pqq__cinput:focus { border-color: var(--bac-blue); box-shadow: var(--focus-ring); }
        @media (min-width:720px){ .pqq__opt { padding:20px 22px; font-size:17px; min-height:72px; }
          .pqq__custom { flex-direction:row; } .pqq__cinput { flex:1; } }
      `}</style>
    </section>
  );
}

// ─── 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 (
    <section className="pqb">
      <div className="pqq__progress">
        <div className="pqq__meta">
          <span className="pqq__step">PERGUNTA {current} DE {total}</span>
          <span className="pqq__pct">{Math.round(pct)}%</span>
        </div>
        <div className="pqq__bar"><div className="pqq__fill" style={{ width: pct + '%' }}></div></div>
      </div>

      <h2 className="pqq__title">Quanto você pensa investir em marketing por mês?</h2>

      <div className="pqb__note">
        <Icon name="zap" size={14} />
        <span>
          É o valor <strong>TOTAL de marketing</strong>: a prestação de
          serviço da 8BAC <strong>+ o crédito que vai pro tráfego pago</strong>.
          Estudos mostram que investir ~20% do faturamento em marketing
          acelera o crescimento.
        </span>
      </div>

      <form className="pqb__form" onSubmit={submit}>
        <div className="pqb__inputwrap">
          <span className="pqb__prefix">R$</span>
          <input
            className="pqb__input"
            type="text" inputMode="numeric" autoFocus
            placeholder="0"
            value={fmt}
            onChange={e => setRaw(e.target.value)}
          />
          <span className="pqb__suffix">/mês</span>
        </div>

        <div className="pqb__hint">
          {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.'}
        </div>

        <button type="submit" className="pq-btn" disabled={num < 50}>
          Ver meu plano ideal
          <Icon name="arrow-right" size={18} />
        </button>
      </form>

      <style>{`
        ${pqBtnStyles()}
        .pqb { width:100%; max-width:560px; animation: pqFade .4s var(--ease-out); }
        .pqb__note {
          display:flex; gap:10px; align-items:flex-start;
          background: rgba(0,102,254,.06); border:1px solid rgba(0,102,254,.18);
          border-radius:12px; padding:14px 16px; margin-bottom:24px;
          font-family: var(--font-sans); font-size:13.5px; line-height:1.5; color: var(--ink-2);
        }
        .pqb__note strong { color: var(--bac-navy); font-weight:700; }
        .pqb__note > span > :first-child { color: var(--bac-blue); }
        .pqb__form { display:flex; flex-direction:column; gap:16px; }
        .pqb__inputwrap {
          display:flex; align-items:center; gap:10px;
          background:#fff; border:2px solid var(--line); border-radius:14px; padding:18px 20px;
          transition: border-color .15s var(--ease-out);
        }
        .pqb__inputwrap:focus-within { border-color: var(--bac-blue); box-shadow: var(--focus-ring); }
        .pqb__prefix { font-family: var(--font-display); font-weight:900; font-size:24px; color: var(--ink-3); }
        .pqb__input {
          flex:1; border:0; outline:0; background:transparent;
          font-family: var(--font-display); font-weight:900; font-size:32px; color: var(--ink-1);
          width:100%; -webkit-appearance:none; letter-spacing:-0.02em;
        }
        .pqb__input::placeholder { color: var(--ink-5,#d1d1d6); }
        .pqb__suffix { font-family: var(--font-sans); font-weight:600; font-size:14px; color: var(--ink-4); }
        .pqb__hint { font-family: var(--font-sans); font-size:13px; color: var(--bac-blue); min-height:18px; font-weight:600; }
        @media (min-width:720px){ .pqb__input { font-size:38px; } }
      `}</style>
    </section>
  );
}

// ─── 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 (
    <section className="pqr">
      <div className="pqr__top">
        <div className="pqr__eyebrow">SEU PLANO IDEAL</div>
        <div className="pqr__planname">{plan.nome}</div>
        <div className="pqr__tag">{plan.tagline}</div>
      </div>

      {!isAvulso && (
        <div className="pqr__toggle">
          {[['mensal','Mensal'],['semestral','Semestral'],['anual','Anual']].map(([k,lb]) => (
            <button key={k}
              className={'pqr__tg' + (periodo === k ? ' pqr__tg--on' : '')}
              onClick={() => setPeriodo(k)}>
              {lb}
              {k === 'semestral' && <span className="pqr__badge">-15%</span>}
              {k === 'anual' && <span className="pqr__badge">2 grátis</span>}
            </button>
          ))}
        </div>
      )}

      <div className="pqr__price">
        <div className="pqr__pmain">{BRL(p.total)}</div>
        <div className="pqr__psub">
          {isAvulso ? 'pagamento único' : p.sufixo}
          {!isAvulso && periodo !== 'mensal' && ` · equivale a ${BRL(p.equiv)}/mês`}
        </div>
      </div>

      <div className="pqr__why">
        <Icon name="check-circle" size={16} />
        <p>{motivo}</p>
      </div>

      <ul className="pqr__feats">
        {plan.features.map(([nome, val], i) => (
          <li key={i}>
            <span className={'pqr__fic' + (val === false ? ' pqr__fic--no' : '')}>
              <Icon name={val === false ? 'x' : 'check'} size={14} />
            </span>
            <span className="pqr__fnome">{nome}</span>
            {typeof val === 'string' && <span className="pqr__fval">{val}</span>}
          </li>
        ))}
      </ul>

      <button className="pq-btn pq-btn--lg" onClick={onCTA} style={{ maxWidth: '100%' }}>
        <Icon name="message-circle" size={20} />
        Quero esse plano
        <Icon name="arrow-right" size={18} />
      </button>

      {!isAvulso && (
        <details className="pqr__compare">
          <summary>Comparar com os outros planos</summary>
          <div className="pqr__tablewrap">
            <table className="pqr__table">
              <thead>
                <tr>
                  <th></th>
                  {RECORRENTES.map(id => (
                    <th key={id} className={id === planId ? 'pqr__th--on' : ''}>
                      {PLANS[id].nome}<br/><small>{BRL(PLANS[id].precoMensal)}/mês</small>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {PLANS.completo.features.map(([nome], r) => (
                  <tr key={r}>
                    <td className="pqr__rowlabel">{nome}</td>
                    {RECORRENTES.map(id => {
                      const v = PLANS[id].features[r][1];
                      return (
                        <td key={id} className={id === planId ? 'pqr__td--on' : ''}>
                          {v === true ? '✓' : v === false ? '—' : v}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </details>
      )}

      <style>{`
        ${pqBtnStyles()}
        .pqr { width:100%; max-width:560px; animation: pqFade .45s var(--ease-out); }
        .pqr__top { text-align:center; margin-bottom:22px; }
        .pqr__eyebrow { font-family: var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em; color: var(--bac-blue); margin-bottom:8px; }
        .pqr__planname { font-family: var(--font-display); font-weight:900; font-size: clamp(36px,9vw,56px); line-height:1; letter-spacing:-0.035em; color: var(--ink-1); }
        .pqr__tag { font-family: var(--font-sans); font-size:14px; color: var(--ink-3); margin-top:8px; }
        .pqr__toggle {
          display:flex; gap:6px; background:#fff; border:1px solid var(--line);
          border-radius:12px; padding:5px; margin-bottom:18px;
        }
        .pqr__tg {
          flex:1; border:0; background:transparent; cursor:pointer;
          font-family: var(--font-sans); font-weight:600; font-size:13px; color: var(--ink-3);
          padding:11px 6px; border-radius:8px; transition: all .14s var(--ease-out);
          display:flex; flex-direction:column; align-items:center; gap:3px; -webkit-tap-highlight-color:transparent;
        }
        .pqr__tg--on { background: var(--bac-blue); color:#fff; }
        .pqr__badge { font-family: var(--font-mono); font-size:9px; font-weight:700; opacity:.85; }
        .pqr__price { text-align:center; margin-bottom:20px; }
        .pqr__pmain { font-family: var(--font-display); font-weight:900; font-size: clamp(34px,8vw,48px); color: var(--bac-blue); line-height:1; letter-spacing:-0.03em; }
        .pqr__psub { font-family: var(--font-sans); font-size:13px; color: var(--ink-4); margin-top:6px; }
        .pqr__why {
          display:flex; gap:10px; align-items:flex-start;
          background: rgba(0,166,90,.07); border:1px solid rgba(0,166,90,.2);
          border-radius:12px; padding:14px 16px; margin-bottom:20px;
        }
        .pqr__why > :first-child { color: var(--success); flex-shrink:0; margin-top:1px; }
        .pqr__why p { margin:0; font-family: var(--font-sans); font-size:14px; line-height:1.5; color: var(--ink-2); }
        .pqr__feats { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; }
        .pqr__feats li { display:flex; align-items:center; gap:11px; font-family: var(--font-sans); font-size:15px; color: var(--ink-2); }
        .pqr__fic { width:24px;height:24px;border-radius:50%;background:rgba(0,166,90,.12);color:var(--success);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
        .pqr__fic--no { background: var(--bg-alt); color: var(--ink-5,#c8c8cd); }
        .pqr__fnome { flex:1; }
        .pqr__fval { font-family: var(--font-mono); font-size:12px; font-weight:600; color: var(--bac-blue); }
        .pqr__compare { margin-top:22px; }
        .pqr__compare summary {
          cursor:pointer; font-family: var(--font-sans); font-size:14px; font-weight:600;
          color: var(--bac-blue); text-align:center; list-style:none; padding:10px;
        }
        .pqr__compare summary::-webkit-details-marker { display:none; }
        .pqr__tablewrap { overflow-x:auto; margin-top:12px; -webkit-overflow-scrolling:touch; }
        .pqr__table { width:100%; border-collapse:collapse; font-family: var(--font-sans); font-size:12.5px; min-width:420px; }
        .pqr__table th, .pqr__table td { padding:10px 8px; text-align:center; border-bottom:1px solid var(--line); }
        .pqr__table th { font-family: var(--font-display); font-weight:900; font-size:13px; color: var(--ink-1); }
        .pqr__table th small { font-family: var(--font-mono); font-weight:600; font-size:10px; color: var(--ink-4); }
        .pqr__th--on, .pqr__td--on { background: rgba(0,102,254,.06); }
        .pqr__th--on { color: var(--bac-blue) !important; }
        .pqr__rowlabel { text-align:left !important; font-weight:600; color: var(--ink-2); }
      `}</style>
    </section>
  );
}
