// clients.jsx - Parceiros / Clientes (carrossel de logos com scroll infinito)
const CLIENT_LOGOS = [
  { src: 'assets/clients/3r.png',               alt: '3R Consultoria e Contabilidade' },
  { src: 'assets/clients/abrass.png',           alt: 'ABRASS (Associação Brasileira de Saúde)' },
  { src: 'assets/clients/divulgavc.png',        alt: 'divulga.vc' },
  { src: 'assets/clients/doctor-marketing.png', alt: 'Doctor Marketing' },
  { src: 'assets/clients/idvl.png',             alt: 'IDVL — Tecnologia Contábil' },
  { src: 'assets/clients/medery.png',           alt: 'Medery' },
  { src: 'assets/clients/sercon.png',           alt: 'Sercon Gestão Contábil' },
  { src: 'assets/clients/smartmed.png',         alt: 'SmartMed' },
  { src: 'assets/clients/sobisa.png',           alt: 'SOBISA (Sociedade Brasileira de Incentivo à Saúde)' },
  { src: 'assets/clients/united.png',           alt: 'Grupo United' },
  { src: 'assets/clients/viva.png',             alt: 'Viva Gestão em Saúde' },
];

const ClientsStrip = () => {
  const { lang } = useLang();
  const eyebrow = lang === 'pt' ? 'Clientes & Parceiros' : 'Clients & Partners';
  const title = lang === 'pt'
    ? 'Companhias que caminham conosco'
    : 'Companies walking with us';

  // Duplicate list so the marquee loops seamlessly
  const loop = [...CLIENT_LOGOS, ...CLIENT_LOGOS];

  return (
    <section className="clients" id="clients" aria-labelledby="clients-title">
      <div className="clients-head">
        <div className="eyebrow">{eyebrow}</div>
        <h2 id="clients-title" className="clients-title">{title}</h2>
      </div>

      <div className="clients-marquee" aria-hidden="false">
        <div className="clients-track">
          {loop.map((l, i) => (
            <div className={"clients-item" + (l.square ? " is-square" : "")} key={i}>
              <img src={l.src} alt={l.alt} loading="lazy"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.ClientsStrip = ClientsStrip;