/**
 * VendedorHumanoVsIA — confronto ponto a ponto entre contratar um vendedor
 * humano e ativar o vendedor IA. Formato de linhas por aspecto, com a coluna
 * IA destacada em verde, pra dar peso aos principais pontos (custo, jornada,
 * rotatividade...). Amarra com o Hero ("seu novo vendedor IA").
 */
const VendedorHumanoVsIA = () => {
  const rows = [
    {
      aspecto: 'Custo mensal',
      icon: '💰',
      humano: 'Salário + comissão + encargos: FGTS, INSS, 13º e férias.',
      ia: 'Custo fixo previsível — sem encargos, sem comissão, sem meta.',
    },
    {
      aspecto: 'Treinamento',
      icon: '🎓',
      humano: 'Semanas de treino até começar a performar de verdade.',
      ia: 'Treinada uma vez pelo nosso time: já entra performando.',
    },
    {
      aspecto: 'Rotatividade',
      icon: '🔁',
      humano: 'Pede demissão e você recomeça: novo processo, nova curva.',
      ia: 'Nunca pede demissão, nunca some, nunca precisa repor.',
    },
    {
      aspecto: 'Disponibilidade',
      icon: '🕐',
      humano: '8h por dia, folga no fim de semana, tira férias e falta.',
      ia: '24 horas por dia, 7 dias por semana — sem férias nem falta.',
    },
    {
      aspecto: 'Capacidade',
      icon: '⚡',
      humano: 'Atende um lead por vez — o resto espera na fila ou desiste.',
      ia: 'Atende leads ilimitados ao mesmo tempo, sem fila.',
    },
    {
      aspecto: 'Consistência',
      icon: '📈',
      humano: 'Tem dia ruim, esquece o script e pede aumento.',
      ia: 'Performa igual todo dia, segue o script e não pede aumento.',
    },
  ];

  return (
    <section className="section section-humano-ia" id="humano-vs-ia" data-screen-label="06 Humano vs IA">
      <div className="container">
        <div className="section-heading section-heading-humano-ia">
          <div className="eyebrow"><span className="dot"></span>A CONTA QUE NÃO FECHA</div>
          <h2>Compare a contratação de um <br/>Vendedor com uma <span className="text-accent">IA</span></h2>
          <p>Um vendedor humano custa muito além do salário — e, mesmo assim, folga, falta e um dia vai embora. Veja a diferença, ponto a ponto.</p>
        </div>

        <div className="hia-vs" role="table" aria-label="Vendedor humano vs Vendedor IA">
          <div className="hia-vs-head" role="row">
            <div className="hia-vs-head-aspecto" role="columnheader"></div>
            <div className="hia-vs-head-humano" role="columnheader">
              <Icon.Users size={20}/>
              <span>Vendedor humano</span>
            </div>
            <div className="hia-vs-head-ia" role="columnheader">
              <Icon.Spark size={20}/>
              <span>Vendedor IA ConversApp</span>
            </div>
          </div>

          {rows.map((r, i) => (
            <div key={i} className="hia-vs-row" role="row">
              <div className="hia-vs-aspecto" role="cell">
                <span className="hia-vs-aspecto-icon" aria-hidden="true">{r.icon}</span>
                <span>{r.aspecto}</span>
              </div>
              <div className="hia-vs-cell hia-vs-cell-humano" role="cell">
                <span className="hia-vs-mark hia-vs-mark-x" aria-hidden="true"><Icon.X size={13}/></span>
                <span>{r.humano}</span>
              </div>
              <div className="hia-vs-cell hia-vs-cell-ia" role="cell">
                <span className="hia-vs-mark hia-vs-mark-check" aria-hidden="true"><Icon.Check size={13}/></span>
                <span>{r.ia}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.VendedorHumanoVsIA = VendedorHumanoVsIA;