// shared/logo-marquee.jsx
// Reusable marquee strip of company logos.
// Props:
//   theme  — { bg, rule, dim }
//   mode   — 'light' | 'dark'
//   label  — optional eyebrow label (default 'Experience')
//   moreHref — optional 'more →' link (default null hides it)
//   moreLabel — link label (default 'more →')
//   bleed  — px to extend beyond container padding (default 96)
//   speed  — animation duration in seconds (default 52)
//   gap    — px between logos (default 80)
//   showHeader — bool (default true)
//   fontMono — font family for label
//   RouletteLink — optional component for the link (falls back to <a>)

const LOGOS_DEFAULT = [
  { src: '/assets/logos/picpay.png',               alt: 'PicPay' },
  { src: '/assets/logos/itau.png',                 alt: 'Itaú' },
  { src: '/assets/logos/nubank.png',               alt: 'Nubank' },
  { src: '/assets/logos/Btg-logo-blue.svg.png',    alt: 'BTG Pactual' },
  { src: '/assets/logos/b3.png',                   alt: 'B3' },
  { src: '/assets/logos/ccee.png',                 alt: 'CCEE' },
  { src: '/assets/logos/TWKS-99196fdf.png',        alt: 'Thoughtworks' },
  { src: '/assets/logos/Jovem_Pan_logo_2018.svg.png', alt: 'Jovem Pan' },
];

function LogoMarquee({
  theme,
  mode,
  logos = LOGOS_DEFAULT,
  label = 'Experience',
  moreHref = null,
  moreLabel = 'more →',
  bleed = 96,
  speed = 52,
  gap = 80,
  showHeader = true,
  fontMono = "'Space Mono', ui-monospace, monospace",
  RouletteLink = null,
  itemWidth = 130,
  itemHeight = 80,
  itemPadding = 24,
  blendMode = 'normal',
  reverse = false,
}) {
  const isDark = mode === 'dark';
  const strip = [...logos, ...logos];
  const logoFilter = isDark
    ? 'grayscale(1) invert(1) opacity(0.55)'
    : 'grayscale(1) opacity(0.55)';
  const resolvedBlend = blendMode === 'auto'
    ? (isDark ? 'screen' : 'multiply')
    : blendMode;

  return (
    <section style={{
      borderTop: `1px solid ${theme.rule}`,
      paddingTop: 48,
      paddingBottom: 64,
    }}>
      {showHeader && (
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, margin: '0 0 32px' }}>
          <p style={{
            fontFamily: fontMono,
            fontSize: 11,
            letterSpacing: '0.1em',
            color: theme.dim,
            textTransform: 'uppercase',
            margin: 0,
          }}>
            {label}
          </p>
          {moreHref && (
            RouletteLink
              ? <RouletteLink label={moreLabel} href={moreHref} theme={theme} />
              : <a href={moreHref} style={{
                  fontFamily: fontMono, fontSize: 12, letterSpacing: '0.08em',
                  textDecoration: 'none', color: theme.muted || theme.dim,
                }}>{moreLabel}</a>
          )}
        </div>
      )}
      <div style={{
        position: 'relative',
        overflow: 'hidden',
        marginLeft: -bleed,
        marginRight: -bleed,
      }}>
        <div style={{
          display: 'flex',
          gap,
          width: 'max-content',
          animation: `hub-marquee ${speed}s linear infinite`,
          animationDirection: reverse ? 'reverse' : 'normal',
          willChange: 'transform',
        }}>
          {strip.map((logo, i) => (
            <div key={i} style={{
              width: itemWidth, height: itemHeight, flexShrink: 0,
              padding: itemPadding, boxSizing: 'border-box',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <img
                src={logo.src}
                alt={logo.alt}
                style={{
                  maxWidth: '100%', maxHeight: '100%',
                  objectFit: 'contain', objectPosition: 'center',
                  filter: logoFilter,
                  mixBlendMode: resolvedBlend,
                  transition: 'filter 300ms ease',
                  display: 'block',
                }}
              />
            </div>
          ))}
        </div>
        <div style={{
          position: 'absolute', top: 0, left: 0,
          width: bleed, height: '100%',
          background: `linear-gradient(to right, ${theme.bg}, transparent)`,
          pointerEvents: 'none', zIndex: 1,
          transition: 'background 300ms ease',
        }} />
        <div style={{
          position: 'absolute', top: 0, right: 0,
          width: bleed, height: '100%',
          background: `linear-gradient(to left, ${theme.bg}, transparent)`,
          pointerEvents: 'none', zIndex: 1,
          transition: 'background 300ms ease',
        }} />
      </div>
    </section>
  );
}

window.LogoMarquee = LogoMarquee;
window.LOGOS_DEFAULT = LOGOS_DEFAULT;