<!-- SideNavBar -->
<aside class="flex flex-col h-screen w-64 fixed left-0 top-0 bg-slate-50 z-40 border-r border-outline-variant/10 py-6 px-4">
  <!-- Brand -->
  <div class="flex items-center gap-3 px-2 mb-8">
    <div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-white">
      <span class="material-symbols-outlined" style="font-variation-settings:'FILL' 1;">storefront</span>
    </div>
    <div>
      <h2 class="text-sm font-bold text-on-surface leading-tight font-headline">
        <%= merchant && merchant.store_name ? merchant.store_name : 'My Store' %>
      </h2>
      <p class="text-xs text-on-surface-variant opacity-70">
        <%= merchant && merchant.plan_name ? merchant.plan_name + ' Plan' : 'Basic Plan' %>
      </p>
    </div>
  </div>

  <!-- Primary Nav -->
  <nav class="flex-1 space-y-1">
    <a href="/dashboard" class="flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 hover:translate-x-1
      <%= currentPath === '/dashboard' ? 'bg-white text-emerald-800 shadow-sm' : 'text-slate-500 hover:text-emerald-700' %>">
      <span class="material-symbols-outlined" style="<%= currentPath === '/dashboard' ? 'font-variation-settings:\'FILL\' 1;' : '' %>">home</span>
      <span>Home</span>
    </a>
    <a href="/orders" class="flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 hover:translate-x-1
      <%= currentPath.startsWith('/orders') ? 'bg-white text-emerald-800 shadow-sm' : 'text-slate-500 hover:text-emerald-700' %>">
      <span class="material-symbols-outlined" style="<%= currentPath.startsWith('/orders') ? 'font-variation-settings:\'FILL\' 1;' : '' %>">shopping_cart</span>
      <span>Orders</span>
    </a>
    <a href="/products" class="flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 hover:translate-x-1
      <%= currentPath.startsWith('/products') ? 'bg-white text-emerald-800 shadow-sm' : 'text-slate-500 hover:text-emerald-700' %>">
      <span class="material-symbols-outlined" style="<%= currentPath.startsWith('/products') ? 'font-variation-settings:\'FILL\' 1;' : '' %>">inventory_2</span>
      <span>Products</span>
    </a>
    <a href="/analytics" class="flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 hover:translate-x-1
      <%= currentPath.startsWith('/analytics') ? 'bg-white text-emerald-800 shadow-sm' : 'text-slate-500 hover:text-emerald-700' %>">
      <span class="material-symbols-outlined" style="<%= currentPath.startsWith('/analytics') ? 'font-variation-settings:\'FILL\' 1;' : '' %>">leaderboard</span>
      <span>Analytics</span>
    </a>
    <a href="/marketing" class="flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 hover:translate-x-1
      <%= currentPath.startsWith('/marketing') ? 'bg-white text-emerald-800 shadow-sm' : 'text-slate-500 hover:text-emerald-700' %>">
      <span class="material-symbols-outlined" style="<%= currentPath.startsWith('/marketing') ? 'font-variation-settings:\'FILL\' 1;' : '' %>">campaign</span>
      <span>Marketing</span>
    </a>
    <a href="/storefront" class="flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 hover:translate-x-1
      <%= currentPath.startsWith('/storefront') ? 'bg-white text-emerald-800 shadow-sm' : 'text-slate-500 hover:text-emerald-700' %>">
      <span class="material-symbols-outlined" style="<%= currentPath.startsWith('/storefront') ? 'font-variation-settings:\'FILL\' 1;' : '' %>">trolley</span>
      <span>Storefront</span>
    </a>
  </nav>

  <!-- Footer Nav -->
  <div class="pt-4 mt-4 border-t border-slate-200 space-y-3">
    <a href="/products/new" class="w-full flex items-center justify-center gap-2 bg-primary text-on-primary py-2.5 rounded-xl font-bold text-sm shadow-sm hover:shadow-md transition-all active:scale-95">
      <span class="material-symbols-outlined text-sm">add</span>
      Add Product
    </a>
    <div class="space-y-1">
      <a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-emerald-700 hover:translate-x-1 transition-all text-sm">
        <span class="material-symbols-outlined">settings</span>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-emerald-700 hover:translate-x-1 transition-all text-sm">
        <span class="material-symbols-outlined">help</span>
        <span>Support</span>
      </a>
      <form action="/logout" method="POST">
        <button type="submit" class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-red-600 hover:translate-x-1 transition-all text-sm w-full text-left">
          <span class="material-symbols-outlined">logout</span>
          <span>Logout</span>
        </button>
      </form>
    </div>
  </div>
</aside>
