class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background-color: rgba(17, 24, 39, 0.9);
          backdrop-filter: blur(8px);
          position: sticky;
          top: 0;
          z-index: 50;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .nav-container {
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 1rem;
        }
        
        .nav-link {
          position: relative;
          color: rgba(209, 213, 219, 0.9);
          transition: color 0.2s ease;
        }
        
        .nav-link:hover {
          color: white;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background-color: #3b82f6;
          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;
        }
      </style>
      <nav class="text-white py-4">
        <div class="nav-container flex items-center justify-between">
          <div class="flex items-center space-x-2">
            <i data-feather="mountain" class="text-blue-400"></i>
            <span class="text-xl font-bold">TerrainGen Explorer</span>
          </div>
          
          <div class="hidden md:flex items-center space-x-6">
            <a href="#" class="nav-link font-medium">Home</a>
            <a href="#" class="nav-link font-medium">Algorithms</a>
            <a href="#" class="nav-link font-medium">Gallery</a>
            <a href="#" class="nav-link font-medium">About</a>
          </div>
          
          <button id="mobile-menu-button" class="md:hidden focus:outline-none">
            <i data-feather="menu" class="w-6 h-6"></i>
          </button>
        </div>
        
        <div id="mobile-menu" class="mobile-menu md:hidden bg-gray-800">
          <div class="px-4 py-2 space-y-3">
            <a href="#" class="block nav-link py-2">Home</a>
            <a href="#" class="block nav-link py-2">Algorithms</a>
            <a href="#" class="block nav-link py-2">Gallery</a>
            <a href="#" class="block nav-link py-2">About</a>
          </div>
        </div>
      </nav>
    `;
    
    // Initialize mobile menu toggle
    this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
      const menu = this.shadowRoot.getElementById('mobile-menu');
      menu.classList.toggle('open');
      
      // Change icon
      const icon = this.shadowRoot.querySelector('#mobile-menu-button i');
      if (menu.classList.contains('open')) {
        icon.setAttribute('data-feather', 'x');
      } else {
        icon.setAttribute('data-feather', 'menu');
      }
      feather.replace();
    });
  }
}

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