Mega Menu Component - Dating/Social

<nav class="relative bg-white shadow-lg dark:bg-gray-900 transition-colors duration-300">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">ConnectMe</a>
    
    <!-- Mobile menu button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop/Tablet Menu -->
    <div class="hidden lg:flex lg:items-center lg:space-x-8" id="desktop-menu">
      <div class="group relative">
        <button class="inline-flex items-center text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 px-3 rounded-md transition-all duration-200 group-hover:bg-purple-50 dark:group-hover:bg-gray-800">
          Discover
          <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-2 w-64 bg-white dark:bg-gray-800 shadow-xl rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:mt-3 transition-all duration-300 transform group-hover:scale-100 scale-95 origin-top z-10 p-4 border border-purple-100 dark:border-gray-700">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:animate-bounce-y" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span>Nearby Profiles</span>
          </a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            <span>Instant Matches</span>
          </a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:scale-110 group-hover:rotate-12 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            <span>Who Likes You</span>
          </a>
        </div>
      </div>

      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Messages</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Events</a>
      <a href="#" class="text-purple-600 dark:text-purple-400 border border-purple-600 dark:border-purple-400 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-400 dark:hover:text-gray-900 font-medium py-2 px-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="relative z-10">Go Premium</span>
        <span class="absolute inset-0 bg-white dark:bg-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-50 group-hover:scale-100 rounded-full"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Menu Content (initially hidden) -->
  <div id="mobile-menu" class="hidden lg:hidden bg-white dark:bg-gray-900 pb-4 border-t border-gray-200 dark:border-gray-700">
    <div class="px-4 pt-2 space-y-2">
      <button id="mobile-discover-button" class="w-full flex items-center justify-between text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800 transition-colors duration-200">
        <span>Discover</span>
        <svg class="w-4 h-4 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
      <div id="mobile-discover-submenu" class="hidden pl-4 space-y-2">
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Nearby Profiles</span>
        </a>
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
          <span>Instant Matches</span>
        </a>
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
          <span>Who Likes You</span>
        </a>
      </div>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Messages</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Events</a>
      <a href="#" class="block text-purple-600 dark:text-purple-400 border border-purple-600 dark:border-purple-400 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-400 dark:hover:text-gray-900 font-medium py-2 px-4 rounded-full text-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 mt-2 block">Go Premium</a>
    </div>
  </div>
</nav>

<style>
  /* Custom animations for microinteractions */
  @keyframes bounce-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .group-hover\:animate-bounce-y:hover {
    animation: bounce-y 0.6s ease-in-out;
  }

  /* Tailwind's animate-pulse is good for pulse */

  /* Dark mode setup (assuming dark class is on body or html) */
  /* This CSS is typically handled by Tailwind's dark: prefix automatically, 
     but is included for clarity on how it would map if custom animations 
     needed dark mode specific styles */
</style>

<script>
  // Simple JavaScript to toggle mobile menu visibility and submenu
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileDiscoverButton = document.getElementById('mobile-discover-button');
    const mobileDiscoverSubmenu = document.getElementById('mobile-discover-submenu');

    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      // Rotate icon for mobile menu button
      const svg = mobileMenuButton.querySelector('svg');
      if (mobileMenu.classList.contains('hidden')) {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
      } else {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
      }
    });

    mobileDiscoverButton.addEventListener('click', () => {
      mobileDiscoverSubmenu.classList.toggle('hidden');
      // Rotate icon for mobile discover button
      mobileDiscoverButton.querySelector('svg').classList.toggle('rotate-180');
    });

    // Close mobile menu when switching to desktop view
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's lg breakpoint
        mobileMenu.classList.add('hidden');
        mobileMenuButton.querySelector('svg').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
      }
    });
  });
</script>