const LW_ROW_A = ['betmgm','stake','superbet','sportingbet','novibet','vbet','binance','okx','bloom'];
const LW_ROW_B = ['xm','vantage','pepperstone','ic-markets','goli','mgid','mediago','rosabella'];

/* Per-file optical sizing — the uploads carry very different internal padding. */
const LW_H = { betmgm:30, stake:44, superbet:30, sportingbet:30, novibet:34, vbet:36, binance:32, okx:50, bloom:40,
  xm:30, vantage:30, pepperstone:26, 'ic-markets':26, goli:44, mgid:36, mediago:40, rosabella:32 };

function LWRow({ items, reverse, duration }) {
  const row = items.concat(items);
  return (
    <div style={{ overflow:'hidden', maskImage:'linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)',
      WebkitMaskImage:'linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)' }}>
      <div style={{ display:'flex', width:'max-content', alignItems:'center',
        animation:'w-marquee ' + duration + 's linear infinite',
        animationDirection:reverse ? 'reverse' : 'normal' }}>
        {row.map((n, i) => (
          <span key={n + i} style={{ display:'flex', alignItems:'center', justifyContent:'center',
            width:200, height:64, flexShrink:0, padding:'0 12px' }}>
            <img src={'logos/' + n + '.png'} alt="" style={{ maxWidth:'100%', maxHeight:LW_H[n] || 34,
              objectFit:'contain', opacity:.72, filter:'grayscale(1) brightness(1.6)' }} />
          </span>
        ))}
      </div>
    </div>
  );
}

function LogoWall() {
  return (
    <section style={{ borderTop:'1px solid var(--border-hairline)', borderBottom:'1px solid var(--border-hairline)',
      background:'rgba(255,255,255,.015)' }}>
      <div className="goat-container" style={{ padding:'46px 24px 50px' }}>
        <p style={{ margin:'0 0 30px', textAlign:'center', fontSize:14, color:'var(--text-muted)' }}>
          {L('Trusted by 100+ operators and global brands across iGaming, forex, crypto and DTC.',
             'Com a confiança de mais de 100 operações e marcas globais em iGaming, forex, crypto e DTC.')}
        </p>
        <div style={{ display:'grid', gap:10 }}>
          <LWRow items={LW_ROW_A} duration={46} />
          <LWRow items={LW_ROW_B} duration={54} reverse />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { LogoWall });