function Footer() {
  const C = CMGS_DATA.contact;
  const S = CMGS_DATA.social;

  return (
    <footer id="contacto" className="cmgs-footer">
      <div className="cmgs-footer-bg" />
      <div className="container">
        <div className="cmgs-footer-grid">
          {/* COL 1 — brand */}
          <div className="cmgs-footer-col cmgs-footer-brand">
            <div className="cmgs-footer-logo">
              <img src="assets/logos/logo-colegio.png" alt="Colegio Militar General Santander" loading="lazy" decoding="async" />
            </div>
            <div className="cmgs-footer-name">
              Colegio Militar<br/>
              <span>General Santander</span>
            </div>
            <p className="cmgs-footer-motto">
              <span>Patria</span><span className="dot"/>
              <span>Superación</span><span className="dot"/>
              <span>Orden</span>
            </p>

            <div className="cmgs-footer-socials">
              <a href={S.facebook} target="_blank" rel="noopener" aria-label="Facebook" className="fs-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 9V7a1 1 0 0 1 1-1h2V3h-3a4 4 0 0 0-4 4v2H8v3h2v9h3v-9h2.5l.5-3H13"/></svg>
              </a>
              <a href={S.instagram} target="_blank" rel="noopener" aria-label="Instagram" className="fs-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
              </a>
              <a href={S.tiktok} target="_blank" rel="noopener" aria-label="TikTok" className="fs-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M16 3v3.2a4.8 4.8 0 0 0 4.5 3.3v3.1a8 8 0 0 1-4.5-1.3v6a5.6 5.6 0 1 1-5.6-5.6v3.1a2.5 2.5 0 1 0 2.5 2.5V3H16Z"/></svg>
              </a>
              <a href={S.youtube} target="_blank" rel="noopener" aria-label="YouTube" className="fs-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22 8s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16 5 12 5 12 5s-4 0-7.2.1c-.4 0-1.2 0-2 .9C2.2 6.6 2 8 2 8s-.2 1.6-.2 3.3v1.5C1.8 14.5 2 16 2 16s.2 1.4.8 2c.8.8 1.8.8 2.2.9C7 19 12 19 12 19s4 0 7.2-.1c.4 0 1.2 0 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.5C22.2 9.6 22 8 22 8ZM10 15V9l5.2 3L10 15Z"/></svg>
              </a>
              <a href={S.whatsapp} target="_blank" rel="noopener" aria-label="WhatsApp" className="fs-btn">
                <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>
              </a>
            </div>
          </div>

          {/* COL 2 — contacto */}
          <div className="cmgs-footer-col">
            <h4>Contacto</h4>
            <ul className="cmgs-footer-list">
              <li>
                <span className="ic">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z"/></svg>
                </span>
                <span>
                  <a href={`tel:${C.phone.replace(/[^\d+]/g,'')}`}>{C.phone}</a>
                  <span className="cmgs-footer-sub">{C.phoneExt} · {C.mobile}</span>
                </span>
              </li>
              <li>
                <span className="ic">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
                </span>
                <a href={`mailto:${C.email}`}>{C.email}</a>
              </li>
              <li>
                <span className="ic">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                </span>
                <span>{C.address}<br/>{C.city}</span>
              </li>
            </ul>
          </div>

          {/* COL 3 — enlaces rápidos */}
          <div className="cmgs-footer-col">
            <h4>Enlaces rápidos</h4>
            <ul className="cmgs-footer-list cmgs-footer-links">
              <li><a href="index.html#nosotros">Nosotros</a></li>
              <li><a href="index.html#programas">Programas</a></li>
              <li><a href="inscripciones.html">Admisiones</a></li>
              <li><a href="index.html#directivos">Directivos</a></li>
              <li><a href="index.html#galeria">Galería</a></li>
              <li>
                <a href={CMGS_DATA.phidias} target="_blank" rel="noopener" className="cmgs-footer-notas">
                  Phidias
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path d="M7 17L17 7M9 7h8v8"/>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Strip de certificaciones — logos grandes, fondo azul navy */}
      <div className="cmgs-footer-certs-strip">
        <div className="container">
          <span className="cmgs-footer-certs-label">Certificaciones · Avales institucionales</span>
          <div className="cmgs-footer-certs-list">
            <div className="cmgs-footer-cert-logo">
              <img src="assets/logos/cert-iso-9001.png" alt="ICONTEC ISO 9001" loading="lazy" decoding="async"/>
            </div>
            <div className="cmgs-footer-cert-logo">
              <img src="assets/logos/cert-iso-21001.png" alt="ICONTEC ISO 21001" loading="lazy" decoding="async"/>
            </div>
            <div className="cmgs-footer-cert-logo">
              <img src="assets/logos/cert-iqnet.png" alt="IQNET Reconocida" loading="lazy" decoding="async"/>
            </div>
          </div>
        </div>
      </div>

      {/* Copyright — al final, después de los certificados */}
      <div className="cmgs-footer-base">
        <div className="container">
          © 2026 Colegio Militar General Santander · Bucaramanga, Colombia · Todos los derechos reservados.
        </div>
      </div>

      <style>{`
        .cmgs-footer {
          position: relative;
          background: var(--navy-950);
          color: rgba(255,255,255,0.78);
          padding: 72px 0 0;
          overflow: hidden;
        }
        .cmgs-footer-bg {
          position: absolute; top: 0; left: 0; right: 0; height: 600px;
          background:
            radial-gradient(ellipse at 0% 0%, rgba(74,120,200,0.10), transparent 50%),
            radial-gradient(ellipse at 100% 100%, rgba(212,160,42,0.06), transparent 60%);
        }
        .cmgs-footer .container { position: relative; }
        .cmgs-footer-grid {
          display: grid;
          grid-template-columns: 1.2fr 1.1fr 1fr;
          gap: 56px;
          padding-bottom: 56px;
          border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        @media (max-width: 880px) {
          .cmgs-footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
        }

        .cmgs-footer-logo {
          width: 76px; height: 76px; border-radius: 999px;
          background: #fff;
          display:flex; align-items:center; justify-content:center;
          box-shadow: 0 0 0 2px var(--gold-500);
          margin-bottom: 18px;
        }
        .cmgs-footer-logo img { width: 64px; height: 64px; object-fit: contain; }
        .cmgs-footer-name {
          font: 700 18px/1.15 var(--font-display); text-transform: uppercase;
          color: #fff; letter-spacing: 0.02em;
        }
        .cmgs-footer-name span { color: var(--gold-400); font-weight: 600; }
        .cmgs-footer-motto {
          margin: 16px 0 22px;
          font: 600 10px/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
          color: var(--gold-300);
          display:flex; align-items:center; gap: 10px; flex-wrap: wrap;
        }
        .cmgs-footer-motto .dot { width: 4px; height: 4px; background: var(--gold-500); transform: rotate(45deg); }

        .cmgs-footer-socials { display:flex; gap: 8px; flex-wrap: wrap; }
        .cmgs-footer-socials .fs-btn {
          width: 38px; height: 38px; border-radius: 999px;
          border: 1px solid rgba(212,160,42,0.45);
          color: var(--gold-300);
          display:inline-flex; align-items:center; justify-content:center;
          transition: all 220ms var(--ease-out);
        }
        .cmgs-footer-socials .fs-btn:hover {
          background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500);
          transform: translateY(-3px);
        }

        .cmgs-footer-col h4 {
          font: 600 11px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--gold-400); margin: 0 0 18px;
          padding-bottom: 12px; border-bottom: 1px solid rgba(212,160,42,0.22);
        }
        .cmgs-footer-list { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 14px; }
        .cmgs-footer-list li { display:flex; gap: 12px; align-items:flex-start; font: 400 14px/1.45 var(--font-body); }
        .cmgs-footer-list .ic {
          width: 26px; height: 26px; flex: 0 0 26px;
          border-radius: 999px;
          display:inline-flex; align-items:center; justify-content:center;
          background: rgba(212,160,42,0.14); color: var(--gold-300);
        }
        .cmgs-footer-list a { transition: color 200ms; }
        .cmgs-footer-list a:hover { color: var(--gold-300); }
        .cmgs-footer-sub { display:block; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }

        .cmgs-footer-notas {
          display:inline-flex; gap: 8px; align-items:center;
          color: var(--gold-400) !important; font-weight: 600;
        }

        /* ============================================================
           Strip de certificaciones — grande, conectado al footer
           ============================================================ */
        .cmgs-footer-certs-strip {
          position: relative;
          background: var(--navy-900);
          color: #fff;
          padding: 56px 0 60px;
          margin-top: 48px;
        }
        .cmgs-footer-certs-strip::before {
          content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
        }
        .cmgs-footer-certs-strip .container {
          display: flex; flex-direction: column; align-items: center; gap: 28px;
        }
        .cmgs-footer-certs-label {
          font: 700 12px/1 var(--font-body);
          letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--gold-300);
        }
        .cmgs-footer-certs-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
          width: 100%;
          max-width: 1080px;
        }
        .cmgs-footer-cert-logo {
          background: linear-gradient(180deg, #ffffff 0%, #f5f3ed 100%);
          border-radius: 16px;
          padding: 32px 28px;
          height: 200px;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 18px 36px rgba(0,0,0,0.42), inset 0 0 0 2px rgba(212,160,42,0.5);
          transition: all 320ms var(--ease-out);
          position: relative;
        }
        .cmgs-footer-cert-logo::before {
          content: '';
          position: absolute; inset: 6px;
          border: 1px dashed rgba(212,160,42,0.32);
          border-radius: 11px;
          pointer-events: none;
        }
        .cmgs-footer-cert-logo:hover {
          transform: translateY(-6px);
          box-shadow: 0 28px 52px rgba(212,160,42,0.32), inset 0 0 0 2px var(--gold-500);
        }
        .cmgs-footer-cert-logo img {
          max-height: 150px;
          max-width: 100%;
          width: auto; height: auto;
          object-fit: contain;
          display: block;
          filter: drop-shadow(0 4px 10px rgba(74,120,200,0.18));
        }
        @media (max-width: 880px) {
          .cmgs-footer-certs-list { grid-template-columns: 1fr; max-width: 380px; gap: 18px; }
          .cmgs-footer-cert-logo { height: 170px; padding: 24px; }
          .cmgs-footer-cert-logo img { max-height: 130px; }
        }
        @media (max-width: 480px) {
          .cmgs-footer-certs-strip { padding: 40px 0 44px; margin-top: 36px; }
          .cmgs-footer-cert-logo { height: 150px; padding: 20px; }
          .cmgs-footer-cert-logo img { max-height: 115px; }
        }

        /* Copyright base — al final, después de las certificaciones */
        .cmgs-footer-base {
          padding: 20px 0;
          text-align: center;
          background: var(--navy-950);
          border-top: 1px solid rgba(255,255,255,0.08);
          font: 400 12px/1.5 var(--font-body); letter-spacing: 0.05em;
          color: rgba(255,255,255,0.55);
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });