// ============================================================
//  Header — cabecera fija con efecto "glass" al hacer scroll.
//  RESPONSIVE: en escritorio muestra la navegación a los lados del
//  escudo. En móvil/tablet (≤980px) esa navegación se oculta y aparece
//  un botón hamburguesa que despliega un menú a pantalla completa.
// ============================================================
function Header() {
  const scrolled = useScrolled(60);
  // Estado del menú móvil (abierto / cerrado)
  const [menuOpen, setMenuOpen] = React.useState(false);

  const navLeft  = [
    { label: 'Nosotros',   href: 'index.html#nosotros' },
    { label: 'Admisiones', href: 'inscripciones.html' },
    { label: 'Programas',  href: 'index.html#programas' },
  ];
  const navRight = [
    { label: 'Galería',    href: 'index.html#galeria' },
    { label: 'Directivos', href: 'index.html#directivos' },
    { label: 'Contacto',   href: 'index.html#contacto' },
  ];
  // Lista unificada para el menú móvil
  const navAll = [...navLeft, ...navRight];

  // Cuando el menú móvil está abierto bloqueamos el scroll del fondo
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const headerStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    height: 'var(--header-h)',
    display: 'grid',
    gridTemplateColumns: '1fr auto 1fr',
    alignItems: 'center',
    padding: '0 40px',
    transition: 'background 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out), box-shadow 320ms',
    // Si el menú móvil está abierto forzamos el fondo sólido para legibilidad
    background: (scrolled || menuOpen) ? 'var(--glass-bg)' : 'transparent',
    backdropFilter: (scrolled || menuOpen) ? 'var(--glass-blur)' : 'none',
    WebkitBackdropFilter: (scrolled || menuOpen) ? 'var(--glass-blur)' : 'none',
    boxShadow: scrolled ? '0 1px 0 rgba(212,160,42,0.18)' : 'none',
    color: '#fff',
  };

  return (
    <header style={headerStyle}>
      <nav className="cmgs-nav cmgs-nav-side cmgs-nav-left">
        {navLeft.map(item => (
          <a key={item.label} href={item.href} className="cmgs-nav-link">{item.label}</a>
        ))}
      </nav>

      <a href="index.html#top" className="cmgs-logo" aria-label="Inicio">
        <img src="assets/logos/logo-colegio.png" alt="Colegio Militar General Santander" width="60" height="60" decoding="async" />
      </a>

      <nav className="cmgs-nav cmgs-nav-side cmgs-nav-right">
        {navRight.map(item => (
          <a key={item.label} href={item.href} className="cmgs-nav-link">{item.label}</a>
        ))}
        <a href={CMGS_DATA.phidias} target="_blank" rel="noopener" className="cmgs-nav-cta">
          Phidias
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M7 17L17 7M9 7h8v8"/>
          </svg>
        </a>
      </nav>

      {/* Botón hamburguesa — solo visible en móvil (≤980px vía CSS) */}
      <button
        className={`cmgs-burger ${menuOpen ? 'is-open' : ''}`}
        aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen(o => !o)}
      >
        <span/><span/><span/>
      </button>

      {/* Menú móvil desplegable */}
      <div className={`cmgs-mobile-menu ${menuOpen ? 'is-open' : ''}`}>
        <nav>
          {navAll.map(item => (
            <a key={item.label} href={item.href} className="cmgs-mobile-link" onClick={() => setMenuOpen(false)}>
              {item.label}
            </a>
          ))}
          <a href={CMGS_DATA.phidias} target="_blank" rel="noopener" className="cmgs-mobile-cta" onClick={() => setMenuOpen(false)}>
            Plataforma Phidias
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M7 17L17 7M9 7h8v8"/>
            </svg>
          </a>
        </nav>
      </div>

      <style>{`
        .cmgs-nav-side { display:flex; gap: 28px; align-items:center; }
        .cmgs-nav-left  { justify-self: end;   padding-right: 28px; }
        .cmgs-nav-right { justify-self: start; padding-left:  28px; }
        .cmgs-nav-link {
          color: inherit;
          font: 600 12px/1 var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          position: relative; padding: 8px 2px;
          opacity: 0.94;
          transition: color 200ms;
        }
        .cmgs-nav-link::after {
          content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px;
          height: 2px; background: var(--gold-500); transition: all 220ms var(--ease-out);
        }
        .cmgs-nav-link:hover { color: var(--gold-300); }
        .cmgs-nav-link:hover::after { left: 0; right: 0; }
        .cmgs-nav-cta {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 9px 14px;
          border: 1.5px solid var(--gold-500);
          border-radius: 4px;
          color: var(--gold-300);
          font: 600 11px/1 var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          transition: all 200ms;
        }
        .cmgs-nav-cta:hover { background: var(--gold-500); color: var(--navy-900); }
        .cmgs-logo {
          width: 72px; height: 72px;
          background: #fff; border-radius: 999px;
          display:flex; align-items:center; justify-content:center;
          box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 3px rgba(212,160,42,0.5);
          transition: transform 280ms var(--ease-out);
        }
        .cmgs-logo:hover { transform: scale(1.06) rotate(-3deg); }
        .cmgs-logo img { width: 60px; height: 60px; object-fit: contain; }

        /* ----- Hamburguesa (oculta en escritorio) ----- */
        .cmgs-burger {
          display: none;
          position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
          width: 44px; height: 44px;            /* área táctil cómoda (≥44px) */
          background: transparent; border: 0; cursor: pointer;
          flex-direction: column; align-items: center; justify-content: center; gap: 5px;
          z-index: 110;
        }
        .cmgs-burger span {
          display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;
          transition: transform 280ms var(--ease-out), opacity 200ms;
        }
        .cmgs-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .cmgs-burger.is-open span:nth-child(2) { opacity: 0; }
        .cmgs-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* ----- Panel del menú móvil ----- */
        .cmgs-mobile-menu {
          position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
          z-index: 99;
          background: var(--navy-950);
          padding: 24px 24px 48px;
          display: flex; flex-direction: column;
          transform: translateY(-12px); opacity: 0; pointer-events: none;
          transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
          overflow-y: auto;
        }
        .cmgs-mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .cmgs-mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
        .cmgs-mobile-link {
          color: #fff; font: 600 18px/1 var(--font-display);
          letter-spacing: 0.06em; text-transform: uppercase;
          padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .cmgs-mobile-link:active { color: var(--gold-300); }
        .cmgs-mobile-cta {
          margin-top: 24px;
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          padding: 16px;
          background: var(--gold-500); color: var(--navy-900);
          border-radius: 6px;
          font: 700 13px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
        }

        /* En móvil/tablet: ocultamos navegación lateral y mostramos hamburguesa */
        @media (max-width: 980px) {
          .cmgs-nav-side { display:none; }
          .cmgs-burger   { display:flex; }
        }
        /* En escritorio el menú móvil nunca debe verse */
        @media (min-width: 981px) {
          .cmgs-mobile-menu { display: none; }
        }
        @media (max-width: 560px) {
          header { padding: 0 16px !important; }
        }
      `}</style>
    </header>
  );
}

Object.assign(window, { Header });