---
import YouTubeBanner from "./YouTubeBanner.astro";
import Icon from "./Icon.astro";
---

<YouTubeBanner />

<div class='bg-slate-900 text-white py-5 sm:py-8'>
    <nav class="container flex items-center justify-between">
      <a class='font-medium text-lg flex items-center text-white' href='/'>
        <Icon icon="logo" />
        <span class='ml-3'>roadmap.sh</span>
      </a>
  
      <!-- Desktop navigation items -->
      <ul class='hidden sm:flex space-x-5'>
        <li><a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a></li>
        <li><a href='/guides' class='text-gray-400 hover:text-white'>Guides</a></li>
        <li><a href='/videos' class='text-gray-400 hover:text-white'>Videos</a></li>
        <li>
          <a class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white' href='/signup'>
            Subscribe
          </a>
        </li>
      </ul>
  
      <!-- Mobile Navigation Button -->
      <button id='show-mobile-navigation' class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer' aria-label="Menu">
        <Icon icon="hamburger" />
      </button>
  
      <!-- Mobile Navigation Items -->
      <div id='mobile-navigation' class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 flex items-center hidden'>
        <button id='close-mobile-navigation' class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6 cursor-pointer'>
            <Icon icon="close" />
        </button>
        <ul class='flex flex-col gap-2 md:gap-3 items-center w-full'>
          <li><a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'>Roadmaps</a></li>
          <li><a href='/guides' class='text-xl md:text-lg hover:text-blue-300'>Guides</a></li>
          <li><a href='/videos' class='text-xl md:text-lg hover:text-blue-300'>Videos</a></li>
          <li><a href='/signup' class='text-xl md:text-lg text-red-300 hover:text-red-400'>Subscribe</a></li>
        </ul>
      </div>
    </nav>
  </div>