const HowItWorks = () => {
  const stages = [
    { label: 'INPUT', title: 'Lead bruto', sub: 'Mídia paga, indicação, site', icon: <Icon.Users/> },
    { label: 'ETAPA 01', title: 'Atendimento', sub: 'IA responde em segundos', icon: <Icon.Whatsapp/> },
    { label: 'ETAPA 02', title: 'Qualificação', sub: 'Caso elegível? Ticket?', icon: <Icon.Filter/> },
    { label: 'ETAPA 03', title: 'Conversão', sub: 'Reunião ou contrato', icon: <Icon.Bolt/> },
  ];

  const steps = [
    { num: '01', title: 'Conecte seu WhatsApp', text: 'Integração nativa com WhatsApp Business API. Mantém o número do escritório.' },
    { num: '02', title: 'Treinamos sua IA', text: 'Adaptamos para sua área (trabalhista, previdenciário, etc), tom de voz e critérios.' },
    { num: '03', title: 'Conectamos seu CRM', text: 'Sai do tipo "lead bruto" e cai no CRM como "qualificado" ou "agendado".' },
    { num: '04', title: 'Você acompanha tudo', text: 'Painel com cada conversa, fila de aprovação humana e relatórios em tempo real.' },
  ];

  return (
    <section className="section section-light" id="como-funciona" data-screen-label="04 Como Funciona">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>COMO FUNCIONA</div>
          <h2>Do lead frio<br/>ao contrato fechado.<br/><span className="text-accent">Em uma esteira.</span></h2>
          <p>Pense na sua operação como uma linha de produção: lead entra de um lado, contrato sai do outro. A IA do ConversApp é a esteira que faz o trabalho duro no meio.</p>
        </div>

        <div className="belt-wrap">
          <div className="belt">
            <div className="belt-track"></div>
            <div className="belt-pellets">
              <div className="belt-pellet"></div>
              <div className="belt-pellet"></div>
              <div className="belt-pellet"></div>
              <div className="belt-pellet"></div>
              <div className="belt-pellet"></div>
            </div>
            <div className="belt-stages">
              {stages.map((s, i) => (
                <div key={i} className="belt-stage">
                  <div className="icon-wrap">{s.icon}</div>
                  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2}}>
                    <div className="label">{s.label}</div>
                    <div className="title">{s.title}</div>
                    <div className="sub">{s.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step-card">
              <div className="num">{s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;