<header class="relative z-10 mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 py-5 sm:py-6">
  <div class="flex items-center gap-2">
    <button class="hamburger" data-drawer-open="#public-drawer" aria-label="Buka menu">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
    </button>
    <a href="/" class="flex items-center gap-3 group">
      <div class="grid h-10 w-10 sm:h-11 sm:w-11 place-items-center rounded-2xl border border-gold-300/25 bg-gradient-to-br from-gold-300/20 to-gold-500/5 group-hover:from-gold-300/30 transition">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 sm:h-6 sm:w-6 text-gold-300"><path d="m22 7-8.5 8.5-5-5L2 17"/><path d="M16 7h6v6"/></svg>
      </div>
      <div class="hidden sm:block">
        <div class="text-base lg:text-lg font-semibold tracking-wide font-display">TRADER REBAHAN</div>
        <div class="text-xs text-muted">Expert Advisor Ecosystem</div>
      </div>
    </a>
  </div>

  <nav class="hidden lg:flex items-center gap-7 text-sm text-white/70">
    <a href="/#beranda" class="hover:text-white transition">Beranda</a>
    <a href="/#ea" class="hover:text-white transition">List EA</a>
    <a href="/#pantau" class="hover:text-white transition">Akun Pantau</a>
    <a href="/#member" class="hover:text-white transition">Member Area</a>
  </nav>

  <div class="flex items-center gap-2 sm:gap-3">
    <% if (user) { %>
      <a href="<%= user.role === 'admin' ? '/admin' : '/member' %>" class="hidden sm:inline-flex btn btn-outline px-4 py-2 rounded-full text-sm">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>
        <span class="hidden md:inline"><%= user.role === 'admin' ? 'Admin Panel' : 'Member Area' %></span>
        <span class="md:hidden">Panel</span>
      </a>
      <form action="/auth/logout" method="post"><button class="btn btn-gold px-4 sm:px-5 py-2 rounded-full text-sm">Keluar</button></form>
    <% } else { %>
      <a href="/auth/login" class="hidden sm:inline-flex btn btn-outline px-4 py-2 rounded-full text-sm">Masuk</a>
      <a href="/auth/register" class="btn btn-gold px-4 sm:px-5 py-2 rounded-full text-sm">Daftar</a>
    <% } %>
  </div>
</header>

<!-- Mobile drawer for public -->
<div class="drawer-backdrop"></div>
<aside class="drawer" id="public-drawer">
  <button class="drawer-close" data-drawer-close aria-label="Tutup menu">×</button>

  <div class="flex items-center gap-3 mb-8 mt-2">
    <div class="grid h-10 w-10 place-items-center rounded-2xl border border-gold-300/25 bg-gradient-to-br from-gold-300/20 to-gold-500/5">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-gold-300"><path d="m22 7-8.5 8.5-5-5L2 17"/><path d="M16 7h6v6"/></svg>
    </div>
    <div>
      <div class="font-display font-semibold text-sm tracking-wide">TRADER REBAHAN</div>
      <div class="text-[10px] text-muted">Expert Advisor Ecosystem</div>
    </div>
  </div>

  <nav class="space-y-1 flex-1">
    <a href="/" class="side-item" data-drawer-close>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m3 10 9-7 9 7"/><path d="M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10"/></svg>
      Beranda
    </a>
    <a href="/#ea" class="side-item" data-drawer-close>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m7.5 4.27 9 5.15"/><path d="M21 8 12 13 3 8"/><path d="M3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8"/></svg>
      List EA
    </a>
    <a href="/#pantau" class="side-item" data-drawer-close>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
      Akun Pantau
    </a>
    <% if (user) { %>
      <a href="<%= user.role === 'admin' ? '/admin' : '/member' %>" class="side-item" data-drawer-close>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>
        <%= user.role === 'admin' ? 'Admin Panel' : 'Member Area' %>
      </a>
    <% } %>
  </nav>

  <% if (user) { %>
    <div class="card-soft p-4 mt-6">
      <div class="text-xs text-muted">Login sebagai</div>
      <div class="font-medium mt-1 truncate"><%= user.name %></div>
      <div class="text-[11px] text-muted-2 truncate"><%= user.email %></div>
      <form action="/auth/logout" method="post" class="mt-3">
        <button class="btn btn-outline w-full py-2 rounded-xl text-xs" data-no-loading>Keluar</button>
      </form>
    </div>
  <% } else { %>
    <div class="space-y-2 mt-6">
      <a href="/auth/login" class="btn btn-outline w-full py-2.5 rounded-xl text-sm">Masuk</a>
      <a href="/auth/register" class="btn btn-gold w-full py-2.5 rounded-xl text-sm">Daftar Member</a>
    </div>
  <% } %>
</aside>
