// Deportes del Norte — shared global components (Header, Footer)
// Loaded by every page via:
//   <script type="text/babel" src="/media/shared.jsx" data-presets="react"></script>
// placed BEFORE the page's own inline script. Adds Header and Footer onto
// window so pages can render them as <Header /> and <Footer />.
//
// All URLs in this file are ABSOLUTE so they resolve identically no matter
// what page depth loads it (fixes the previous relative-path / trailing-slash
// bugs and means future nav changes are a single-file edit).

function Header() {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  // Active-section detection from URL path. Each top-level nav item highlights
  // (text-white font-semibold) only when the current page belongs to it.
  const path = (typeof window !== "undefined" && window.location && window.location.pathname) || "/";
  const isInicio = path === "/" || path === "/index.html";
  const isBasquetbol = /^\/(drmbl|lomba|lomba-3x3|copa-colmex|copa-beta)(\/|$)/.test(path);
  const isTenis = /^\/atl(\/|$)/.test(path);
  const isPadel = /^\/apl(\/|$)/.test(path);
  const isPokemon = /^\/press-start(\/|$)/.test(path);
  const isGalerias = /^\/galerias(\/|$)/.test(path);
  const activeCls = "text-white font-semibold";
  const inactiveCls = "text-neutral-400 hover:text-white";
  return (
    <header className="sticky top-0 z-50 border-b border-white/10 bg-neutral-950/90 backdrop-blur">
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 sm:px-5 py-3 sm:py-4">
        <a href="/" className="flex items-center min-w-0">
          <img src="/media/Main-Logo.png" alt="Deportes del Norte" className="h-9 sm:h-12 w-auto flex-shrink-0" />
        </a>

        <nav className="hidden lg:flex items-center gap-6 text-sm text-neutral-400">
          <a href="/" className={"transition cursor-pointer " + (isInicio ? activeCls : inactiveCls)}>Inicio</a>
          <div className="relative group">
            <button className={"flex items-center gap-1.5 transition py-2 " + (isBasquetbol ? activeCls : inactiveCls)} type="button">
              <span>Basquetbol</span>
              <span className="text-[10px] group-hover:translate-y-0.5 transition-transform">▾</span>
            </button>
            <div className="absolute top-full left-0 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-150 pt-2 z-50">
              <div className="rounded-xl bg-neutral-900 border border-white/10 shadow-2xl py-2 min-w-[260px]">
                <a href="/drmbl/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">DRMBL</span>
                  <span className="text-[10px] uppercase tracking-widest text-red-400">Activo</span>
                </a>
                <div className="pl-4 pr-2 pb-1.5 space-y-0.5">
                  <a href="/drmbl/schedule/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Calendario</span></a>
                  <a href="/drmbl/standings/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Tabla</span></a>
                  <a href="/drmbl/stats/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Estadísticas</span></a>
                </div>
                <div className="mx-4 my-1 border-t border-white/5"></div>
                <a href="/lomba/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">LOMBA</span>
                  <span className="text-[10px] uppercase tracking-widest text-red-400">Activo</span>
                </a>
                <div className="pl-4 pr-2 pb-1.5 space-y-0.5">
                  <a href="/lomba/schedule/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Rol</span></a>
                  <a href="/lomba/standings/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Tabla</span></a>
                </div>
                <div className="mx-4 my-1 border-t border-white/5"></div>
                <a href="/lomba-3x3/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">LOMBA 3x3</span>
                  <span className="text-[10px] uppercase tracking-widest text-red-400">Activo</span>
                </a>
                <div className="pl-4 pr-2 pb-1.5 space-y-0.5">
                  <a href="/lomba-3x3/schedule/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Rol</span></a>
                  <a href="/lomba-3x3/standings/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Tabla</span></a>
                </div>
                <div className="mx-4 my-1 border-t border-white/5"></div>
                <a href="/copa-colmex/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">Copa Colmex</span>
                  <span className="text-[10px] uppercase tracking-widest text-orange-400">Próximo</span>
                </a>
                <div className="pl-4 pr-2 pb-1.5 space-y-0.5">
                  <a href="/copa-colmex/schedule/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Rol</span></a>
                  <a href="/copa-colmex/standings/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Tabla</span></a>
                </div>
                <div className="mx-4 my-1 border-t border-white/5"></div>
                <div className="flex items-center justify-between gap-3 px-4 py-2.5 cursor-default hover:bg-white/5 transition">
                  <span className="font-semibold text-white">Copa Beta</span>
                  <span className="text-[10px] uppercase tracking-widest text-neutral-500">Próximamente</span>
                </div>
              </div>
            </div>
          </div>
          <div className="relative group">
            <button className={"flex items-center gap-1.5 transition py-2 " + (isTenis ? activeCls : inactiveCls)} type="button">
              <span>Tenis</span>
              <span className="text-[10px] group-hover:translate-y-0.5 transition-transform">▾</span>
            </button>
            <div className="absolute top-full left-0 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-150 pt-2 z-50">
              <div className="rounded-xl bg-neutral-900 border border-white/10 shadow-2xl py-2 min-w-[300px]">
                <a href="/atl/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">Los Alamos Tennis League</span>
                  <span className="text-[10px] uppercase tracking-widest text-lime-400">Activo</span>
                </a>
                <div className="pl-4 pr-2 pb-1.5 space-y-0.5">
                  <a href="/atl/tournaments/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Torneos</span></a>
                  <a href="/atl/rankings/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Rankings</span></a>
                  <a href="/atl/players/" className="flex items-center gap-2 px-3 py-1.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition"><span className="text-neutral-600">→</span><span>Jugadores</span></a>
                </div>
              </div>
            </div>
          </div>
          <div className="relative group">
            <button className={"flex items-center gap-1.5 transition py-2 " + (isPadel ? activeCls : inactiveCls)} type="button">
              <span>Padel</span>
              <span className="text-[10px] group-hover:translate-y-0.5 transition-transform">▾</span>
            </button>
            <div className="absolute top-full left-0 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-150 pt-2 z-50">
              <div className="rounded-xl bg-neutral-900 border border-white/10 shadow-2xl py-2 min-w-[300px]">
                <a href="/apl/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">Los Alamos Padel League</span>
                  <span className="text-[10px] uppercase tracking-widest text-neutral-500">Próximamente</span>
                </a>
              </div>
            </div>
          </div>
          <div className="relative group">
            <button className={"flex items-center gap-1.5 transition py-2 " + (isPokemon ? activeCls : inactiveCls)} type="button">
              <span>Pokémon</span>
              <span className="text-[10px] group-hover:translate-y-0.5 transition-transform">▾</span>
            </button>
            <div className="absolute top-full left-0 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-150 pt-2 z-50">
              <div className="rounded-xl bg-neutral-900 border border-white/10 shadow-2xl py-2 min-w-[240px]">
                <a href="/press-start/" className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-white/5 transition">
                  <span className="font-bold text-white">Press Start</span>
                  <span className="text-[10px] uppercase tracking-widest text-emerald-400">Activo</span>
                </a>
              </div>
            </div>
          </div>
          <a href="/galerias/" className={"transition cursor-pointer " + (isGalerias ? activeCls : inactiveCls)}>Galerías</a>
        </nav>

        <button
          type="button"
          onClick={() => setMobileOpen(o => !o)}
          className="lg:hidden flex items-center justify-center h-10 w-10 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 transition text-white text-lg flex-shrink-0"
          aria-label="Menú"
          aria-expanded={mobileOpen}
        >
          {mobileOpen ? "✕" : "☰"}
        </button>
        <div className="hidden sm:flex items-center gap-2 text-[11px] uppercase tracking-widest text-neutral-400">
          <span className="rounded-full bg-white/10 px-3 py-1 font-semibold text-white">ES</span>
          <span className="opacity-40 cursor-default" title="English coming soon">EN</span>
        </div>
      </div>
      {mobileOpen && (
        <div className="lg:hidden border-t border-white/10 bg-neutral-950 max-h-[calc(100dvh-60px)] overflow-y-auto overscroll-contain">
          <nav className="px-4 py-3 space-y-0.5">
            <a href="/" className="block rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">Inicio</a>
            <div className="pt-4 pb-1 px-3 text-[10px] uppercase tracking-[0.3em] text-neutral-500 font-bold">Basquetbol</div>
            <a href="/drmbl/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>DRMBL</span>
              <span className="text-[10px] uppercase tracking-widest text-red-400">Activo</span>
            </a>
            <a href="/drmbl/schedule/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Calendario</a>
            <a href="/drmbl/standings/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Tabla</a>
            <a href="/drmbl/stats/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Estadísticas</a>
            <a href="/lomba/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>LOMBA</span>
              <span className="text-[10px] uppercase tracking-widest text-red-400">Activo</span>
            </a>
            <a href="/lomba/schedule/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Rol</a>
            <a href="/lomba/standings/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Tabla</a>
            <a href="/lomba-3x3/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>LOMBA 3x3</span>
              <span className="text-[10px] uppercase tracking-widest text-red-400">Activo</span>
            </a>
            <a href="/lomba-3x3/schedule/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Rol</a>
            <a href="/lomba-3x3/standings/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Tabla</a>
            <a href="/copa-colmex/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>Copa Colmex</span>
              <span className="text-[10px] uppercase tracking-widest text-orange-400">Próximo</span>
            </a>
            <a href="/copa-colmex/schedule/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Rol</a>
            <a href="/copa-colmex/standings/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Tabla</a>
            <div className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-semibold text-neutral-400 cursor-default">
              <span>Copa Beta</span>
              <span className="text-[10px] uppercase tracking-widest text-neutral-500">Próximamente</span>
            </div>
            <div className="pt-4 pb-1 px-3 text-[10px] uppercase tracking-[0.3em] text-neutral-500 font-bold">Tenis</div>
            <a href="/atl/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>Los Alamos Tennis League</span>
              <span className="text-[10px] uppercase tracking-widest text-lime-400">Activo</span>
            </a>
            <a href="/atl/tournaments/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Torneos</a>
            <a href="/atl/rankings/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Rankings</a>
            <a href="/atl/players/" className="block rounded-lg pl-7 pr-3 py-2 text-xs text-neutral-400 hover:text-white hover:bg-white/5 transition">→ Jugadores</a>
            <div className="pt-4 pb-1 px-3 text-[10px] uppercase tracking-[0.3em] text-neutral-500 font-bold">Padel</div>
            <a href="/apl/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>Los Alamos Padel League</span>
              <span className="text-[10px] uppercase tracking-widest text-neutral-500">Próximamente</span>
            </a>
            <div className="pt-4 pb-1 px-3 text-[10px] uppercase tracking-[0.3em] text-neutral-500 font-bold">Pokémon</div>
            <a href="/press-start/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition">
              <span>Press Start</span>
              <span className="text-[10px] uppercase tracking-widest text-emerald-400">Activo</span>
            </a>
            <div className="pt-4 pb-1 px-3 text-[10px] uppercase tracking-[0.3em] text-neutral-500 font-bold">Galerías</div>
            <a href="/galerias/" className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-bold text-white hover:bg-white/5 transition"><span>Todas las galerías</span><span className="text-[10px] uppercase tracking-widest text-emerald-400">Activo</span></a>
          </nav>
        </div>
      )}
    </header>
  );
}

function Footer() {
  return (
    <footer className="border-t border-white/10 bg-neutral-950">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 py-8 sm:py-10 flex flex-col sm:flex-row items-center justify-between gap-4 text-[11px] sm:text-xs uppercase tracking-widest text-neutral-500">
        <div className="flex items-center gap-3">
          <img src="/media/Circle-Small.png" alt="" className="h-7 w-auto" />
          <span>Deportes del Norte</span>
        </div>
        <div className="text-neutral-600 text-center sm:text-right">© 2026 NDQ Studios</div>
      </div>
    </footer>
  );
}

// Expose to global scope so each page's inline Babel script can render them.
window.Header = Header;
window.Footer = Footer;
