function SiteClients() {
  const logos = [
    { src: 'assets/clients/microsoft.png?v=2',  alt: 'Microsoft' },
    { src: 'assets/clients/nsa.png?v=5',        alt: 'National Security Agency' },
    { src: 'assets/clients/nro.svg?v=2',        alt: 'National Reconnaissance Office' },
    { src: 'assets/clients/dea.png?v=2',        alt: 'Drug Enforcement Administration' },
    { src: 'assets/clients/uscis.png?v=4',      alt: 'U.S. Citizenship & Immigration Services' },
    { src: 'assets/clients/msrb.png?v=2',       alt: 'Municipal Securities Rulemaking Board' },
    { src: 'assets/clients/ankura.jpg?v=3',     alt: 'Ankura' },
  ];
  // Duplicate the list so the marquee can loop seamlessly via CSS translate.
  const track = [...logos, ...logos];
  return (
    <section id="clients" className="ez-clients">
      <div className="ez-container">
        <div className="ez-section-head ez-clients-head">
          <div className="eyebrow">Trusted by</div>
          <h2>Federal agencies and enterprise leaders.</h2>
          <p>Two decades partnering with national-security, federal civilian, financial-regulatory, and Fortune 500 organizations on mission-critical software and data systems.</p>
        </div>
        <div className="ez-clients-marquee" aria-label="Client logos">
          <div className="ez-clients-track">
            {track.map((l, i) => (
              <div className="ez-client-tile" key={l.alt + '-' + i} aria-hidden={i >= logos.length}>
                <img src={l.src} alt={i < logos.length ? l.alt : ''}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}