/* Carrousel "Ils nous ont fait confiance" : défilement infini en CSS pur.
   10 emplacements : remplacer simplement les fichiers
   public/logos/logo-01.png ... logo-10.png (hauteur affichée 52 px). */

const LOGOS = Array.from({ length: 10 }, (_, i) => ({
  src: `/logos/logo-${String(i + 1).padStart(2, "0")}.png`,
  alt: `Logo client ${i + 1}`,
}));

function Track({ hidden }: { hidden?: boolean }) {
  return (
    <div className="logo-track" aria-hidden={hidden || undefined}>
      {LOGOS.map((logo) => (
        // eslint-disable-next-line @next/next/no-img-element -- logos remplaçables à chaud, pas d'optimisation
        <img key={logo.src} src={logo.src} alt={hidden ? "" : logo.alt} height={52} loading="lazy" />
      ))}
    </div>
  );
}

export default function TrustMarquee() {
  return (
    <section className="trust" aria-label="Ils nous ont fait confiance">
      <h2>Ils nous ont fait confiance</h2>
      <div className="logo-marquee">
        <Track />
        {/* Piste dupliquée pour la boucle infinie */}
        <Track hidden />
      </div>
    </section>
  );
}