/**
 * Problem.jsx — bloco PAS (Problem · Agitate · Solution-bridge) entre Hero e
 * FunnelDifferentials. 3 variantes de copy prontas pra A/B testing, ativadas
 * pela constante PROBLEM_ACTIVE_VARIANT abaixo.
 *
 * Estrutura de cada variante:
 *   eyebrow → P (heading)
 *           → A (intro/agitação) + 3 cards (detalham faces da dor)
 *           → S-bridge (frase de ponte pro mecanismo das 4 IAs)
 *
 * Foco por variante:
 *   A — leads perdidos das 22h         (horário comercial)
 *   B — vendedor some no sábado        (rotatividade + cobertura)
 *   C — lead chegou tarde, fechou com  (perda direta pro concorrente)
 *       o concorrente
 *
 * NOTA: componente fora da rotação do App.jsx (substituído por AntesDepois).
 * Mantido só por compat. Copy alinhada à regra "IA é vendedor, não secretária".
 */

// Troque pra 'B' ou 'C' pra ativar a variante correspondente. Em produção,
// um teste A/B real seria conectado aqui via flag/cookie/querystring.
const PROBLEM_ACTIVE_VARIANT = 'A';

const PROBLEM_VARIANTS = {
  // VARIANT-A — leads perdidos das 22h (horário)
  A: {
    eyebrow: 'O PROBLEMA',
    headingTop: 'Seu escritório dorme.',
    headingAccent: 'O cliente, não.',
    intro: 'Toda noite, lead bate no seu WhatsApp depois das 19h. Você não vê — seu time já saiu. Quando volta às 8h da manhã, o cliente já contratou em outro lugar. Você pagou pela mídia. O outro escritório levou o contrato.',
    cards: [
      {
        stat: '67%',
        title: 'Dos leads chegam fora do horário comercial',
        text: 'Mídia paga roda 24h. Sua equipe atende 8h. A conta nunca fecha — você compra atenção que ninguém colhe.',
      },
      {
        stat: '< 5min',
        title: 'É a janela pra responder antes do lead desistir',
        text: 'Estudo da Harvard Business Review: leads contatados em até 5 minutos têm 21x mais chance de conversão. Quem responde em 1h já perdeu.',
      },
      {
        stat: '0',
        title: 'É quanto você fatura enquanto o WhatsApp vibra sozinho',
        text: 'Sábado, domingo, feriado, madrugada. Cada mensagem não respondida é um cliente que vai pro Google de novo — e dessa vez, pro concorrente.',
      },
    ],
    bridge: 'A solução não é contratar mais gente. É colocar uma IA treinada na sua área pra atender no segundo zero, qualquer hora, qualquer dia.',
  },

  // VARIANT-B — vendedor some no sábado (rotatividade + cobertura)
  B: {
    eyebrow: 'O PROBLEMA',
    headingTop: 'Seu melhor vendedor',
    headingAccent: 'vai pedir demissão.',
    intro: 'E quando for, vão 3 meses pra repor: recrutar, treinar, esperar produzir. Enquanto isso, o WhatsApp do escritório vira mural de "qual é o valor?" sem resposta. E você descobre que sua operação inteira dependia de uma pessoa.',
    cards: [
      {
        stat: '3 meses',
        title: 'Pra repor um vendedor que pediu pra sair',
        text: 'Anúncio, entrevista, treinamento, rampa. No meio, o atendimento cai pela metade — e o resultado, junto.',
      },
      {
        stat: '8h/dia',
        title: 'É todo o atendimento humano que cabe num CLT',
        text: 'Tira folga, almoço, banheiro, conversa entre colegas. Sobra metade disso de tempo útil. E aos sábados ninguém atende.',
      },
      {
        stat: 'R$ 3,5k',
        title: 'Custa um vendedor/SDR CLT por mês, com encargos',
        text: 'Mais 13º, férias, FGTS, plano. Pra atender um turno de um WhatsApp. Faça a conta de quanto custa cobrir 24/7.',
      },
    ],
    bridge: 'Uma IA treinada na sua área não pede demissão, não tira férias e cobre 24/7 com o mesmo padrão de atendimento que você definiu.',
  },

  // VARIANT-C — lead chegou tarde, fechou com o concorrente (perda direta)
  C: {
    eyebrow: 'O PROBLEMA',
    headingTop: 'Enquanto você dorme,',
    headingAccent: 'o cliente assina em outro.',
    intro: 'Você investe em mídia, em equipe, em estrutura. Mas o ponto de fuga é sempre o mesmo: o tempo entre o lead bater na porta e alguém responder. Aí mora a hemorragia — e ela tem nome: o escritório do lado da sua.',
    cards: [
      {
        stat: 'R$ 280',
        title: 'É o CPL médio que escritórios pagam pra mídia paga',
        text: 'E o lead morre na fila porque a equipe não dá conta de qualificar. Você paga caro pra trazer e perde de graça.',
      },
      {
        stat: '21h47',
        title: 'É o horário em que seu lead caro fechou com o concorrente',
        text: 'Ele perguntou "qual o valor?" às 21h44. Ninguém respondeu. Três minutos depois, mandou a mesma pergunta pro próximo da lista do Google. Esse atendeu.',
      },
      {
        stat: '8x',
        title: 'É o quanto a conversão sobe quando o atendimento é instantâneo',
        text: 'Sai dos 2,5% do mercado pros 20% que escritórios bem-operados entregam. A diferença não está no preço da consulta — está no tempo de resposta.',
      },
    ],
    bridge: 'O remédio é fechar essa janela. Uma IA na sua área responde no segundo zero — e o lead que ia pro concorrente fica.',
  },
};

const Problem = () => {
  const v = PROBLEM_VARIANTS[PROBLEM_ACTIVE_VARIANT] || PROBLEM_VARIANTS.A;

  return (
    <section className="section section-problem" id="problema" data-screen-label="03 Problema">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>{v.eyebrow}</div>
          <h2>{v.headingTop}<br/><span className="text-danger">{v.headingAccent}</span></h2>
          <p>{v.intro}</p>
        </div>

        <div className="problem-cards">
          {v.cards.map((c, i) => (
            <div key={i} className="problem-card reveal">
              <div className="stat">{c.stat}</div>
              <h3>{c.title}</h3>
              <p>{c.text}</p>
            </div>
          ))}
        </div>

        <p className="problem-bridge reveal">{v.bridge}</p>
      </div>
    </section>
  );
};

window.Problem = Problem;