function Gallery() {
  const blocks = [
    {
      key: 'eventos',
      label: 'Eventos',
      title: 'Ceremonias e izadas de bandera',
      photos: [
        'assets/gallery/eventos-01.jpg',
        'assets/gallery/eventos-02.jpg',
        'assets/gallery/eventos-03.jpg',
        'assets/gallery/eventos-04.jpg',
        'assets/gallery/eventos-05.jpg',
      ],
    },
    {
      key: 'actividades',
      label: 'Actividades',
      title: 'Vida cadete y formación',
      photos: [
        'assets/gallery/actividades-01.jpg',
        'assets/gallery/actividades-02.jpg',
        'assets/gallery/actividades-03.jpg',
        'assets/gallery/actividades-04.jpg',
        'assets/gallery/actividades-05.jpg',
        'assets/gallery/actividades-06.jpg',
        'assets/gallery/actividades-07.jpg',
      ],
    },
    {
      key: 'salidas',
      label: 'Salidas',
      title: 'Salidas pedagógicas y convivencias',
      photos: [
        'assets/gallery/salidas-01.jpg',
        'assets/gallery/salidas-02.jpg',
        'assets/gallery/salidas-03.jpg',
        'assets/gallery/salidas-04.jpg',
      ],
    },
  ];

  const [indices, setIndices] = useState(blocks.map(() => 0));
  const [expanded, setExpanded] = useState(null);
  const [paused, setPaused] = useState(blocks.map(() => false));

  useEffect(() => {
    const timers = blocks.map((b, i) => {
      if (paused[i]) return null;
      const dur = expanded === i ? 3200 : 4800;
      return setInterval(() => {
        setIndices(prev => {
          const next = [...prev];
          next[i] = (next[i] + 1) % b.photos.length;
          return next;
        });
      }, dur);
    });
    return () => timers.forEach(t => t && clearInterval(t));
  }, [paused, expanded]);

  const advance = (i, dir, e) => {
    e?.stopPropagation();
    setIndices(prev => {
      const next = [...prev];
      next[i] = (next[i] + dir + blocks[i].photos.length) % blocks[i].photos.length;
      return next;
    });
  };

  const setPausedAt = (i, val) => {
    setPaused(prev => { const n = [...prev]; n[i] = val; return n; });
  };

  return (
    <section id="galeria" className="cmgs-gallery section-dark">
      <div className="cmgs-gallery-bg" aria-hidden="true" />

      <div className="container">
        <div className="section-opener on-dark">
          <p className="eyebrow">— Vida institucional —</p>
          <div className="divider"><span className="line"/><span className="dot"/><span className="line"/></div>
          <h2 className="title">Galería</h2>
          <p className="lead">Tres momentos de la vida del Colegio Militar — haz clic en cada bloque para abrir el carrusel.</p>
        </div>

        <div className={`cmgs-blocks ${expanded !== null ? 'has-expanded' : ''}`}>
          {blocks.map((b, i) => {
            const idx = indices[i];
            const isExpanded = expanded === i;
            return (
              <article
                key={b.key}
                className={`cmgs-block ${isExpanded ? 'is-expanded' : ''}`}
                onClick={() => setExpanded(isExpanded ? null : i)}
                onMouseEnter={() => setPausedAt(i, true)}
                onMouseLeave={() => setPausedAt(i, false)}
              >
                <div className="cmgs-block-stage">
                  {b.photos.map((src, j) => (
                    <img
                      key={src}
                      src={src}
                      alt=""
                      loading="lazy"
                      decoding="async"
                      className={j === idx ? 'is-active' : (j === (idx - 1 + b.photos.length) % b.photos.length ? 'is-prev' : '')}
                    />
                  ))}
                  <span className="cmgs-block-notch" />
                  <span className="cmgs-block-grad" />
                </div>

                <div className="cmgs-block-info">
                  <span className="cmgs-block-tag">0{i+1} · {b.label}</span>
                  <h3>{b.title}</h3>
                  <span className="cmgs-block-meta">
                    <span className="cmgs-block-counter">{String(idx + 1).padStart(2,'0')}/{String(b.photos.length).padStart(2,'0')}</span>
                    <span className="cmgs-block-cta">
                      {isExpanded ? 'Cerrar' : 'Ver carrusel'}
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
                        <path d="M5 12h14M13 5l7 7-7 7"/>
                      </svg>
                    </span>
                  </span>
                </div>

                <div className="cmgs-block-dots" onClick={(e) => e.stopPropagation()}>
                  {b.photos.map((_, j) => (
                    <button
                      key={j}
                      className={j === idx ? 'is-active' : ''}
                      onClick={() => setIndices(prev => { const n=[...prev]; n[i]=j; return n; })}
                      aria-label={`Foto ${j+1}`}
                    />
                  ))}
                </div>

                {isExpanded && (
                  <React.Fragment>
                    <button className="cmgs-block-arrow left"  onClick={(e) => advance(i, -1, e)} aria-label="Anterior">
                      <svg width="20" height="20" 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-block-arrow right" onClick={(e) => advance(i, 1, e)} aria-label="Siguiente">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 6l6 6-6 6"/></svg>
                    </button>
                  </React.Fragment>
                )}
              </article>
            );
          })}
        </div>
      </div>

      <style>{`
        .cmgs-gallery {
          padding: 88px 0 96px;
          position: relative; overflow: hidden;
        }
        .cmgs-gallery-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse 60% 70% at 20% 30%, rgba(74,120,200,0.15), transparent 60%),
            radial-gradient(ellipse 55% 65% at 80% 70%, rgba(212,160,42,0.10), transparent 60%);
          animation: gallery-drift 22s ease-in-out infinite alternate;
        }
        @keyframes gallery-drift {
          0%   { transform: translate(0,0); }
          100% { transform: translate(3%, -2%); }
        }

        .cmgs-blocks {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 22px;
          transition: all 600ms var(--ease-out);
        }
        @media (max-width: 880px) { .cmgs-blocks { grid-template-columns: 1fr; } }

        .cmgs-block {
          position: relative;
          background: var(--navy-800);
          border-radius: 14px;
          overflow: hidden;
          cursor: pointer;
          box-shadow: 0 18px 40px rgba(0,0,0,0.35);
          transition: all 500ms var(--ease-out);
          border: 1px solid rgba(255,255,255,0.06);
        }
        .cmgs-block:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(0,0,0,0.5); border-color: rgba(212,160,42,0.35); }
        .cmgs-block.is-expanded {
          grid-column: 1 / -1;
          transform: none;
          box-shadow: 0 36px 80px rgba(0,0,0,0.55);
          border-color: var(--gold-500);
        }
        .cmgs-blocks.has-expanded .cmgs-block:not(.is-expanded) {
          opacity: 0.45; transform: scale(0.96);
        }

        .cmgs-block-stage {
          position: relative; width: 100%;
          aspect-ratio: 4 / 3;
          overflow: hidden;
          transition: aspect-ratio 500ms var(--ease-out);
        }
        .cmgs-block.is-expanded .cmgs-block-stage { aspect-ratio: 21 / 9; }

        .cmgs-block-stage img {
          position: absolute; inset: 0;
          width: 100%; height: 100%; object-fit: cover;
          opacity: 0; transform: scale(1.06);
          transition: opacity 900ms var(--ease-out), transform 6s ease-out;
        }
        .cmgs-block-stage img.is-active { opacity: 1; transform: scale(1.14); z-index: 2; }
        .cmgs-block-stage img.is-prev   { opacity: 0; z-index: 1; }

        .cmgs-block-grad {
          position: absolute; inset: 0; z-index: 3;
          background: linear-gradient(180deg, transparent 40%, rgba(10,23,51,0.85) 100%);
          pointer-events: none;
        }
        .cmgs-block-notch {
          position: absolute; bottom: 0; right: 0; z-index: 4;
          width: 30px; height: 30px;
          background: var(--gold-500);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }

        .cmgs-block-info {
          position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
          padding: 20px 22px 22px;
          color: #fff; pointer-events: none;
        }
        .cmgs-block-tag {
          font: 700 10px/1 var(--font-body); letter-spacing: 0.26em; text-transform: uppercase;
          color: var(--gold-400);
          display: inline-block; margin-bottom: 10px;
        }
        .cmgs-block-info h3 {
          font: 600 clamp(18px, 1.7vw, 22px)/1.15 var(--font-display); text-transform: uppercase;
          letter-spacing: 0.02em; margin: 0 0 12px;
        }
        .cmgs-block-meta {
          display:flex; justify-content:space-between; align-items:center;
          font: 600 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
        }
        .cmgs-block-counter { color: rgba(255,255,255,0.55); font-family: var(--font-display); letter-spacing: 0.06em; font-size: 13px; }
        .cmgs-block-cta {
          display:inline-flex; align-items:center; gap: 6px;
          color: var(--gold-300);
          transition: gap 220ms;
        }
        .cmgs-block:hover .cmgs-block-cta { gap: 10px; color: var(--gold-200); }

        .cmgs-block-dots {
          position: absolute; top: 16px; left: 16px; z-index: 6;
          display:flex; gap: 5px;
        }
        .cmgs-block-dots button {
          width: 20px; height: 3px; border-radius: 2px;
          border: 0; padding: 0; cursor: pointer;
          background: rgba(255,255,255,0.28);
          transition: all 240ms;
        }
        .cmgs-block-dots button.is-active { width: 32px; background: var(--gold-400); }
        .cmgs-block.is-expanded .cmgs-block-dots button { width: 26px; }
        .cmgs-block.is-expanded .cmgs-block-dots button.is-active { width: 44px; }

        .cmgs-block-arrow {
          position: absolute; top: 50%; transform: translateY(-50%); z-index: 7;
          width: 48px; height: 48px; border-radius: 999px;
          background: rgba(0,0,0,0.45);
          border: 1.5px solid var(--gold-500);
          color: #fff; cursor: pointer;
          display:flex; align-items:center; justify-content:center;
          backdrop-filter: blur(6px);
          transition: all 220ms var(--ease-out);
        }
        .cmgs-block-arrow.left  { left: 18px; }
        .cmgs-block-arrow.right { right: 18px; }
        .cmgs-block-arrow:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-50%) scale(1.08); }
      `}</style>
    </section>
  );
}

Object.assign(window, { Gallery });