// BuiltBy.jsx — "Built by engineers from" sliding marquee.
// Static mono label on the left; logos drift right-to-left in a continuous
// loop. The track contains TWO copies of the logo list so the loop is
// seamless (translate -50% then snap back to 0).
function BuiltBy() {
  const logos = [
    { src: '/auto-home/assets/logos/cmu.svg',                       alt: 'Carnegie Mellon University', h: 22 },
    { src: '/auto-home/assets/logos/mit.svg',                       alt: 'MIT',                        h: 22 },
    { src: '/auto-home/assets/logos/harvard.svg',                   alt: 'Harvard University',         h: 26 },
    { src: '/auto-home/assets/logos/oxford.svg',                    alt: 'Oxford University',          h: 30 },
    { src: '/auto-home/assets/logos/anthropic.svg',                 alt: 'Anthropic',                  h: 22 },
    { src: '/assets/logos/apple.svg',                               alt: 'Apple',                      h: 26 },
    { src: '/auto-home/assets/logos/google_research-white.png',     alt: 'Google Research',            h: 22 },
    { src: '/auto-home/assets/logos/applied_compute-white.png',     alt: 'Applied Compute',            h: 22 },
  ];
  const renderRow = (keyPrefix) =>
    logos.map((l, i) => (
      <span key={`${keyPrefix}-${i}`} className="builtby__logo"
            title={l.alt} aria-label={l.alt}
            style={{ height: l.h }}>
        <img src={l.src} alt={l.alt}/>
      </span>
    ));

  return (
    <section className="builtby builtby--compact" data-screen-label="04 Built by">
      <div className="builtby__strip">
        <span className="builtby__label">Built by engineers from</span>
        <div className="builtby__marquee" aria-hidden="false">
          <div className="builtby__track">
            {renderRow('a')}
            {renderRow('b')}
          </div>
        </div>
      </div>
    </section>
  );
}
window.BuiltBy = BuiltBy;