// Programas — niveles académicos reales del colegio (preescolar, primaria, bachillerato)
function Programs() {
  const programs = [
    {
      tag: '01',
      name: 'Preescolar',
      grades: 'Pre-jardín · Jardín · Transición',
      iconKey: 'bear',
      desc: 'Los maestros desenvuelven su labor a partir de los intereses de los niños, delineando proyectos educativos que estimulan la curiosidad y el sentido de investigación de los pequeños.',
      img: 'assets/gallery/actividades-04.jpg',
    },
    {
      tag: '02',
      name: 'Básica Primaria',
      grades: 'Grados 1° a 5°',
      iconKey: 'book',
      desc: 'El descubrimiento y reconocimiento del niño dentro de su entorno, sumado al progreso de las competencias académicas, físicas y éticas, constituyen la base fundamental de los años de primaria.',
      img: 'assets/gallery/actividades-06.jpg',
    },
    {
      tag: '03',
      name: 'Bachillerato',
      grades: 'Grados 6° a 11°',
      iconKey: 'diploma',
      desc: 'Formamos jóvenes con carácter militar, líderes con responsabilidad social, preparados para la carrera profesional y para servir a la Patria con disciplina y excelencia.',
      img: 'assets/gallery/eventos-03.jpg',
    },
  ];

  return (
    <section id="programas" className="cmgs-programs section">
      <div className="container">
        <div className="section-opener">
          <p className="eyebrow">— Niveles académicos —</p>
          <div className="divider"><span className="line"/><span className="dot"/><span className="line"/></div>
          <h2 className="title">Nuestros programas</h2>
          <p className="lead">
            Una formación integral con carácter militar avalada por el Ministerio de Educación
            Nacional y el Ministerio de Defensa.
          </p>
        </div>

        <div className="cmgs-prog-grid">
          {programs.map((p, i) => (
            <article key={i} className="cmgs-prog-card">
              <div className="cmgs-prog-img">
                <img src={p.img} alt={p.name} loading="lazy" decoding="async" />
                <span className="cmgs-prog-tag">{p.tag}</span>
              </div>
              <div className="cmgs-prog-body">
                <div className="cmgs-prog-icon">
                  {CmgsIcons[p.iconKey](p.iconKey === 'bear' ? 44 : 40)}
                </div>
                <h3>{p.name}</h3>
                <p className="cmgs-prog-grades">{p.grades}</p>
                <p className="cmgs-prog-desc">{p.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .cmgs-programs { background: var(--paper); }
        .cmgs-prog-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 28px;
        }
        @media (max-width: 880px) { .cmgs-prog-grid { grid-template-columns: 1fr; gap: 22px; } }

        .cmgs-prog-card {
          background: #fff;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: var(--shadow-md);
          border: 1px solid var(--border);
          transition: all 320ms var(--ease-out);
          display: flex; flex-direction: column;
        }
        .cmgs-prog-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 24px 48px rgba(10,23,51,0.18);
          border-color: var(--gold-500);
        }

        .cmgs-prog-img {
          position: relative;
          aspect-ratio: 16/10;
          overflow: hidden;
        }
        .cmgs-prog-img img {
          width: 100%; height: 100%; object-fit: cover;
          transition: transform 800ms var(--ease-out);
        }
        .cmgs-prog-card:hover .cmgs-prog-img img { transform: scale(1.08); }
        .cmgs-prog-img::after {
          content: ''; position: absolute; inset: 0;
          background: linear-gradient(180deg, transparent 40%, rgba(10,23,51,0.45) 100%);
        }
        .cmgs-prog-tag {
          position: absolute; top: 16px; left: 16px;
          background: var(--gold-500); color: var(--navy-900);
          padding: 6px 12px; border-radius: 4px;
          font: 700 11px/1 var(--font-display);
          letter-spacing: 0.16em;
        }

        .cmgs-prog-body {
          padding: 26px 26px 28px;
          flex: 1;
          display: flex; flex-direction: column;
          position: relative;
        }
        .cmgs-prog-icon {
          position: absolute; top: -32px; right: 22px;
          width: 68px; height: 68px;
          background: #fff;
          border: 2px solid var(--gold-500);
          border-radius: 999px;
          display: flex; align-items: center; justify-content: center;
          box-shadow: var(--shadow-md);
          color: var(--gold-600);
          transition: transform 380ms var(--ease-bounce);
        }
        .cmgs-prog-card:hover .cmgs-prog-icon { transform: scale(1.12) rotate(-6deg); }
        .cmgs-prog-body h3 {
          font: 700 22px/1.15 var(--font-display);
          text-transform: uppercase;
          letter-spacing: -0.005em;
          color: var(--navy-900);
          margin: 0 0 4px;
        }
        .cmgs-prog-grades {
          font: 600 11px/1 var(--font-body);
          letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--gold-600);
          margin: 0 0 14px;
        }
        .cmgs-prog-desc {
          font: 400 14px/1.6 var(--font-body);
          color: var(--stone-500);
          margin: 0;
          flex: 1;
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Programs });