function Admission() {
  const steps = [
    { n: '01', iconKey: 'clipboard',   name: 'Inscripción', desc: 'Compra del formulario e inicio del proceso académico.' },
    { n: '02', iconKey: 'folder',      name: 'Documentos',  desc: 'Diligenciamiento del formato de referencia y entrega de papelería.' },
    { n: '03', iconKey: 'stethoscope', name: 'Exámenes',    desc: 'Valoración médica: oftalmología, audiometría y factor RH.' },
    { n: '04', iconKey: 'dialog',      name: 'Entrevistas', desc: 'Coordinación académica, convivencia y rectoría.' },
  ];

  return (
    <section id="admisiones" className="cmgs-adm section">
      <div className="container">
        <div className="section-opener">
          <p className="eyebrow">— Inscríbete hoy · 2026 —</p>
          <div className="divider"><span className="line"/><span className="dot"/><span className="line"/></div>
          <h2 className="title">Proceso de admisión</h2>
          <p className="lead">
            Cuatro etapas claras para que tu hijo o hija haga parte de una formación que transforma vidas.
          </p>
        </div>

        <div className="cmgs-adm-banner">
          <div className="cmgs-adm-banner-left">
            <h3>
              Haz parte de una formación<br/>
              que <em>transforma vidas</em>
            </h3>
            <p className="cmgs-adm-banner-lead">
              Matrículas abiertas para Preescolar, Primaria y Bachillerato. Conoce el proceso completo
              de inscripción y los requisitos para todos los grados.
            </p>
            <div className="cmgs-adm-banner-ctas">
              <a className="btn btn-outline-gold cmgs-adm-cta" href="inscripciones.html">
                Iniciar proceso
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M5 12h14M13 5l7 7-7 7"/>
                </svg>
              </a>
              <a className="cmgs-adm-banner-wa" href={CMGS_DATA.social.whatsapp} target="_blank" rel="noopener">
                <svg width="16" height="16" viewBox="0 0 32 32" fill="currentColor">
                  <path d="M16 .4a15.6 15.6 0 0 0-13.4 23.5L0 32l8.4-2.5A15.6 15.6 0 1 0 16 .4Zm7.1 22.5c-.3.9-1.8 1.8-2.6 1.9-1.4.2-2.5.1-5.2-1.1-4.3-1.8-7.1-6.1-7.3-6.4-.2-.3-1.7-2.3-1.7-4.4s1.1-3.1 1.5-3.5 1-.5 1.1-.5h.7c.3 0 .6-.1.9.7.3.7 1.1 2.7 1.2 2.9.1.2.1.5 0 .7-.8 1.5-1.6 1.5-1.2 2.2 1.6 2.7 3.1 3.6 5.4 4.8.4.2.6.1.8-.1.2-.3.9-1.1 1.2-1.5.3-.4.6-.3.9-.2.3.1 2.2 1 2.6 1.2.5.2.8.3.9.4.1.2.1 1-.2 1.9Z"/>
                </svg>
                Pregunta por WhatsApp
              </a>
            </div>
          </div>
          <div className="cmgs-adm-banner-right">
            <img src="assets/gallery/eventos-01.jpg" alt="" loading="lazy" decoding="async"/>
          </div>
        </div>

        <div className="cmgs-adm-steps">
          {steps.map((s, i) => (
            <a key={i} href="inscripciones.html" className="cmgs-adm-step">
              <span className="cmgs-adm-step-num">{s.n}</span>
              <div className="cmgs-adm-step-icon">
                {CmgsIcons[s.iconKey](42)}
              </div>
              <h4>{s.name}</h4>
              <p>{s.desc}</p>
              <span className="cmgs-adm-step-arrow">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M5 12h14M13 5l7 7-7 7"/>
                </svg>
              </span>
            </a>
          ))}
        </div>

        <div className="cmgs-adm-footer">
          <a href="inscripciones.html" className="btn btn-primary">
            Ver proceso completo de inscripción
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </a>
        </div>
      </div>

      <style>{`
        .cmgs-adm-banner {
          display:grid; grid-template-columns: 1.05fr 1fr; gap: 0;
          background: linear-gradient(110deg, var(--navy-800) 0%, var(--navy-700) 100%);
          border-radius: 16px; overflow: hidden;
          box-shadow: var(--shadow-lg);
          margin-bottom: 56px;
          min-height: 320px;
        }
        @media (max-width: 760px) { .cmgs-adm-banner { grid-template-columns: 1fr; } }
        .cmgs-adm-banner-left {
          padding: 44px 48px;
          display:flex; flex-direction:column; justify-content:center; align-items:flex-start; color:#fff;
        }
        .cmgs-adm-banner-left h3 {
          font: 600 clamp(28px, 3vw, 40px)/1.1 var(--font-display);
          text-transform: uppercase; letter-spacing: -0.01em; color: #fff;
          margin: 0 0 18px;
        }
        .cmgs-adm-banner-left h3 em {
          font-style: italic; font-family: var(--font-accent); font-weight: 800;
          color: var(--gold-300); text-transform: none; letter-spacing: -0.01em;
        }
        .cmgs-adm-banner-lead {
          font: 400 15px/1.55 var(--font-body);
          color: rgba(255,255,255,0.78);
          margin: 0 0 28px;
          max-width: 460px;
        }
        .cmgs-adm-banner-ctas { display:flex; align-items:center; gap: 22px; flex-wrap: wrap; }
        .cmgs-adm-cta { padding: 13px 24px; }
        .cmgs-adm-banner-wa {
          display:inline-flex; align-items:center; gap: 8px;
          color: rgba(255,255,255,0.85);
          font: 600 11px/1 var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          transition: color 200ms;
        }
        .cmgs-adm-banner-wa:hover { color: var(--gold-300); }
        .cmgs-adm-banner-wa svg { color: #25D366; }

        .cmgs-adm-banner-right { position:relative; overflow:hidden; }
        .cmgs-adm-banner-right::before {
          content:''; position:absolute; inset:0; z-index:2;
          background: linear-gradient(90deg, var(--navy-700) 0%, transparent 35%);
        }
        .cmgs-adm-banner-right img { width:100%; height:100%; object-fit: cover; }

        .cmgs-adm-steps {
          display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
          margin-bottom: 40px;
        }
        @media (max-width: 760px) { .cmgs-adm-steps { grid-template-columns: repeat(2, 1fr); } }

        .cmgs-adm-step {
          position: relative;
          background: #fff;
          border: 1px solid var(--border);
          border-top: 3px solid var(--gold-500);
          border-radius: 12px;
          padding: 26px 22px 22px;
          transition: all 280ms var(--ease-out);
          display: block;
        }
        .cmgs-adm-step:hover {
          transform: translateY(-6px);
          box-shadow: 0 16px 36px rgba(212,160,42,0.22);
          border-color: var(--gold-500);
        }
        .cmgs-adm-step-num {
          position: absolute; top: 14px; right: 18px;
          font: 700 32px/1 var(--font-display);
          color: rgba(212,160,42,0.20);
          letter-spacing: -0.02em;
        }
        .cmgs-adm-step-icon {
          width: 56px; height: 56px;
          background: rgba(212,160,42,0.08);
          border-radius: 12px;
          display: flex; align-items: center; justify-content: center;
          color: var(--gold-600);
          margin-bottom: 18px;
          transition: transform 280ms var(--ease-bounce);
        }
        .cmgs-adm-step:hover .cmgs-adm-step-icon {
          transform: scale(1.1) rotate(-4deg);
          background: rgba(212,160,42,0.18);
        }
        .cmgs-adm-step h4 {
          font: 700 16px/1.2 var(--font-display); text-transform: uppercase;
          letter-spacing: 0.02em; color: var(--navy-900);
          margin: 0 0 6px;
        }
        .cmgs-adm-step p {
          font: 400 13px/1.55 var(--font-body);
          color: var(--stone-500);
          margin: 0 0 14px;
        }
        .cmgs-adm-step-arrow {
          display: inline-flex; align-items: center;
          color: var(--gold-600);
          transition: transform 240ms;
        }
        .cmgs-adm-step:hover .cmgs-adm-step-arrow { transform: translateX(4px); }

        .cmgs-adm-footer { text-align: center; }
      `}</style>
    </section>
  );
}

Object.assign(window, { Admission });