/**
 * TrustBar — faixa pós-hero. A LP vende a IA, então os 3 selos falam de
 * ATRIBUTOS DO PRODUTO (treinamento de nicho, implementação feita por nós,
 * validação antes do ar).
 *
 * Desktop: 3 colunas centradas.
 * Mobile: marquee horizontal — os itens rolam sozinhos numa única faixa
 * (os itens são duplicados pra dar loop contínuo).
 */
const TrustBar = () => {
  const items = [
    { emoji: '🧠', stat: 'Treinada no seu nicho', label: 'não é chatbot genérico' },
    { emoji: '⚡', stat: 'Implementação feita por nós', label: 'você não toca em nada técnico' },
    { emoji: '🚀', stat: 'IA validada antes de ir pro ar', label: 'testada no seu nicho antes do cliente' },
  ];

  const renderItem = (it, i, dup) => (
    <li
      key={(dup ? 'd' : '') + i}
      className={`trust-bar-item ${dup ? 'trust-bar-item-dup' : ''}`}
      aria-hidden={dup ? 'true' : undefined}
    >
      <span className="trust-bar-emoji" aria-hidden="true">{it.emoji}</span>
      <span className="trust-bar-stat">{it.stat}</span>
      <span className="trust-bar-label">{it.label}</span>
    </li>
  );

  return (
    <section className="trust-bar" data-screen-label="02 Trust Bar">
      <div className="trust-bar-viewport">
        <ul className="trust-bar-list">
          {items.map((it, i) => renderItem(it, i, false))}
          {/* duplicata só pro loop do marquee no mobile */}
          {items.map((it, i) => renderItem(it, i, true))}
        </ul>
      </div>
    </section>
  );
};

window.TrustBar = TrustBar;