---
import { Menu } from 'lucide-react';
import Icon from '../AstroIcon.astro';
import { NavigationDropdown } from '../NavigationDropdown';
import { AccountDropdown } from './AccountDropdown';
---

<div class='bg-slate-900 py-5 text-white sm:py-8'>
  <nav class='container flex items-center justify-between'>
    <div class='flex items-center gap-5'>
      <a
        class='flex items-center text-lg font-medium text-white'
        href='/'
        aria-label='roadmap.sh'
      >
        <Icon icon='logo' />
      </a>

      <a
          href='/teams'
          class='group inline sm:hidden relative !mr-2 text-blue-300 hover:text-white'
      >
        Teams

        <span class='absolute -right-[11px] top-0'>
            <span class='relative flex h-2 w-2'>
              <span
                  class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
              ></span>
              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
              ></span>
            </span>
          </span>
      </a>

      <!-- Desktop navigation items -->
      <div class='hidden space-x-5 sm:flex sm:items-center'>
        <NavigationDropdown client:load />
        <a href='/get-started' class='text-gray-400 hover:text-white'>
          Start Here
        </a>
        <a 
          href='/teams'
          class='group relative !mr-2 text-blue-300 hover:text-white'
        >
          Teams
          <span class='absolute -right-[11px] top-0'>
            <span class='relative flex h-2 w-2'>
              <span
                class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
              ></span>
              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
              ></span>
            </span>
          </span>
        </a>
        <a
          href='/ai' class='text-gray-400 hover:text-white'> AI Roadmaps</a>
        <button
          data-command-menu
          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 md:flex'
        >
          <Icon icon='search' class='h-3 w-3' />
          <span class='ml-2'>Search</span>
        </button>
      </div>
    </div>

    <ul class='hidden h-8 w-[172px] items-center justify-end gap-5 sm:flex'>
      <li data-guest-required class='hidden'>
        <a href='/login' class='text-gray-400 hover:text-white'>Login</a>
      </li>
      <li>
        <AccountDropdown client:only='react' />

        <a
          data-guest-required
          class='flex hidden h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
          href='/signup'
        >
          <span>Sign Up</span>
        </a>
      </li>
    </ul>

    <!-- Mobile Navigation Button -->
    <button
      class='block cursor-pointer text-gray-400 hover:text-gray-50 sm:hidden'
      aria-label='Menu'
      data-show-mobile-nav
    >
      <Icon icon='hamburger' />
    </button>

    <!-- Mobile Navigation Items -->
    <div
      class='fixed bottom-0 left-0 right-0 top-0 z-40 flex hidden items-center bg-slate-900'
      data-mobile-nav
    >
      <button
        data-close-mobile-nav
        class='absolute right-6 top-6 block cursor-pointer text-gray-400 hover:text-gray-50'
        aria-label='Close Menu'
      >
        <Icon icon='close' />
      </button>
      <ul class='flex w-full flex-col items-center gap-2 md:gap-3'>
        <li>
          <a href='/roadmaps' class='text-xl hover:text-blue-300 md:text-lg'>
            Roadmaps
          </a>
        </li>
        <li>
          <a
            href='/best-practices'
            class='text-xl hover:text-blue-300 md:text-lg'
          >
            Best Practices
          </a>
        </li>
        <li>
          <a href='/guides' class='text-xl hover:text-blue-300 md:text-lg'>
            Guides
          </a>
        </li>
        <li>
          <a href='/videos' class='text-xl hover:text-blue-300 md:text-lg'>
            Videos
          </a>
        </li>

        <!-- Links for logged in users -->
        <li data-auth-required class='hidden'>
          <a href='/account' class='text-xl hover:text-blue-300 md:text-lg'>
            Account
          </a>
        </li>
        <li data-auth-required class='hidden'>
          <a href='/team' class='text-xl hover:text-blue-300 md:text-lg'>
            Teams
          </a>
        </li>
        <li data-auth-required class='hidden'>
          <button
            data-logout-button
            class='text-xl text-red-300 hover:text-red-400 md:text-lg'
          >
            Logout
          </button>
        </li>
        <li>
          <a
            data-guest-required
            href='/login'
            class='hidden text-xl text-white md:text-lg'
          >
            Login
          </a>
        </li>
        <li>
          <a
            data-guest-required
            href='/signup'
            class='hidden text-xl text-green-300 hover:text-green-400 md:text-lg'
          >
            Sign Up
          </a>
        </li>
      </ul>
    </div>
  </nav>
</div>

<script src='./navigation.ts'></script>