class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .navbar {
          background: rgba(15, 23, 42, 0.8);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .nav-link {
          position: relative;
          transition: all 0.3s ease;
        }
        
        .nav-link:hover {
          color: #8B5CF6;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background: linear-gradient(90deg, #8B5CF6, #EC4899);
          transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
          width: 100%;
        }
        
        .mobile-menu {
          transition: all 0.3s ease;
        }
      </style>
      
      <nav class="navbar fixed w-full z-50 py-4 px-6">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
          <a href="/" class="flex items-center space-x-2">
            <i data-feather="code" class="text-purple-500"></i>
            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">CodeCanvas</span>
          </a>
          
          <div class="hidden md:flex items-center space-x-8">
            <a href="/features" class="nav-link">Features</a>
            <a href="/docs" class="nav-link">Documentation</a>
            <a href="/examples" class="nav-link">Examples</a>
            <a href="/pricing" class="nav-link">Pricing</a>
          </div>
          
          <div class="hidden md:flex items-center space-x-4">
            <a href="/login" class="px-4 py-2 rounded-lg">Sign In</a>
            <a href="/signup" class="btn-primary">Get Started</a>
          </div>
          
          <button id="mobile-menu-button" class="md:hidden p-2 rounded-lg hover:bg-gray-800">
            <i data-feather="menu"></i>
          </button>
        </div>
        
        <!-- Mobile menu -->
        <div id="mobile-menu" class="mobile-menu hidden md:hidden mt-4 py-4 border-t border-gray-800">
          <div class="flex flex-col space-y-4">
            <a href="/features" class="nav-link">Features</a>
            <a href="/docs" class="nav-link">Documentation</a>
            <a href="/examples" class="nav-link">Examples</a>
            <a href="/pricing" class="nav-link">Pricing</a>
            <div class="pt-4 border-t border-gray-800 mt-4 flex flex-col space-y-3">
              <a href="/login" class="w-full text-center py-2 rounded-lg border border-gray-700">Sign In</a>
              <a href="/signup" class="w-full text-center btn-primary">Get Started</a>
            </div>
          </div>
        </div>
      </nav>
    `;
    
    // Initialize feather icons
    if (window.feather) {
      window.feather.replace({ class: 'inline-block' });
    }
    
    // Mobile menu toggle
    const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
    
    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
      });
    }
  }
}

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