// Acceso a Recursos Educativos — plataformas oficiales (Santillana / Richmond)
function Platforms() {
  const platforms = [
    {
      key: 'santillana',
      name: 'Santillana Compartir',
      desc: 'Material académico, tareas, evaluaciones y seguimiento escolar.',
      url: 'https://identity.santillanaconnect.com/',
      logo: 'assets/logos/santillana-logo.png',
      chip: true,
    },
    {
      key: 'richmond',
      name: 'Richmond Learning',
      desc: 'Plataforma oficial para el fortalecimiento del idioma inglés.',
      url: 'https://richmondlp.com/login',
      logo: 'assets/logos/richmond-logo.png',
      chip: false,
    },
  ];

  const handleImgError = (e) => {
    const img = e.currentTarget;
    if (img.dataset.retried) return;
    img.dataset.retried = '1';
    const base = img.src.split('?')[0];
    img.src = base + '?r=' + Date.now();
  };

  return (
    <section id="recursos" className="cmgs-plat section-dark">
      <div className="cmgs-plat-bg" aria-hidden="true" />
      <div className="container">
        <div className="section-opener on-dark">
          <p className="eyebrow">— Plataformas oficiales —</p>
          <div className="divider"><span className="line"/><span className="dot"/><span className="line"/></div>
          <h2 className="title">Acceso a recursos educativos</h2>
          <p className="lead">
            Ingrese a las plataformas oficiales utilizadas por nuestros estudiantes para el desarrollo académico
            y el aprendizaje del idioma inglés.
          </p>
        </div>

        <div className="cmgs-plat-grid">
          {platforms.map((p) => (
            <article key={p.key} className="cmgs-plat-card">
              <div className={`cmgs-plat-logo ${p.chip ? 'is-chip' : ''}`}>
                <img src={p.logo} alt={p.name} loading="lazy" decoding="async" onError={handleImgError} />
              </div>
              <h3>{p.name}</h3>
              <p>{p.desc}</p>
              <a className="btn btn-gold cmgs-plat-btn" href={p.url} target="_blank" rel="noopener noreferrer">
                Ingresar
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M14 3h7v7M21 3l-9 9M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6"/>
                </svg>
              </a>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .cmgs-plat { padding: 88px 0 96px; position: relative; overflow: hidden; }
        .cmgs-plat-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse 55% 60% at 85% 20%, rgba(212,160,42,0.10), transparent 60%),
            radial-gradient(ellipse 60% 65% at 15% 80%, rgba(74,120,200,0.14), transparent 60%);
        }
        .cmgs-plat-grid {
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
          max-width: 900px; margin: 0 auto;
        }
        @media (max-width: 700px) { .cmgs-plat-grid { grid-template-columns: 1fr; } }

        .cmgs-plat-card {
          background: var(--navy-800);
          border: 1px solid rgba(255,255,255,0.08);
          border-top: 3px solid var(--gold-500);
          border-radius: 14px;
          padding: 30px 28px 28px;
          text-align: left;
          transition: all 280ms var(--ease-out);
        }
        .cmgs-plat-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 20px 44px rgba(0,0,0,0.4);
          border-color: var(--gold-500);
        }
        .cmgs-plat-logo {
          display: flex; align-items: center; justify-content: center;
          min-height: 120px; margin-bottom: 22px;
          background: #fff; border-radius: 12px; padding: 22px 26px;
        }
        .cmgs-plat-logo img { max-height: 76px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
        .cmgs-plat-logo.is-chip img { max-height: 60px; }
        .cmgs-plat-card h3 {
          font: 600 19px/1.2 var(--font-display); text-transform: uppercase;
          letter-spacing: 0.02em; color: #fff; margin: 0 0 10px;
        }
        .cmgs-plat-card p {
          font: 400 14px/1.6 var(--font-body); color: rgba(255,255,255,0.68);
          margin: 0 0 24px; min-height: 66px;
        }
        .cmgs-plat-btn {
          margin-top: 4px;
        }
        .cmgs-plat-btn svg { transition: transform 240ms var(--ease-out); }
        .cmgs-plat-btn:hover svg { transform: translate(2px, -2px); }
        @media (max-width: 480px) {
          .cmgs-plat-card p { min-height: 0; }
          .cmgs-plat-logo { min-height: 100px; padding: 18px 20px; }
          .cmgs-plat-logo img { max-height: 64px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Platforms });