// Activa Soluciones. Logo cloud con scroll infinito (marquee).
// El track contiene 2 copias de los logos para que el loop sea perfecto.

const LogoCloud = () => {
  const brands = [
    { name: "VOLTRA", sub: "ENERGY" },
    { name: "Andamio", sub: null },
    { name: "PACÍFICO", sub: "RETAIL" },
    { name: "klaro", sub: "tech" },
    { name: "MERIDIAN", sub: "FINANCIAL" },
    { name: "TerraMax", sub: null },
    { name: "NORTE", sub: "GROUP" },
    { name: "Sigma", sub: "CAPITAL" },
    { name: "ATLAS", sub: "LOGISTICS" },
    { name: "Vértice", sub: null },
  ];

  // duplicate the list so the marquee loops seamlessly
  const loop = [...brands, ...brands];

  return (
    <section className="logo-cloud">
      <div className="container">
        <p className="lc-label">Operamos hoy con</p>
      </div>
      <div className="lc-marquee" aria-hidden="false">
        <ul className="lc-track">
          {loop.map((b, i) => (
            <li key={i} className="lc-item">
              <span className="lc-name">{b.name}</span>
              {b.sub && <span className="lc-sub">{b.sub}</span>}
            </li>
          ))}
        </ul>
      </div>
      <style>{`
        .logo-cloud {
          padding: 56px 0 64px;
          background: #fff;
          border-top: 1px solid var(--color-border);
          border-bottom: 1px solid var(--color-border);
          overflow: hidden;
        }
        .lc-label {
          font-family: var(--font-body); font-size: 12px;
          font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--color-fg-3); margin: 0 0 32px;
          display: flex; align-items: center; gap: 12px;
        }
        .lc-label::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

        .lc-marquee {
          position: relative; width: 100%; overflow: hidden;
          -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
                  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        }
        .lc-track {
          list-style: none; padding: 0; margin: 0;
          display: flex; align-items: center;
          width: max-content; gap: 64px;
          animation: lc-scroll 38s linear infinite;
          will-change: transform;
        }
        .lc-marquee:hover .lc-track { animation-play-state: paused; }

        @keyframes lc-scroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
          .lc-track { animation: none; }
        }

        .lc-item {
          display: inline-flex; align-items: baseline; gap: 8px;
          opacity: 0.55;
          transition: opacity 220ms var(--ease-rise);
          flex: 0 0 auto;
          padding: 0 8px;
        }
        .lc-item:hover { opacity: 1; }
        .lc-name {
          font-family: var(--font-display); font-weight: 800; font-size: 26px;
          color: var(--activa-blue-900); letter-spacing: 0.02em;
          white-space: nowrap;
        }
        .lc-sub {
          font-family: var(--font-body); font-weight: 600; font-size: 11px;
          color: var(--activa-blue-500); letter-spacing: 0.18em; text-transform: uppercase;
          white-space: nowrap;
        }
      `}</style>
    </section>
  );
};