/* global React */
const LOGOS = [
  { src: 'assets/clients/motivated.png',  alt: 'Motivated',  cls: 'rn-marquee__item--wide' },
  { src: 'assets/clients/mastercard.png', alt: 'Mastercard', cls: '' },
  { src: 'assets/clients/irdrea.png',     alt: 'Irdrea',     cls: 'rn-marquee__item--tall' },
];

function LogoMarquee() {
  const seq = [...LOGOS, ...LOGOS, ...LOGOS, ...LOGOS];
  return (
    <div className="rn-marquee" aria-label="Selected clients">
      <div className="rn-marquee__head">
        <span className="rn-marquee__head-tri">△</span>
        <span className="rn-marquee__head-label">Trusted by</span>
        <span className="rn-marquee__count">{`0${LOGOS.length}`} partners</span>
      </div>
      <div className="rn-marquee__viewport">
        <div className="rn-marquee__track">
          {seq.map((l, i) => (
            <div className={`rn-marquee__item ${l.cls}`} key={i}>
              <img src={l.src} alt={l.alt} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.LogoMarquee = LogoMarquee;