// TrustedBy — seamless logo marquee beneath the hero. White marks on black,
// no chips; centered label flanked by hairlines. Duplicated track loops cleanly.
function TrustedBy() {
  const logos = [
    { src: 'assets/logos/white/dept-of-war.png', alt: 'U.S. Department of War', h: 138 },
    { src: 'assets/logos/white/homeland-security.png', alt: 'U.S. Department of Homeland Security', h: 110 },
    { src: 'assets/logos/white/treasury.png', alt: 'U.S. Department of the Treasury', h: 106 },
    { src: 'assets/logos/white/mitre.png', alt: 'MITRE', h: 40 },
    { src: 'assets/logos/white/siemens-energy.png', alt: 'Siemens Energy', h: 60 },
  ];

  const Group = () => (
    <div className="marquee-group" aria-hidden="false">
      {logos.map((l) => (
        <img key={l.alt} className="marquee-logo" src={l.src} alt={l.alt} title={l.alt} style={{ height: l.h }} />
      ))}
    </div>
  );

  return (
    <section style={{ padding: '28px 0 56px' }}>
      <div className="container" style={{ display: 'flex', justifyContent: 'center', marginBottom: 'var(--space-12)' }}>
        <span className="rule-label">Trusted by</span>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          <Group />
          <Group />
          <Group />
          <Group />
        </div>
      </div>
    </section>
  );
}
window.TrustedBy = TrustedBy;