// ClientsCarousel — marquesina infinita con logotipos reales.
// Las imágenes se inyectan vía window.__resources cuando el HTML está
// bundleado standalone; en local se sirven desde assets/logos/.

const LOGO_FALLBACKS = {
  panamericana: 'assets/logos/panamericana.png',
  padelNuestro: 'assets/logos/padel-nuestro.png',
  pccomponentes: 'assets/logos/pccomponentes.png',
  t2o: 'assets/logos/t2o.png',
  darwinVerne: 'assets/logos/darwin-verne.jpg',
};

function logoSrc(key) {
  return (window.__resources && window.__resources[key]) || LOGO_FALLBACKS[key];
}

const LOGOS = [
  { name: 'Padel Nuestro',  key: 'padelNuestro' },
  { name: 'PcComponentes',  key: 'pccomponentes' },
  { name: 'E. M. Panamericana', key: 'panamericana' },
  { name: 'Darwin & Verne', key: 'darwinVerne' },
  { name: 't2ó',            key: 't2o' },
];

function ClientsCarousel() {
  const items = [...LOGOS, ...LOGOS, ...LOGOS]; // triplicado para loop denso
  return (
    <div className="tk-logos" aria-label="Marcas con las que he trabajado">
      <div className="tk-logos-track">
        {items.map((l, i) => (
          <div className="tk-logo" key={i} title={l.name} aria-label={l.name}>
            <img src={logoSrc(l.key)} alt={l.name} className="tk-logo-img" loading="lazy" />
          </div>
        ))}
      </div>
    </div>
  );
}

window.ClientsCarousel = ClientsCarousel;