function BrandMarquee() {
  // Target consistent visual weight — most logos pinned by HEIGHT (cap-height match).
  // Wordmark-only logos (no symbol, just text) get a slightly smaller height
  // so their wordmark length doesn't dominate the row.
  const brands = [
    { src: 'assets/brands/comp-ai-w.png',         alt: 'Comp AI',        height: 32 },
    { src: 'assets/brands/bros-of-decay-w.png',   alt: 'Bros of Decay',  height: 44 },
    { src: 'assets/brands/sarizza-w.png',         alt: 'Sarizza',        height: 26 },
    { src: 'assets/brands/finova-money-w.png',    alt: 'Finova Money',   height: 32 },
    { src: 'assets/brands/avenue-7-w.png',        alt: 'Avenue 7 Media', height: 46 },
    { src: 'assets/brands/mediazilla-w.png',      alt: 'MediaZilla',     height: 22 },
  ];

  const renderBrand = (b, i) => (
    <div key={i} className="brand-item" style={{
      flex: '0 0 auto',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      padding: '0 56px',
    }}>
      <img
        src={b.src}
        alt={b.alt}
        style={{
          height: b.height,
          width: 'auto',
          objectFit: 'contain',
          display: 'block',
          opacity: 0.6,
          transition: 'opacity 0.3s',
        }}
        onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
        onMouseLeave={(e) => e.currentTarget.style.opacity = '0.6'}
      />
    </div>
  );

  return (
    <section className="brand-marquee-sec" style={{
      padding: 0,
      position: 'relative',
      overflow: 'hidden',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      background: 'linear-gradient(180deg, rgba(74,142,255,0.025) 0%, transparent 100%)',
      height: 140,
      display: 'flex',
      alignItems: 'center',
    }}>
      <div aria-hidden className="brand-fade" style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, width: 220,
        background: 'linear-gradient(90deg, var(--bg) 0%, transparent 100%)',
        zIndex: 3, pointerEvents: 'none',
      }} />
      <div aria-hidden className="brand-fade" style={{
        position: 'absolute', top: 0, bottom: 0, right: 0, width: 220,
        background: 'linear-gradient(270deg, var(--bg) 0%, transparent 100%)',
        zIndex: 3, pointerEvents: 'none',
      }} />

      <div className="marquee" style={{ animationDuration: '50s', alignItems: 'center', height: '100%', width: 'max-content' }}>
        {[...brands, ...brands, ...brands].map((b, i) => renderBrand(b, i))}
      </div>
    </section>
  );
}

Object.assign(window, { BrandMarquee });