// ProviderStrip — the marquee of partner provider logos.
function ProviderStrip() {
  const logos = [
    { src: 'assets/providers/gexa.png', alt: 'Gexa Energy' },
    { src: 'assets/providers/direct-energy.png', alt: 'Direct Energy' },
    { src: 'assets/providers/energy-texas.png', alt: 'Energy Texas' },
    { src: 'assets/providers/reliant.png', alt: 'Reliant' },
    { src: 'assets/providers/txu.png', alt: 'TXU Energy' },
    { src: 'assets/providers/rhythm.png', alt: 'Rhythm' },
    { src: 'assets/providers/apge.png', alt: 'APG&E' },
    { src: 'assets/providers/octopus.png', alt: 'Octopus Energy' }
  ];
  const reel = [...logos, ...logos, ...logos];
  return (
    <div className="providers">
      <div className="providers-inner">
        {reel.map((logo, i) =>
          <img key={i} className="prov-logo" src={logo.src} alt={logo.alt} aria-hidden={i >= logos.length ? "true" : undefined} />
        )}
      </div>
    </div>
  );
}

window.ProviderStrip = ProviderStrip;