{{-- <nav id="main-nav" class=" bg-white shadow-md z-50 fixed top-0 left-0 w-full ">

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">

      <div class="flex items-center space-x-8">
        <div class="text-2xl font-bold text-primary">
            <a href="{{ route('home') }}">
            <h1>ITTE ACADEMY</h1>
            </a>
        </div>


        <div class="hidden md:flex items-center space-x-6">

          <button id="courses-btn"
                  class="text-gray-700 hover:text-primary font-medium flex items-center gap-1"
                  aria-expanded="false" aria-controls="mega-menu">
            Certificats
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>

          <a href="{{ route('entreprise.index') }}" class="text-gray-700 hover:text-primary font-medium">Enterprise</a>
                    <a href="{{ route('particuliers.index') }}" class="text-gray-700 hover:text-primary font-medium">Particuliers</a>
           <a href="{{ route('about.index') }}" class="text-gray-700 hover:text-primary font-medium">Le cabinet</a>

        </div>
      </div>


      <div class="hidden md:block">
        <a href="{{ route('contacts.index') }}" class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition">Contact</a>
      </div>


      <div class="md:hidden">
        <button id="menu-toggle" class="text-gray-700 focus:outline-none">
          <svg class="w-6 h-6" 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>
        </button>
      </div>
    </div>
  </div>


  <div id="mega-menu"
       class="absolute left-0 top-full w-screen bg-white border-t shadow-lg z-40 hidden">
    <div class="max-w-7xl mx-auto px-8 py-8 grid grid-cols-4 gap-8">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-3">Web Development</h3>
        <ul class="space-y-2 text-gray-600">
          <li><a href="#" class="hover:text-primary">HTML & CSS</a></li>
          <li><a href="#" class="hover:text-primary">JavaScript</a></li>
          <li><a href="#" class="hover:text-primary">React</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-3">Data Science</h3>
        <ul class="space-y-2 text-gray-600">
          <li><a href="#" class="hover:text-primary">Python</a></li>
          <li><a href="#" class="hover:text-primary">Machine Learning</a></li>
          <li><a href="#" class="hover:text-primary">AI Fundamentals</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-3">Design</h3>
        <ul class="space-y-2 text-gray-600">
          <li><a href="#" class="hover:text-primary">UI/UX</a></li>
          <li><a href="#" class="hover:text-primary">Figma</a></li>
          <li><a href="#" class="hover:text-primary">Illustrator</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-3">Business</h3>
        <ul class="space-y-2 text-gray-600">
          <li><a href="#" class="hover:text-primary">Marketing</a></li>
          <li><a href="#" class="hover:text-primary">Entrepreneurship</a></li>
          <li><a href="#" class="hover:text-primary">Finance</a></li>
        </ul>
      </div>
    </div>
  </div>


  <div id="mobile-menu" class="md:hidden hidden border-t bg-white">
    <a href="#" class="block px-4 py-3 text-gray-700 hover:bg-gray-50">Home</a>
     <a href="{{ route('entreprise.index') }}" class="text-gray-700 hover:text-primary font-medium">Enterprise</a>
                    <a href="{{ route('particuliers.index') }}" class="text-gray-700 hover:text-primary font-medium">Particuliers</a>
           <a href="{{ route('about.index') }}" class="text-gray-700 hover:text-primary font-medium">Le cabinet</a>

    <!-- Courses accordion -->
    <button id="mobile-courses-btn"
            class="w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-50 flex justify-between items-center">
      <span>Courses</span>
      <svg class="w-5 h-5 transition-transform" id="mobile-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
      </svg>
    </button>
    <div id="mobile-courses-panel" class="hidden px-6 pb-4 bg-gray-50 border-l">
      <p class="text-sm text-gray-500 mb-2 font-semibold mt-2">Web Development</p>
      <a href="#" class="block text-gray-700 hover:text-primary">HTML & CSS</a>
      <a href="#" class="block text-gray-700 hover:text-primary">JavaScript</a>
      <a href="#" class="block text-gray-700 hover:text-primary">React</a>

      <p class="text-sm text-gray-500 mb-2 font-semibold mt-4">Data Science</p>
      <a href="#" class="block text-gray-700 hover:text-primary">Python</a>
      <a href="#" class="block text-gray-700 hover:text-primary">Machine Learning</a>

      <p class="text-sm text-gray-500 mb-2 font-semibold mt-4">Design</p>
      <a href="#" class="block text-gray-700 hover:text-primary">UI/UX</a>
      <a href="#" class="block text-gray-700 hover:text-primary">Figma</a>
    </div>

    <a href="#" class="block px-4 py-3 text-gray-700 hover:bg-gray-50">Enterprise</a>
    <a href="#" class="block px-4 py-3 text-primary font-semibold hover:bg-blue-50">Contact</a>
  </div>
</nav> --}}


<nav class="bg-white shadow-sm fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="/">
                    <div class="text-2xl font-bold text-primary font-title">ITTE ACADEMY</div>
                    </a>
                </div>
                <div class="hidden md:flex space-x-8">

                    <a href="{{ route('certificats.index') }}" class="text-gray-700 hover:text-primary hover:font-semibold font-title">Certifications</a>
                    <a href="{{ route('programmes.index') }}" class="text-gray-700 hover:text-primary hover:font-semibold font-title">Programmes</a>

                    <a href="{{ route('about.index') }}" class="text-gray-700 hover:text-primary transition hover:font-semibold font-title">Le cabinet</a>
                    <a href="{{ route('contacts.index') }}" class="text-gray-700 hover:text-primary transition hover:font-semibold font-title">Contact</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-700 hover:text-primary transition">Connexion</a>
                    <a href="#" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition">Commencer</a>
                </div>
            </div>
        </div>
    </nav>