/**
 * ComoFunciona3Passos — 5ª onda: continua descrevendo a jornada (agendar →
 * call → contrato/setup), mas o CTA inline do passo 1 agora lê
 * HERO_ACTIVE_VARIANT pra alinhar com a família global de CTAs (vende a IA,
 * reunião é canal).
 */
const ComoFunciona3Passos = () => {
  // CTA inline do passo 1 — alinhado com Hero/CTAFinal/FAQ.
  const variant = (typeof HERO_ACTIVE_VARIANT !== 'undefined') ? HERO_ACTIVE_VARIANT : 'A';
  const ctaTexts = {
    A: 'Quero conhecer esta IA',
    B: 'Quero parar de perder esses leads',
    C: 'Ver o sistema pro meu nicho',
  };
  const inlineCta = ctaTexts[variant] || ctaTexts.A;

  const steps = [
    {
      num: '01',
      kicker: 'AGORA',
      title: 'Agende uma apresentação de 30 min',
      text: 'Clique no botão abaixo e preencha o nosso formulário de 3 perguntas. Nosso time entra em contato com você para agendarmos a apresentação.',
      ctaInline: true,
    },
    {
      num: '02',
      kicker: 'NA CALL',
      title: 'Te mostramos a IA do seu nicho ao vivo',
      text: 'Via Google Meet. Entenderemos o seu caso e te apresentamos a IA ideal que já tem funcionado para outros escritórios e como poderemos aumentar seus números.',
      ctaInline: false,
    },
    {
      num: '03',
      kicker: 'DEPOIS DE CONTRATADO',
      title: 'Quando fechar, assumimos o setup e configuração completa',
      text: 'Depois de nos contratar, treinamos sua IA do seu jeito para atender no WhatsApp, gerenciar seu CRM e te entregar relatórios diários sem complicação.',
      ctaInline: false,
    },
  ];

  return (
    <section className="section section-light section-3passos" id="como-funciona" data-screen-label="06 Como Funciona">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>COMO CONHECER NOSSA IA</div>
          <h2>Agende uma reunião de apresentação<br/><span className="text-accent">com nosso time.</span></h2>
          <p>Nessa reunião serão apresentadas todas as nossas IAs, bem como escritórios que atuam na sua área de atuação e já possuem resultado.</p>
        </div>

        <div className="passos-grid">
          {steps.map((s, i) => (
            <div key={i} className="passo-card reveal">
              <div className="passo-num">{s.num}</div>
              <div className="passo-kicker">{s.kicker}</div>
              <h3>{s.title}</h3>
              <p>{s.text}</p>
            </div>
          ))}
        </div>

        <div className="passos-cta-wrap">
          <button
            type="button"
            className="btn passos-cta"
            onClick={() => window.dispatchEvent(new CustomEvent('open-demo-modal'))}
          >
            {inlineCta} <Icon.Arrow/>
          </button>
        </div>
      </div>
    </section>
  );
};

window.ComoFunciona3Passos = ComoFunciona3Passos;