/* global React */
const BRAND_LOGOS = [
  { src: "assets/brand-1.webp", alt: "Innoaesthetics" },
  { src: "assets/brand-2.webp", alt: "ME LINE" },
  { src: "assets/brand-3.webp", alt: "Janssen Cosmetics" },
  { src: "assets/brand-4.webp", alt: "Athos" },
  { src: "assets/brand-5.webp", alt: "clean + easy" },
];

function Strip() {
  const row = [...BRAND_LOGOS, ...BRAND_LOGOS];
  return (
    <div className="vsc-strip" aria-label="Marcas que usamos" data-screen-label="Brand logos strip">
      <div className="vsc-strip-logos-track">
        {row.map((b, i) => (
          <div key={i} className="vsc-strip-logo-item">
            <div className="vsc-strip-logo-circle">
              <img src={b.src} alt={b.alt} loading="lazy" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.Strip = Strip;