{{--
    Menú del sitio público del club.
    Recibe (opcional) $activo con: torneos | ranking
    Las secciones que viven dentro de la home se enlazan con "/#ancla" para que
    también funcionen desde las páginas internas.

    El CSS y el JS del menú viven acá y NO en _estilos/index: el nav se incluye
    una sola vez por página, así que acá hay una sola copia. Si se duplicaran
    (la home tiene su propio <style>, las internas usan _estilos), el día que se
    retoca una las otras quedan distintas.
--}}
@php
    $navLogo   = $navLogo   ?? ($logo ?? null);
    $navNombre = $navNombre ?? ($nombre ?? '');
    $activo    = $activo    ?? null;
@endphp
<style>
    /* ═══════════ LOGO ═══════════
       El archivo del club es un medallón circular centrado sobre un cuadrado
       blanco (el círculo ocupa el 72% del PNG). El recorte circular saca ese
       fondo sin tener que reprocesar la imagen: el alto se agranda 1.39x para
       que el círculo quede del tamaño de antes y el margen negativo devuelve el
       alto real, así el nav no crece.
       Si algún club sube un logo rectangular, sacar el clip-path y volver a
       `height` sin escalar. */
    .nav-brand img { height: 78px; width: auto; clip-path: circle(36% at 50% 50%); margin: -11px 0 }

    /* ═══════════ MENÚ ═══════════
       En escritorio .nav-menu es transparente al layout (mismo resultado que
       cuando .nav-links y .nav-cta colgaban del header); en móvil se convierte
       en el panel que abre la hamburguesa. */
    .nav-menu { display: flex; flex: 1; align-items: center; gap: 28px }
    .nav-burger { display: none }
    /* Sin esto "Quiénes somos" se parte en dos líneas y descalza la barra */
    .nav-links a { white-space: nowrap }

    @media (max-width: 1100px) {
        .nav-brand img { height: 64px; margin: -9px 0 }
        .nav-menu { gap: 18px }
    }

    /* ── Móvil / tablet: hamburguesa ── */
    @media (max-width: 900px) {
        .nav { flex-wrap: nowrap; justify-content: space-between; gap: 12px }
        .nav-burger {
            display: flex; flex-direction: column; justify-content: center; gap: 5px;
            width: 46px; height: 42px; padding: 0 9px; flex-shrink: 0;
            background: transparent; border: 2px solid rgba(255,255,255,.38);
            border-radius: 6px; cursor: pointer;
        }
        .nav-burger:hover { border-color: var(--clay) }
        .nav-burger span {
            display: block; height: 2.5px; background: #fff; border-radius: 2px;
            transition: transform .18s, opacity .18s;
        }
        .nav-burger.abierto span:nth-child(1) { transform: translateY(7.5px) rotate(45deg) }
        .nav-burger.abierto span:nth-child(2) { opacity: 0 }
        .nav-burger.abierto span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg) }

        .nav-menu {
            display: none;
            position: absolute; top: 100%; left: 0; right: 0;
            flex-direction: column; align-items: stretch; gap: 0;
            background: var(--negro);
            border-top: 3px solid var(--clay);
            padding: 4px 18px 18px;
            box-shadow: 0 18px 40px rgba(0,0,0,.45);
            max-height: calc(100vh - 74px); overflow-y: auto;
        }
        .nav-menu.abierto { display: flex }

        .nav-links { flex-direction: column; gap: 0; width: 100%; overflow: visible }
        .nav-links a {
            padding: 15px 2px; font-size: 15px;
            border-bottom: 1px solid rgba(255,255,255,.10);
        }
        /* En vertical el subrayado del ítem activo no se lee: va en color */
        .nav-links a.activo { border-bottom-color: rgba(255,255,255,.10); color: var(--clay) }

        .nav-cta { width: 100%; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px }
        .btn-nav { text-align: center; align-self: stretch }
        /* Dentro del panel hay lugar de sobra: el badge recupera su texto (el
           _header_badge_taxes lo esconde abajo de 540px pensando en la barra) y
           no se estira de lado a lado como los botones. */
        .nav-menu .tx-header-badge { margin-left: 0 }
        .nav-menu .tx-header-badge .tx-hb-text { display: inline }
    }
    @media (max-width: 600px) {
        .nav-brand img { height: 56px; margin: -8px 0 }
    }
</style>
<header class="nav">
    <a href="/" class="nav-brand">
        @if($navLogo)<img src="{{ $navLogo }}" alt="{{ $navNombre }}">@endif
    </a>

    <button type="button" class="nav-burger" id="navBurger"
            aria-label="Abrir menú" aria-expanded="false" aria-controls="navMenu">
        <span></span><span></span><span></span>
    </button>

    <div class="nav-menu" id="navMenu">
        <nav class="nav-links">
            <a href="/torneos" class="{{ $activo === 'torneos' ? 'activo' : '' }}">Torneos</a>
            <a href="/ranking" class="{{ $activo === 'ranking' ? 'activo' : '' }}">Ranking</a>
            <a href="/#quienes-somos">Quiénes somos</a>
            <a href="/#servicios">Servicios</a>
            <a href="/#sponsors">Sponsors</a>
            <a href="/#contacto">Contacto</a>
        </nav>
        <div class="nav-cta">
            <a href="/login" class="btn-nav btn-nav--full">Ingresar</a>
            <a href="/registrarse" class="btn-nav btn-nav--ghost">Registrarme</a>
            @include('taxes_subdomain.layouts.subdomain.tenis._header_badge_taxes')
        </div>
    </div>
</header>
<script>
    (function () {
        var burger = document.getElementById('navBurger');
        var menu   = document.getElementById('navMenu');
        if (!burger || !menu) return;

        function cerrar() {
            menu.classList.remove('abierto');
            burger.classList.remove('abierto');
            burger.setAttribute('aria-expanded', 'false');
        }

        burger.addEventListener('click', function () {
            var abierto = menu.classList.toggle('abierto');
            burger.classList.toggle('abierto', abierto);
            burger.setAttribute('aria-expanded', abierto ? 'true' : 'false');
        });

        // Los links a anclas de la home no recargan la página: sin esto el panel
        // quedaría abierto tapando la sección a la que se acaba de saltar.
        menu.addEventListener('click', function (e) {
            if (e.target.closest('a')) cerrar();
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') cerrar();
        });
    })();
</script>