/* global React, CLIENTS */

function Clients() {
  // Duplicate for seamless marquee
  const list = [...CLIENTS, ...CLIENTS, ...CLIENTS, ...CLIENTS];
  return (
    <section className="section-tight clients-section">
      <div className="container">
        <div className="clients-head">
          <span className="eyebrow">Clientes destacados</span>
          <h3 className="display clients-title">
            Empresas que ya confían en Setza.
          </h3>
        </div>

        <div className="clients-marquee">
          <div className="clients-track">
            {list.map((c, i) => (
              <div key={i} className="client-logo">
                <span className="client-name display">{c}</span>
                <span className="client-dot" />
              </div>
            ))}
          </div>
        </div>

        <div className="clients-foot mono">…y muchos más</div>
      </div>

      <style>{`
        .clients-section {
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .clients-head {
          display: flex;
          align-items: baseline;
          gap: 24px;
          flex-wrap: wrap;
          margin-bottom: 36px;
        }
        .clients-title {
          font-size: clamp(22px, 2.4vw, 32px);
          margin: 0;
          font-weight: 500;
          font-style: italic;
        }
        .clients-marquee {
          overflow: hidden;
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }
        .clients-track {
          display: flex;
          gap: 64px;
          width: max-content;
          animation: marquee 28s linear infinite;
        }
        .client-logo {
          display: flex;
          align-items: center;
          gap: 24px;
          padding: 20px 0;
        }
        .client-name {
          font-size: clamp(28px, 3vw, 44px);
          font-weight: 600;
          letter-spacing: -0.02em;
          color: var(--ink-mute);
          transition: color .3s ease;
        }
        .client-logo:hover .client-name { color: var(--ink); }
        .client-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--peach-deep);
          opacity: 0.6;
        }
        .clients-foot {
          margin-top: 24px;
          color: var(--ink-mute);
          text-align: center;
          font-size: 11px;
        }
      `}</style>
    </section>
  );
}

window.Clients = Clients;