// Aliados estratégicos (sección verde) — fila única de 5 logos
function Collaborators() {
  const partners = [
    { name: 'MinEducación', logo: 'assets/logos/logo-mineducacion.png', url: null },
    { name: 'MinDefensa',   logo: 'assets/logos/logo-mindefensa.png',   url: null },
    { name: 'COOSAMIR',     logo: 'assets/logos/logo-coosamir.png',     url: 'http://www.coosamir.com.co/' },
    { name: 'FUNDAMIR',     logo: 'assets/logos/logo-fundamir.png',     url: 'http://fundamir.edu.co/' },
    { name: 'SENA',         logo: 'assets/logos/logo-sena.png',         url: null },
  ];

  // Si una imagen falla al cargar (red lenta o intermitente), la reintenta
  // una sola vez con un parámetro anti-caché. Así el logo NUNCA se queda
  // en blanco / "desaparece"; vuelve a intentar en lugar de quedar vacío.
  const handleImgError = (e) => {
    const img = e.currentTarget;
    if (img.dataset.retried) return;     // solo un reintento para no ciclar
    img.dataset.retried = '1';
    const base = img.src.split('?')[0];
    img.src = base + '?r=' + Date.now();
  };

  return (
    <section className="cmgs-collab">
      <div className="container">
        <div className="cmgs-collab-title">
          <p className="eyebrow">— Aliados estratégicos —</p>
          <h3>Aliados</h3>
          <div className="cmgs-collab-divider"><span/><span className="dot"/><span/></div>
        </div>
        <div className="cmgs-collab-list">
          {partners.map((p, i) => {
            const Tag = p.url ? 'a' : 'div';
            const props = p.url ? { href: p.url, target: '_blank', rel: 'noopener' } : {};
            return (
              <Tag key={i} className="cmgs-collab-logo" title={p.name} {...props}>
                <img src={p.logo} alt={p.name} loading="lazy" decoding="async" onError={handleImgError} />
              </Tag>
            );
          })}
        </div>
      </div>

      <style>{`
        .cmgs-collab {
          background: var(--green-900);
          color: #fff; padding: 56px 0 60px;
          position: relative; overflow: hidden;
        }
        .cmgs-collab::before {
          content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
          background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
        }
        .cmgs-collab::after {
          content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
          background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
        }

        .cmgs-collab-title { text-align: center; margin-bottom: 36px; }
        .cmgs-collab-title .eyebrow {
          font: 600 11px/1.4 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
          color: var(--gold-300); margin: 0 0 8px;
        }
        .cmgs-collab-title h3 {
          font: 700 clamp(26px, 2.8vw, 36px)/1 var(--font-display); text-transform: uppercase;
          letter-spacing: 0.02em; color: #fff; margin: 0 0 14px;
        }
        .cmgs-collab-divider { display: inline-flex; align-items: center; gap: 10px; }
        .cmgs-collab-divider > span:not(.dot) { width: 48px; height: 2px; background: var(--gold-500); }
        .cmgs-collab-divider .dot { width: 6px; height: 6px; background: var(--gold-500); transform: rotate(45deg); }

        /* Una sola fila — todos los logos en línea */
        .cmgs-collab-list {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 18px;
          align-items: stretch;
          max-width: 1100px; margin: 0 auto;
        }
        .cmgs-collab-logo {
          background: #fff;
          padding: 14px 18px;
          border-radius: 10px;
          height: 96px;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 6px 16px rgba(0,0,0,0.22);
          transition: all 260ms var(--ease-out);
        }
        .cmgs-collab-logo:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 28px rgba(0,0,0,0.32), 0 0 0 2px var(--gold-500);
        }
        .cmgs-collab-logo img {
          max-height: 64px; max-width: 100%;
          width: auto; height: auto;
          object-fit: contain; display: block;
        }

        @media (max-width: 880px) {
          .cmgs-collab-list { grid-template-columns: repeat(3, 1fr); gap: 14px; }
        }
        @media (max-width: 480px) {
          .cmgs-collab-list { grid-template-columns: repeat(2, 1fr); }
          .cmgs-collab-logo { height: 72px; padding: 10px 14px; }
          .cmgs-collab-logo img { max-height: 50px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Collaborators });