﻿<% const anchor = (typeof path !== 'undefined' && path === 'home') ? '' : '/'; %>
<nav id="navbar" class="nav-glass fixed top-0 left-0 right-0 z-50">
  <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">

    <a href="/" class="flex items-center gap-2.5">
      <img src="/analytics-grade.png" alt="" class="h-8 w-8 object-contain shrink-0" width="32" height="32" aria-hidden="true" />
      <div>
        <span class="font-bold text-sm text-navy leading-none block">Analytics Grade</span>
        <span class="text-[9px] text-gray-400 font-medium block">by Analytics Grade</span>
      </div>
    </a>

    <div class="hidden md:flex items-center gap-8">
      <a href="<%= anchor %>#features" class="text-sm font-medium text-gray-500 hover:text-navy transition-colors">Features</a>
      <a href="<%= anchor %>#pricing" class="text-sm font-medium text-gray-500 hover:text-navy transition-colors">Pricing</a>
      <a href="/blog" class="text-sm font-medium transition-colors <%= typeof path !== 'undefined' && (path === 'blog' || path === 'post') ? 'text-navy font-semibold border-b-2 border-purple pb-0.5' : 'text-gray-500 hover:text-navy' %>">Blog</a>
      <a href="/about" class="text-sm font-medium transition-colors <%= typeof path !== 'undefined' && path === 'aboutus' ? 'text-navy font-semibold border-b-2 border-purple pb-0.5' : 'text-gray-500 hover:text-navy' %>">About</a>
      <a href="/contact" class="text-sm font-medium transition-colors <%= typeof path !== 'undefined' && path === 'contactus' ? 'text-navy font-semibold border-b-2 border-purple pb-0.5' : 'text-gray-500 hover:text-navy' %>">Contact</a>
    </div>

    <div class="hidden md:flex items-center gap-3">
      <% if (typeof user !== 'undefined' && user) { %>
        <% if (user.role === 'admin') { %>
          <span class="text-xs font-medium text-gray-400 hidden lg:inline"><%= user.name || user.email %></span>
        <% } %>
        <a href="/auth/logout" class="px-4 py-2 rounded-lg text-sm font-semibold text-navy hover:bg-gray-50 transition-colors">Logout</a>
      <% } else { %>
        <a target="_blank" href="https://app.analyticsgrade.com/auth/login" class="px-4 py-2 rounded-lg text-sm font-semibold text-navy hover:bg-gray-50 transition-colors">Sign In</a>
        <a target="_blank" href="https://app.analyticsgrade.com/auth/sign-up" class="px-4 py-2 rounded-lg text-sm font-semibold text-white"
           style="background:linear-gradient(135deg,#8065f8,#4490d3)">Get Started Free</a>
      <% } %>
    </div>

    <button id="menu-btn" type="button" class="md:hidden p-2 rounded-lg hover:bg-gray-100" aria-label="Toggle menu">
      <svg id="icon-menu" class="w-5 h-5 text-navy" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
      <svg id="icon-close" class="w-5 h-5 text-navy hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>

  <div id="mobile-menu" class="hidden md:hidden border-t border-gray-100 px-6 py-4 bg-white space-y-3">
    <a href="<%= anchor %>#features" class="block text-sm font-medium text-gray-600 hover:text-navy">Features</a>
    <a href="<%= anchor %>#pricing" class="block text-sm font-medium text-gray-600 hover:text-navy">Pricing</a>
    <a href="/blog" class="block text-sm font-medium text-gray-600 hover:text-navy">Blog</a>
    <a href="/about" class="block text-sm font-medium text-gray-600 hover:text-navy">About</a>
    <a href="/contact" class="block text-sm font-medium text-gray-600 hover:text-navy">Contact</a>
    <div class="flex gap-3 pt-2">
     
        <a target="_blank" href="https://app.analyticsgrade.com/auth/login" class="flex-1 py-2 rounded-lg text-sm font-semibold text-center border border-gray-200 text-navy">Sign In</a>
        <a target="_blank" href="https://app.analyticsgrade.com/auth/sign-up" class="flex-1 py-2 rounded-lg text-sm font-semibold text-center text-white"
           style="background:linear-gradient(135deg,#8065f8,#4490d3)">Get Started</a>
     
    </div>
  </div>
</nav>
