/* burp.agency homepage — Marquee
   Tagline above + continuous-scrolling logo strip.
   Per-logo height tuning gives the row symmetrical optical weight despite
   different source aspect ratios. */

const CLIENTS = [
  { name: 'Memfault',    file: 'memfault.webp',     h: 52 },
  { name: 'CodeRabbit',  file: 'coderabbit.svg',    h: 52 },
  { name: 'Alibaba',     file: 'alibaba.png',       h: 88 },
  { name: 'Zenduty',     file: 'zenduty.png',       h: 56 },
  { name: 'MalCare',     file: 'malcare.png',       h: 48 },
  { name: 'Davis Index', file: 'davis-index.png',   h: 80 },
];

const Marquee = () => {
  // Render the row twice so the keyframe -50% wraps seamlessly.
  const row = (
    <>
      {CLIENTS.map((c, i) => (
        <React.Fragment key={c.name + i}>
          <img
            src={'assets/logos/' + c.file}
            alt={c.name}
            style={{
              height: c.h,
              width: 'auto',
              margin: '0 56px',
              verticalAlign: 'middle',
              filter: 'grayscale(1) brightness(0.25) contrast(1.4)',
              opacity: 0.85,
            }}
          />
          <span style={{
            verticalAlign: 'middle',
            color: 'var(--color-orange)',
            fontFamily: 'Georgia, serif',
            fontSize: 'clamp(40px, 5vw, 64px)',
            lineHeight: 1,
          }}>·</span>
        </React.Fragment>
      ))}
    </>
  );

  return (
    <section data-screen-label="Marquee"
             style={{
               background: 'var(--color-cream)',
               borderBottom: '1px solid var(--color-warm-gray)',
               paddingTop: 40, paddingBottom: 48,
             }}>
      {/* Tagline above */}
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '0 32px 32px',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <span style={{
          flexShrink: 0,
          fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--color-orange)',
        }}>Trusted by the market leaders of tomorrow</span>
        <span style={{ flex: 1, height: 1, background: 'var(--color-warm-gray)' }} aria-hidden="true"></span>
      </div>

      {/* Running logos */}
      <div style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center',
          animation: 'burp-marquee 38s linear infinite',
          willChange: 'transform',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center' }}>{row}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center' }} aria-hidden="true">{row}</span>
        </div>
      </div>

      <style>{`
        @keyframes burp-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Marquee });