class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          position: sticky;
          top: 0;
          z-index: 50;
        }
        .nav-container {
          background: rgba(17, 24, 39, 0.95);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(55, 65, 81, 0.3);
        }
        .nav-link {
          position: relative;
          transition: color 0.3s ease;
        }
        .nav-link:hover {
          color: #22c55e;
        }
        .nav-link::after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -2px;
          left: 0;
          background: linear-gradient(90deg, #22c55e, #d946ef);
          transition: width 0.3s ease;
        }
        .nav-link:hover::after {
          width: 100%;
        }
        @media (max-width: 768px) {
          .mobile-menu {
            animation: slideDown 0.3s ease-out;
          }
        }
        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      </style>
      <nav class="nav-container">
        <div class="container mx-auto px-6 py-4">
          <div class="flex items-center justify-between">
            <!-- Logo -->
            <a href="/" class="flex items-center space-x-3">
              <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
              <i data-feather="cpu" class="w-5 h-5 text-gray-900"></i>
            </div>
            <span class="text-xl font-bold">PySQL Labs</span>
          </a>

          <!-- Desktop Menu -->
          <div class="hidden md:flex items-center space-x-8">
            <a href="#features" class="nav-link">Features</a>
            <a href="#how-it-works" class="nav-link">How It Works</a>
            <a href="#challenges" class="nav-link">Challenges</a>
            <a href="#dashboard" class="nav-link">Dashboard</a>
            <a href="#login" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
              Log In
            </a>
            <a href="#signup" class="px-4 py-2 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg transition-all">
              Sign Up Free
            </a>
            <button id="dark-mode-toggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
              <i data-feather="sun" class="w-5 h-5"></i>
            </button>
          </div>

          <!-- Mobile Menu Button -->
          <button data-menu-toggle class="md:hidden p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
              <i data-feather="menu" class="w-6 h-6"></i>
          </button>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
          <div class="flex flex-col space-y-4">
            <a href="#features" class="nav-link py-2">Features</a>
            <a href="#how-it-works" class="nav-link py-2">How It Works</a>
            <a href="#challenges" class="nav-link py-2">Challenges</a>
            <a href="#dashboard" class="nav-link py-2">Dashboard</a>
            <div class="pt-4 border-t border-gray-700">
              <a href="#login" class="block py-2">Log In</a>
            <a href="#signup" class="block px-4 py-2 bg-gradient-to-r from-primary to-primary/80 text-gray-900 font-semibold rounded-lg">
                Sign Up Free
              </a>
            </div>
          </div>
        </div>
      </nav>
    `;
    
    // Initialize Feather Icons in shadow DOM
    setTimeout(() => {
      if (typeof feather !== 'undefined') {
        feather.replace();
      }
    }, 100);
  }
}

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