class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .navbar {
          background-color: rgba(17, 24, 39, 0.8);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
        }
        
        .nav-link {
          position: relative;
        }
        
        .nav-link:after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: 0;
          left: 0;
          background-color: #6366f1;
          transition: width 0.3s ease;
        }
        
        .nav-link:hover:after {
          width: 100%;
        }
        
        .mobile-menu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
        }
        
        .mobile-menu.open {
          max-height: 500px;
        }
        
        @media (min-width: 1024px) {
          .mobile-menu {
            max-height: none !important;
          }
        }
      </style>
      
      <nav class="navbar fixed w-full z-50 border-b border-gray-800">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center py-4">
            <div class="flex items-center">
              <a href="/" class="flex items-center">
                <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center mr-3">
                  <i data-feather="code" class="text-white"></i>
                </div>
                <span class="text-xl font-bold">CodeDex</span>
              </a>
            </div>
            
            <div class="hidden lg:flex items-center space-x-8">
              <div class="flex space-x-6">
                <a href="/challenges" class="nav-link py-2">Challenges</a>
                <a href="/projects" class="nav-link py-2">Projects</a>
                <a href="/learn" class="nav-link py-2">Learn</a>
                <a href="/community" class="nav-link py-2">Community</a>
                <a href="/blog" class="nav-link py-2">Blog</a>
</div>
              
              <div class="flex items-center ml-8 space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition">
                  <i data-feather="moon" class="hidden dark:block"></i>
                  <i data-feather="sun" class="dark:hidden"></i>
                </button>
                <a href="/new-project" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition">New Project</a>
</div>
            </div>
            
            <button id="mobile-menu-button" class="lg:hidden p-2 rounded-md hover:bg-gray-700 transition">
              <i data-feather="menu"></i>
            </button>
          </div>
          
          <div id="mobile-menu" class="mobile-menu lg:hidden">
            <div class="py-4 space-y-4">
              <a href="/python" class="block py-2 px-4 hover:bg-gray-800 rounded transition">Python</a>
              <a href="/javascript" class="block py-2 px-4 hover:bg-gray-800 rounded transition">JavaScript</a>
              <a href="/web-dev" class="block py-2 px-4 hover:bg-gray-800 rounded transition">Web Dev</a>
              <a href="/challenges" class="block py-2 px-4 hover:bg-gray-800 rounded transition">Challenges</a>
              <a href="/projects" class="block py-2 px-4 hover:bg-gray-800 rounded transition">Projects</a>
              <a href="/community" class="block py-2 px-4 hover:bg-gray-800 rounded transition">Community</a>
              <div class="pt-2 border-t border-gray-800">
                <a href="/builds" class="block py-2 px-4 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium text-center transition">Build</a>
              </div>
            </div>
          </div>
        </div>
      </nav>
      
      <script>
        feather.replace();
        
        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
          mobileMenu.classList.toggle('open');
          const icon = mobileMenuButton.querySelector('i');
          if (mobileMenu.classList.contains('open')) {
            icon.setAttribute('data-feather', 'x');
          } else {
            icon.setAttribute('data-feather', 'menu');
          }
          feather.replace();
        });
      </script>
    `;
  }
}

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