// Logos / social-proof strip — Bobsled's investors, scrolling marquee in actual brand colors
function Logos() {
  // Each logo gets the same SLOT height so optical centers align;
  // h is the rendered height of that particular logo within the slot.
  const SLOT = 36;
  const logos = [
    { name: 'Greycroft',     src: 'assets/logos/greycroft.svg',    h: 24 },
    { name: 'Madrona',       src: 'assets/logos/madrona.webp',     h: 24, crop: 'madrona' },
    { name: 'WndrCo',        src: 'assets/logos/wndrco.svg',       h: 22 },
    { name: '.406 Ventures', src: 'assets/logos/406-ventures.svg?v=2', h: 24 },
    { name: 'K5 Global',     src: 'assets/logos/k5.svg?v=2',       h: 20 },
    { name: 'Aviso',         src: 'assets/logos/aviso.png?v=2',    h: 26 },
  ];

  // Render one logo (or its cropped variant). All logos sit in a fixed-height,
  // center-aligned slot so they share a common baseline.
  const renderLogo = (l, key) => {
    const slotStyle = {
      height: SLOT,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flex: '0 0 auto',
    };
    if (l.crop === 'madrona') {
      // Madrona WebP is 1000×667; wordmark band y=478..668. Crop to that band.
      const bandTop = 478, bandBottom = 668;
      const bandH_src = bandBottom - bandTop;
      const scale = l.h / bandH_src;
      const fullH = 667 * scale;
      const offsetY = bandTop * scale;
      return (
        <div key={key} style={slotStyle}>
          <div style={{
            height: l.h, overflow: 'hidden', display: 'flex',
            alignItems: 'flex-start',
          }}>
            <img src={l.src} alt={l.name} style={{
              height: fullH, width: 'auto', marginTop: -offsetY, display: 'block',
            }} />
          </div>
        </div>
      );
    }
    return (
      <div key={key} style={slotStyle}>
        <img src={l.src} alt={l.name} style={{
          height: l.h, width: 'auto', display: 'block',
        }} />
      </div>
    );
  };

  // Duplicate the list so the marquee can loop seamlessly: animate translateX
  // from 0 to -50% (one full set width), then snap back.
  const lane = [...logos, ...logos];

  return (
    <section style={{
      padding: '20px 0 60px',
      borderTop: 'none',
      borderBottom: '1px solid var(--line-2)',
    }}>
      <style>{`
        @keyframes logo-marquee {
          from { transform: translate3d(0, 0, 0); }
          to   { transform: translate3d(-50%, 0, 0); }
        }
        .logo-marquee-track {
          display: flex;
          width: max-content;
          gap: 88px;
          animation: logo-marquee 38s linear infinite;
          will-change: transform;
        }
        .logo-marquee-viewport:hover .logo-marquee-track {
          animation-play-state: paused;
        }
        @media (prefers-reduced-motion: reduce) {
          .logo-marquee-track { animation: none; }
        }
      `}</style>

      <div
        className="logo-marquee-viewport"
        style={{
          maxWidth: 1100,
          margin: '0 auto',
          overflow: 'hidden',
          // soft edge fades so logos enter/exit gracefully
          WebkitMaskImage:
            'linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
          maskImage:
            'linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
        }}
      >
        <div className="logo-marquee-track">
          {lane.map((l, i) => renderLogo(l, i))}
        </div>
      </div>
    </section>
  );
}
window.Logos = Logos;