// clients.jsx — logo marquee
const CLIENT_LOGOS = [
'./assets/logo 2.svg',
'./assets/logo 3.svg',
'./assets/logo 4.svg',
'./assets/logo 5.svg',
'./assets/logo 6.svg',
'./assets/logo 7.svg',
'./assets/logo 8.svg',
'./assets/logo 9.svg',
'./assets/logo 10.svg',
'./assets/logo 11.png',
'./assets/logo 12.png',
'./assets/logo 13.svg'];


function Clients() {
  return (
    <section className="clients" data-screen-label="02b Clients" style={{
      padding: '80px 0 100px', background: 'var(--ink)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ textAlign: 'center', marginBottom: 48, padding: '0 36px' }}>
        <span className="eyebrow eyebrow--no-dot" data-reveal>VYBRANÍ KLIENTI</span>
        <h3 className="h-3" data-reveal style={{ marginTop: 14, maxWidth: '40ch', margin: '14px auto 0', color: '#bdbdbd', fontWeight: 400 }}>ZVLÁDNEME I VÁŠ OBOR.  OD STROJÍRENSTVÍ AŽ PO FASHION. B2B I B2C.

        </h3>
      </div>
      <div className="logo-marquee" aria-hidden="true">
        <div className="logo-marquee__track">
          {Array.from({ length: 2 }).map((_, k) =>
          <React.Fragment key={k}>
              {CLIENT_LOGOS.map((src, i) =>
            <span className="logo-cell" key={k + '-' + i}>
                  <img src={src} alt="" loading="lazy" />
                </span>
            )}
            </React.Fragment>
          )}
        </div>
      </div>
      <img src="./assets/stone-clients-coral.png" alt="" style={{
        position: 'absolute', right: '-6%', top: '-40%', width: 420, opacity: .85, pointerEvents: 'none',
        filter: 'drop-shadow(0 40px 80px rgba(0,0,0,.45))'
      }} />
      <img src="./assets/stone-render-2.png" alt="" style={{
        position: 'absolute', left: '-6%', bottom: '-35%', width: 300, opacity: .35, pointerEvents: 'none',
        mixBlendMode: 'screen', transform: 'rotate(15deg)'
      }} />
    </section>);

}
window.Clients = Clients;