function About() {
  const ref = useReveal();
  const slides = [
    {
      key: 'mision',
      eyebrow: 'Nuestro propósito',
      title: 'Misión',
      img: 'assets/gallery/actividades-01.jpg',
      body: (
        <p>
          El Colegio Militar General Santander forma estudiantes íntegros, disciplinados
          y con excelencia académica, inspirados en los valores de <strong>Patria,
          Superación y Orden</strong>. A través de un modelo pedagógico innovador,
          constructivista y con carácter militar, promovemos el liderazgo, la responsabilidad
          ciudadana y el desarrollo de competencias para la vida universitaria, profesional y social.
        </p>
      ),
    },
    {
      key: 'vision',
      eyebrow: 'Mirando al futuro',
      title: 'Visión',
      img: 'assets/gallery/eventos-01.jpg',
      body: (
        <p>
          En el año <strong>2030</strong>, el Colegio Militar General Santander será reconocido
          como el colegio militar líder del oriente colombiano y referente nacional en formación
          integral, académica y disciplinaria. Nos consolidaremos como la primera opción educativa
          para quienes buscan valores, excelencia, innovación y liderazgo.
        </p>
      ),
    },
    {
      key: 'calidad',
      eyebrow: 'Sistema de gestión',
      title: 'Política de calidad',
      img: 'assets/gallery/eventos-02.jpg',
      body: (
        <p>
          Nos comprometemos a implementar un Sistema de Gestión basado en la gestión del riesgo,
          el mejoramiento continuo y la observancia de la normatividad vigente.
          Buscamos <strong>eficiencia, eficacia y excelencia</strong> en nuestros procesos
          institucionales, garantizando la satisfacción de estudiantes, padres de familia
          y la comunidad educativa.
        </p>
      ),
    },
    {
      key: 'historia',
      eyebrow: 'Desde 1965',
      title: 'Nuestra historia',
      img: 'assets/gallery/eventos-04.jpg',
      body: (
        <p>
          Fundado en <strong>1965 por 24 militares retirados</strong> pertenecientes a la cooperativa
          COOSAMIR, el Colegio es una institución privada al servicio de la juventud santandereana,
          rindiendo homenaje al padre de la educación colombiana, el General Francisco de Paula
          Santander. Sesenta y un años formando líderes con responsabilidad social.
        </p>
      ),
    },
  ];

  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);

  // Auto-advance
  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => {
      setActive(a => (a + 1) % slides.length);
    }, 6500);
    return () => clearInterval(t);
  }, [paused, slides.length]);

  const go = (i) => setActive((i + slides.length) % slides.length);

  return (
    <section id="nosotros" ref={ref} className="cmgs-about reveal section section-dark"
             onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="container">
        <div className="section-opener on-dark">
          <p className="eyebrow">— Nuestra institución —</p>
          <div className="divider"><span className="line"/><span className="dot"/><span className="line"/></div>
          <h2 className="title">Nosotros</h2>
        </div>

        <div className="cmgs-about-carousel">
          {/* Tabs / pills */}
          <div className="cmgs-about-tabs" role="tablist">
            {slides.map((s, i) => (
              <button
                key={s.key}
                className={`cmgs-about-tab ${active === i ? 'is-active' : ''}`}
                onClick={() => go(i)}
                role="tab"
                aria-selected={active === i}
              >
                <span className="num">0{i+1}</span>
                <span className="lbl">{s.title}</span>
              </button>
            ))}
          </div>

          {/* Stage */}
          <div className="cmgs-about-stage">
            {slides.map((s, i) => (
              <article
                key={s.key}
                className={`cmgs-about-slide ${active === i ? 'is-active' : ''}`}
                aria-hidden={active !== i}
              >
                <div className="cmgs-about-img">
                <img src={s.img} alt={s.title} loading="lazy" decoding="async"/>
                  <div className="cmgs-about-img-frame"/>
                  <div className="cmgs-about-img-tag">
                    <span className="years">61</span>
                    <span className="label">Años de<br/>excelencia</span>
                  </div>
                </div>
                <div className="cmgs-about-text">
                  <p className="eyebrow">— {s.eyebrow} —</p>
                  <h3>{s.title}</h3>
                  <div className="cmgs-block">{s.body}</div>
                  <div className="cmgs-about-progress">
                    {slides.map((_, j) => (
                      <span key={j} className={j === active ? 'is-active' : ''}/>
                    ))}
                  </div>
                </div>
              </article>
            ))}
          </div>

          {/* Arrows */}
          <button className="cmgs-about-arrow left" onClick={() => go(active - 1)} aria-label="Anterior">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <button className="cmgs-about-arrow right" onClick={() => go(active + 1)} aria-label="Siguiente">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>

      <style>{`
        .cmgs-about { position: relative; overflow: hidden; }
        .cmgs-about::before {
          content: ''; position: absolute; inset: 0;
          background:
            radial-gradient(ellipse at 15% 20%, rgba(74,120,200,0.18), transparent 55%),
            radial-gradient(ellipse at 85% 80%, rgba(212,160,42,0.10), transparent 55%);
          pointer-events: none;
        }
        .cmgs-about .container { position: relative; }

        /* Tabs */
        .cmgs-about-tabs {
          display: flex; justify-content: center; flex-wrap: wrap;
          gap: 12px;
          margin-bottom: 44px;
        }
        .cmgs-about-tab {
          background: rgba(255,255,255,0.06);
          color: rgba(255,255,255,0.7);
          border: 1px solid rgba(212,160,42,0.32);
          border-radius: 999px;
          padding: 10px 22px;
          display: inline-flex; align-items: center; gap: 10px;
          font: 600 12px/1 var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          cursor: pointer;
          transition: all 260ms var(--ease-out);
        }
        .cmgs-about-tab .num {
          font: 700 12px/1 var(--font-display);
          color: var(--gold-300);
          letter-spacing: 0;
        }
        .cmgs-about-tab:hover {
          background: rgba(212,160,42,0.12);
          color: #fff;
          border-color: var(--gold-500);
        }
        .cmgs-about-tab.is-active {
          background: var(--gold-500);
          color: var(--navy-900);
          border-color: var(--gold-500);
          box-shadow: 0 8px 20px rgba(212,160,42,0.32);
        }
        .cmgs-about-tab.is-active .num { color: var(--navy-900); }

        /* Stage */
        .cmgs-about-carousel { position: relative; }
        .cmgs-about-stage {
          position: relative;
          min-height: 460px;
        }
        .cmgs-about-slide {
          position: absolute; inset: 0;
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 56px;
          align-items: center;
          opacity: 0; pointer-events: none;
          transform: translateY(20px);
          transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
        }
        .cmgs-about-slide.is-active {
          opacity: 1; pointer-events: auto; transform: translateY(0);
        }
        @media (max-width: 880px) {
          .cmgs-about-slide { grid-template-columns: 1fr; gap: 32px; }
          .cmgs-about-stage { min-height: 720px; }
        }

        .cmgs-about-img { position: relative; aspect-ratio: 1.1/1; }
        .cmgs-about-img img {
          width: 100%; height: 100%; object-fit: cover;
          border-radius: 14px;
          box-shadow: var(--shadow-lg);
        }
        .cmgs-about-img-frame {
          position: absolute; left: -16px; top: 16px; right: 16px; bottom: -16px;
          border: 2px solid var(--gold-500); border-radius: 14px;
          z-index: -1;
        }
        .cmgs-about-img-tag {
          position: absolute; right: -14px; bottom: -14px;
          background: var(--navy-900); color: #fff;
          padding: 16px 20px; border-radius: 12px;
          display:flex; align-items:center; gap: 10px;
          box-shadow: var(--shadow-md);
          border: 1.5px solid var(--gold-500);
        }
        .cmgs-about-img-tag .years {
          font: 700 40px/1 var(--font-display); color: var(--gold-400); letter-spacing: -0.02em;
        }
        .cmgs-about-img-tag .label {
          font: 600 9px/1.25 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.8);
        }

        .cmgs-about-text .eyebrow {
          font: 600 11px/1.4 var(--font-body); letter-spacing: 0.22em;
          text-transform: uppercase; color: var(--gold-400); margin: 0 0 10px;
        }
        .cmgs-about-text h3 {
          font: 700 clamp(34px, 3.6vw, 52px)/1 var(--font-display);
          text-transform: uppercase; letter-spacing: -0.02em; color: #fff;
          margin: 0 0 22px;
        }
        .cmgs-block {
          padding-left: 18px; border-left: 2px solid var(--gold-500);
          margin-bottom: 26px;
        }
        .cmgs-block p {
          font: 400 15px/1.65 var(--font-body); color: rgba(255,255,255,0.88); margin: 0;
        }
        .cmgs-block strong { color: var(--gold-300); font-weight: 600; }

        .cmgs-about-progress { display: flex; gap: 6px; }
        .cmgs-about-progress span {
          height: 3px; width: 36px; border-radius: 2px;
          background: rgba(255,255,255,0.18);
          transition: all 340ms;
        }
        .cmgs-about-progress span.is-active {
          background: var(--gold-500); width: 56px;
        }

        /* Arrows */
        .cmgs-about-arrow {
          position: absolute; top: 50%; transform: translateY(-50%);
          width: 44px; height: 44px; border-radius: 999px;
          background: rgba(255,255,255,0.06);
          border: 1.5px solid var(--gold-500);
          color: var(--gold-300);
          cursor: pointer;
          display: flex; align-items: center; justify-content: center;
          backdrop-filter: blur(6px);
          transition: all 220ms var(--ease-out);
          z-index: 3;
        }
        .cmgs-about-arrow.left  { left: -22px; }
        .cmgs-about-arrow.right { right: -22px; }
        .cmgs-about-arrow:hover {
          background: var(--gold-500); color: var(--navy-900);
          transform: translateY(-50%) scale(1.08);
        }
        @media (max-width: 880px) {
          .cmgs-about-arrow { display: none; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { About });