// LogosMarquee.jsx — quiet light strip with marquee

const LogosMarquee = () => {
  // Per-logo visual scale tweaks so they read at roughly equal weight in the strip.
  const logos = [
    { src: 'assets/logos/microsoft.svg', alt: 'Microsoft', scale: 1.0 },
    { src: 'assets/logos/deloitte.svg', alt: 'Deloitte', scale: 1.0 },
    { src: 'assets/logos/accenture.svg', alt: 'Accenture', scale: 1.05 },
    { src: 'assets/logos/johnson-and-johnson.svg', alt: 'Johnson & Johnson', scale: 1.0 },
    { src: 'assets/logos/walt-disney.svg', alt: 'The Walt Disney Company', scale: 0.95 },
    { src: 'assets/logos/medtronic.svg', alt: 'Medtronic', scale: 1.0 },
    { src: 'assets/logos/boston-scientific.svg', alt: 'Boston Scientific', scale: 1.0 },
    { src: 'assets/logos/korn-ferry.svg', alt: 'Korn Ferry', scale: 1.0 },
    { src: 'assets/logos/99designs.svg', alt: '99designs', scale: 1.0 },
    { src: 'assets/logos/delphi.svg', alt: 'Delphi', scale: 1.05 },
  ];

  const ROW_HEIGHT = 40; // px — target visual height for every logo

  const Strip = ({ ariaHidden }) =>
    <div className="logo-strip" aria-hidden={ariaHidden}>
      {logos.map((l, i) =>
        <div key={`${l.alt}-${i}`} className="logo-slot-wrap">
          <img
            src={l.src}
            alt={ariaHidden ? '' : l.alt}
            style={{
              display: 'block',
              height: ROW_HEIGHT * (l.scale || 1),
              width: 'auto',
              maxWidth: 180,
              objectFit: 'contain',
              opacity: 0.78,
              filter: 'grayscale(100%)',
            }} />
        </div>
      )}
    </div>;

  return (
    <React.Fragment>
    <section style={{
      background: '#ecebe5',
      padding: '24px 0 64px',
      position: 'relative',
      overflow: 'hidden',
      borderTop: '1px solid #fafaf7',
      borderBottom: '1px solid #fafaf7',
    }}>
      <div style={{
        maxWidth: 1264, margin: '0 auto', padding: '0 32px 32px',
        display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 32,
      }}>
        <div className="eyebrow tag">Trusted by consultants from</div>
      </div>

      <div className="logo-marquee-track">
        <Strip />
        <Strip ariaHidden={true} />
      </div>

      <div className="logo-fade logo-fade-left" aria-hidden="true" />
      <div className="logo-fade logo-fade-right" aria-hidden="true" />

      <style>{`
        .logo-marquee-track {
          display: flex;
          width: max-content;
          animation: logo-scroll 50s linear infinite;
        }
        .logo-marquee-track:hover { animation-play-state: paused; }
        .logo-strip { display: flex; flex-shrink: 0; }
        .logo-slot-wrap {
          flex-shrink: 0;
          padding: 0 40px;
          display: flex; align-items: center; justify-content: center;
        }
        .logo-fade {
          position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 2;
        }
        .logo-fade-left { left: 0; background: linear-gradient(90deg, #ecebe5 0%, rgba(236,235,229,0) 100%); }
        .logo-fade-right { right: 0; background: linear-gradient(270deg, #ecebe5 0%, rgba(236,235,229,0) 100%); }
        @keyframes logo-scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) { .logo-marquee-track { animation: none; } }
      `}</style>
    </section>
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
      <div style={{ borderTop: '1px solid rgba(26,26,26,0.18)', marginTop: 24 }}></div>
    </div>
    </React.Fragment>
  );
};

Object.assign(window, { LogosMarquee });