<header class="app-header">
  <a class="app-header-brand" href="/matchs" aria-label="Matchs TopStats">
    <img src="/assets/topstats-robot-cutout.png?v=<%= assetVersion || '1' %>" alt="">
    <strong>TOPSTATS</strong>
  </a>
  <nav class="app-desktop-nav" aria-label="Navigation principale">
    <a class="<%= activePath('/matchs') ? 'active' : '' %>" href="/matchs">Football</a>
    <a class="<%= activePath('/recommendations') ? 'active' : '' %>" href="/recommendations">Avis du jour</a>
    <a class="<%= activePath('/stats-du-jour') ? 'active' : '' %>" href="/stats-du-jour">Stats du jour</a>
    <a class="<%= activePath('/favoris') ? 'active' : '' %>" href="/favoris">Favoritos</a>
    <a class="<%= activePath('/ma-liste') ? 'active' : '' %>" href="/ma-liste">Ma liste</a>
    <a class="<%= activePath('/chat') ? 'active' : '' %>" href="/chat">Chat</a>
  </nav>
  <div class="app-desktop-actions">
    <% if (currentUser) { %>
      <a href="/mon-compte">Mi cuenta</a>
      <a class="app-desktop-pro" href="/pro">TopStats PRO</a>
      <form action="/deconnexion" method="post">
        <button type="submit">Se déconnecter</button>
      </form>
    <% } else { %>
      <a href="/connexion">Iniciar sesión</a>
      <a class="app-desktop-pro" href="/pro">TopStats PRO</a>
    <% } %>
  </div>
  <button class="app-header-menu" type="button" data-menu-toggle aria-label="Menu">
    <svg class="neo-menu-icon" viewBox="0 0 44 32" aria-hidden="true" focusable="false">
      <path class="neo-menu-line neo-menu-line-top" d="M12 8h24"></path>
      <path class="neo-menu-line neo-menu-line-mid" d="M8 16h28"></path>
      <path class="neo-menu-line neo-menu-line-bottom" d="M12 24h24"></path>
      <circle class="neo-menu-dot" cx="8" cy="8" r="3"></circle>
      <circle class="neo-menu-dot neo-menu-dot-soft" cx="36" cy="24" r="2.5"></circle>
    </svg>
  </button>
</header>
<% const hideProBanner = typeof hideGlobalProBanner !== 'undefined' && hideGlobalProBanner; %>
<% if (currentUser && !hideProBanner && !(typeof isPro !== 'undefined' && isPro)) { %>
  <section class="global-pro-banner" aria-label="Débloquer TopStats PRO">
    <div class="global-pro-banner-copy">
      <span>PRO</span>
      <strong>Débloquez TopStats PRO</strong>
      <p>Accédez aux meilleurs signaux, au chat TopStats et aux cotes sans limite.</p>
    </div>
    <a class="global-pro-banner-cta" href="/pro">Passer PRO</a>
  </section>
<% } %>
<aside class="side-menu" data-side-menu>
  <div class="side-menu-top">
    <a class="side-menu-logo" href="/matchs" aria-label="Matchs TopStats">
      <img src="/assets/topstats-robot-cutout.png?v=<%= assetVersion || '1' %>" alt="">
      <strong>TOPSTATS<span>.</span></strong>
    </a>
    <button class="side-menu-close" type="button" data-menu-close aria-label="Fermer le menu">×</button>
  </div>
  <div class="side-menu-panel">
    <div class="side-menu-welcome">
      <strong>Bienvenue</strong>
      <p><%= currentUser ? 'Entra en tu espacio TopStats.' : 'Inicia sesión para recuperar tus consejos.' %></p>
    </div>
    <% if (currentUser) { %>
      <a class="side-menu-action" href="/profil">Mon profil</a>
      <form class="side-menu-logout-form" action="/deconnexion" method="post">
        <button class="side-menu-action side-menu-logout" type="submit">Déconnexion</button>
      </form>
    <% } else { %>
      <a class="side-menu-action" href="/connexion">Entrar</a>
      <a class="side-menu-action" href="/inscription">S'inscrire</a>
    <% } %>
    <a class="side-menu-pro" href="/pro">TopStats PRO</a>
    <nav class="side-menu-links" aria-label="Liens du menu">
      <a href="/matchs">Matchs</a>
      <a href="/recommendations">Avis du jour</a>
      <a href="/stats-du-jour">Stats du jour</a>
      <a href="/ma-liste">Ma liste</a>
      <a href="/chat">Chat TopStats</a>
      <a href="/historique-neo">Historial TopStats</a>
      <% if (currentUser && currentUser.role === 'admin') { %>
        <a href="/admin">Admin</a>
      <% } %>
    </nav>
  </div>
</aside>
