function ClientsCarousel() {
  return (
    <section id="watch-vsl" style={{ padding: '80px 0 100px', position: 'relative' }}>
      <div className="container" style={{ textAlign: 'center', marginBottom: 36 }}>
        <SectionEyebrow label="Watch Our VSL" />
      </div>
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr',
          gap: 24,
        }}>
          {[
            { id: 'ukeoal1a6y', title: 'Nexcut Media VSL' },
          ].map((v) => (
            <div
              key={v.id}
              style={{
                position: 'relative',
                aspectRatio: '16 / 9',
                borderRadius: 22,
                overflow: 'hidden',
                border: '1px solid var(--line)',
                boxShadow: '0 30px 80px -20px rgba(74,142,255,0.25), 0 10px 40px rgba(0,0,0,0.5)',
                background: '#0a0e18',
              }}
            >
              <div aria-hidden style={{
                position: 'absolute',
                inset: -40,
                background: 'radial-gradient(ellipse at 50% 0%, rgba(74,142,255,0.25), transparent 60%)',
                filter: 'blur(40px)',
                zIndex: 0,
                pointerEvents: 'none',
              }} />
              <iframe
                src={`https://fast.wistia.net/embed/iframe/${v.id}?seo=true&videoFoam=true`}
                title={v.title}
                allow="autoplay; fullscreen"
                allowFullScreen
                style={{
                  position: 'absolute',
                  inset: 0,
                  width: '100%',
                  height: '100%',
                  border: 0,
                  display: 'block',
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ClientsCarousel });