<nav role="navigation" aria-label="Main navigation"
     class="flex items-center justify-between px-4 py-3"
     style="background: var(--bg-surface); border-bottom: 1px solid var(--border-default);">

  <div class="flex items-center gap-6">
    <a href="/dashboard/" class="font-semibold text-lg" style="color: var(--text-primary); text-decoration: none;">
      ComplyForm
    </a>

    <div class="flex items-center gap-4">
      <a href="/dashboard/"
         {% if active_page == 'projects' %}aria-current="page"{% endif %}
         class="text-sm px-2 py-1 rounded"
         style="color: {% if active_page == 'projects' %}var(--accent){% else %}var(--text-secondary){% endif %}; text-decoration: none;">
        Projects
      </a>
      <a href="/dashboard/settings"
         {% if active_page == 'settings' %}aria-current="page"{% endif %}
         class="text-sm px-2 py-1 rounded"
         style="color: {% if active_page == 'settings' %}var(--accent){% else %}var(--text-secondary){% endif %}; text-decoration: none;">
        Settings
      </a>
    </div>
  </div>

  <div class="flex items-center gap-4">
    <span class="text-xs" style="color: var(--text-muted)">&#x2318;K</span>

    <span class="text-xs px-2 py-1 rounded"
          style="background: var(--bg-surface-hover); color: var(--text-secondary);">
      {{ tier }}
    </span>

    <!-- Theme toggle -->
    <div x-data="{ dark: document.documentElement.dataset.theme === 'dark' }">
      <button @click="dark = !dark;
                       document.documentElement.dataset.theme = dark ? 'dark' : 'light';"
              hx-put="/dashboard/partials/theme-preference"
              :hx-vals="dark ? '{\"theme\": \"dark\"}' : '{\"theme\": \"light\"}'"
              hx-swap="none"
              class="p-1 rounded"
              style="color: var(--text-secondary);"
              aria-label="Toggle theme">
        <span x-show="!dark" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
          </svg>
        </span>
        <span x-show="dark" x-cloak aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        </span>
      </button>
    </div>

    <!-- User menu -->
    <div x-data="{ open: false }" class="relative">
      <button @click="open = !open"
              @keydown.escape.window="open = false"
              :aria-expanded="open"
              aria-haspopup="true"
              class="text-sm px-2 py-1 rounded"
              style="color: var(--text-secondary);">
        {{ customer_email }}
      </button>
      <div x-show="open"
           x-cloak
           @click.outside="open = false"
           class="absolute right-0 mt-2 w-48 rounded shadow-lg z-50"
           style="background: var(--bg-surface); border: 1px solid var(--border-default);">
        <a href="/dashboard/settings"
           class="block px-4 py-2 text-sm"
           style="color: var(--text-primary); text-decoration: none;">Settings</a>
        <a href="https://docs.complyform.dev"
           class="block px-4 py-2 text-sm"
           style="color: var(--text-primary); text-decoration: none;"
           target="_blank" rel="noopener noreferrer">Docs</a>
        <a href="https://status.complyform.dev"
           class="block px-4 py-2 text-sm"
           style="color: var(--text-primary); text-decoration: none;"
           target="_blank" rel="noopener noreferrer">Status</a>
        <div style="border-top: 1px solid var(--border-default);">
          <form method="POST" action="/auth/logout">
            <input type="hidden" name="_csrf" value="{{ csrf_token }}">
            <button type="submit"
                    class="block w-full text-left px-4 py-2 text-sm"
                    style="color: var(--text-primary); background: none; border: none; cursor: pointer;">
              Sign out
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</nav>
