<nav class="bg-white border-b border-zinc-200 mb-6">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center gap-1 py-3">
      <a href="dashboard.html" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-semibold text-zinc-900 hover:bg-zinc-50 transition-colors shrink-0">
        <i data-lucide="hexagon" class="w-4 h-4"></i>
        SoY
      </a>
      <span class="w-px h-5 bg-zinc-200 mx-1"></span>

      <a href="dashboard.html" class="nav-item {{ 'active' if active_page == 'dashboard' }}">
        <i data-lucide="layout-dashboard" class="w-3.5 h-3.5"></i>
        Dashboard
      </a>

      {% if 'crm' in modules %}
      <div class="nav-group {{ 'active' if active_group == 'people' }}" onclick="this.classList.toggle('open')">
        <div class="nav-group-label">
          <span>People</span>
          <i data-lucide="chevron-down" class="w-3 h-3 nav-chevron"></i>
        </div>
        <div class="nav-dropdown">
          <a href="contacts.html" class="nav-dropdown-item {{ 'active' if active_page == 'contacts' }}">
            <i data-lucide="users" class="w-3.5 h-3.5"></i>
            Contacts
            {% if nav_counts.contacts %}<span class="nav-badge">{{ nav_counts.contacts }}</span>{% endif %}
          </a>
          <a href="network-map.html" class="nav-dropdown-item {{ 'active' if active_page == 'network' }}">
            <i data-lucide="share-2" class="w-3.5 h-3.5"></i>
            Network
          </a>
        </div>
      </div>
      {% endif %}

      {% if 'gmail' in modules or 'calendar' in modules %}
      <div class="nav-group {{ 'active' if active_group == 'comms' }}" onclick="this.classList.toggle('open')">
        <div class="nav-group-label">
          <span>Comms</span>
          <i data-lucide="chevron-down" class="w-3 h-3 nav-chevron"></i>
        </div>
        <div class="nav-dropdown">
          {% if 'gmail' in modules %}
          <a href="email-hub.html" class="nav-dropdown-item {{ 'active' if active_page == 'email' }}">
            <i data-lucide="mail" class="w-3.5 h-3.5"></i>
            Email
            {% if nav_counts.emails %}<span class="nav-badge">{{ nav_counts.emails }}</span>{% endif %}
          </a>
          {% endif %}
          {% if 'calendar' in modules %}
          <a href="week-view.html" class="nav-dropdown-item {{ 'active' if active_page == 'calendar' }}">
            <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
            Calendar
            {% if nav_counts.calendar %}<span class="nav-badge">{{ nav_counts.calendar }}</span>{% endif %}
          </a>
          {% endif %}
        </div>
      </div>
      {% endif %}

      {% set intel_modules = [] %}
      {% if 'conversation-intelligence' in modules %}{% set _ = intel_modules.append('conversations') %}{% endif %}
      {% if 'decision-log' in modules %}{% set _ = intel_modules.append('decisions') %}{% endif %}
      {% if 'journal' in modules %}{% set _ = intel_modules.append('journal') %}{% endif %}
      {% if 'notes' in modules %}{% set _ = intel_modules.append('notes') %}{% endif %}

      {% if intel_modules %}
      <div class="nav-group {{ 'active' if active_group == 'intelligence' }}" onclick="this.classList.toggle('open')">
        <div class="nav-group-label">
          <span>Intelligence</span>
          <i data-lucide="chevron-down" class="w-3 h-3 nav-chevron"></i>
        </div>
        <div class="nav-dropdown">
          {% if 'conversation-intelligence' in modules %}
          <a href="conversations.html" class="nav-dropdown-item {{ 'active' if active_page == 'conversations' }}">
            <i data-lucide="message-square" class="w-3.5 h-3.5"></i>
            Conversations
          </a>
          {% endif %}
          {% if 'decision-log' in modules %}
          <a href="decision-journal.html" class="nav-dropdown-item {{ 'active' if active_page == 'decisions' }}">
            <i data-lucide="git-branch" class="w-3.5 h-3.5"></i>
            Decisions
          </a>
          {% endif %}
          {% if 'journal' in modules %}
          <a href="journal.html" class="nav-dropdown-item {{ 'active' if active_page == 'journal' }}">
            <i data-lucide="book-open" class="w-3.5 h-3.5"></i>
            Journal
          </a>
          {% endif %}
          {% if 'notes' in modules %}
          <a href="notes.html" class="nav-dropdown-item {{ 'active' if active_page == 'notes' }}">
            <i data-lucide="sticky-note" class="w-3.5 h-3.5"></i>
            Notes
          </a>
          {% endif %}
        </div>
      </div>
      {% endif %}
    </div>

    {% if breadcrumbs %}
    <div class="flex items-center justify-between pb-3 -mt-1">
      <div class="flex items-center gap-1.5 text-sm">
        {% for crumb in breadcrumbs %}
          {% if not loop.last %}
            <a href="{{ crumb.href }}" class="text-zinc-400 hover:text-zinc-600">{{ crumb.label }}</a>
            <span class="text-zinc-300">›</span>
          {% else %}
            <span class="text-zinc-700 font-medium">{{ crumb.label }}</span>
          {% endif %}
        {% endfor %}
      </div>
      {% if sub_nav %}
      <div class="flex items-center gap-1.5">
        {% for item in sub_nav %}
        <a href="{{ item.href }}" class="px-2 py-0.5 rounded text-xs bg-zinc-100 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-700 transition-colors">{{ item.label }}</a>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endif %}
  </div>
</nav>
