class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .nav-link {
          position: relative;
        }
        .nav-link::after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -2px;
          left: 0;
          background-color: #3b82f6;
          transition: width 0.3s ease;
        }
        .nav-link:hover::after {
          width: 100%;
        }
      </style>
      <nav class="bg-white shadow-lg fixed w-full z-10">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center py-4">
            <a href="#" class="flex items-center space-x-2">
              <i data-feather="anchor" class="text-blue-600"></i>
              <span class="text-xl font-bold text-gray-800">NavyDreams</span>
            </a>
            
            <!-- Mobile menu button -->
            <div class="md:hidden">
              <button id="mobile-menu-button" class="text-gray-800 focus:outline-none">
                <i data-feather="menu"></i>
              </button>
            </div>
            
            <!-- Desktop Menu -->
            <div class="hidden md:flex space-x-8">
              <a href="#" class="nav-link text-gray-800 font-medium">Home</a>
              <a href="#path" class="nav-link text-gray-600 hover:text-gray-800">Path</a>
              <a href="#resources" class="nav-link text-gray-600 hover:text-gray-800">Resources</a>
              <a href="#contact" class="nav-link text-gray-600 hover:text-gray-800">Contact</a>
              <a href="#calculator" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">Age Calculator</a>
              <a href="#csis" class="nav-link text-gray-600 hover:text-gray-800">CSIS Info</a>
</div>
          </div>
          
          <!-- Mobile Menu -->
          <div id="mobile-menu" class="hidden md:hidden pb-4">
            <a href="#" class="block py-2 text-gray-800 font-medium">Home</a>
            <a href="#path" class="block py-2 text-gray-600 hover:text-gray-800">Path</a>
            <a href="#resources" class="block py-2 text-gray-600 hover:text-gray-800">Resources</a>
            <a href="#contact" class="block py-2 text-gray-600 hover:text-gray-800">Contact</a>
            <a href="#calculator" class="block mt-2 bg-blue-600 text-white px-4 py-2 rounded-md text-center hover:bg-blue-700 transition-colors">Age Calculator</a>
            <a href="#csis" class="block py-2 text-gray-600 hover:text-gray-800">CSIS Info</a>
</div>
        </div>
      </nav>
    `;

    // Add mobile menu toggle functionality
    const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
    
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      feather.replace();
    });

    // Initialize feather icons
    feather.replace();
  }
}

customElements.define('custom-navbar', CustomNavbar);