class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .navbar {
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          background: rgba(0,0,0,0.8);
          border-bottom: 0.5px solid rgba(255,255,255,0.1);
        }
        .nav-link {
          position: relative;
          transition: opacity 0.3s ease;
        }
        .nav-link:hover {
          opacity: 0.8;
        }
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0%;
          height: 1px;
          background: white;
          transition: width 0.3s ease;
        }
        .nav-link:hover::after {
          width: 100%;
        }
        @media (max-width: 768px) {
          .menu-items {
            display: none;
          }
        }
      </style>
      <nav class="navbar fixed w-full z-50 py-5">
        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <a href="#" class="text-3xl font-light tracking-tight flex items-center">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2">
              <path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="white"/>
              <path d="M16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24Z" fill="#000000"/>
            </svg>
            Kai
          </a>
          <div class="menu-items flex items-center space-x-8">
            <a href="#" class="nav-link text-white/80 hover:text-white">Overview</a>
            <a href="#features" class="nav-link text-white/80 hover:text-white">Features</a>
            <a href="#specs" class="nav-link text-white/80 hover:text-white">Specs</a>
            <a href="about.html" class="nav-link text-white/80 hover:text-white">About</a>
            <a href="contact.html" class="nav-link text-white/80 hover:text-white">Contact</a>
</div>
          <a href="#" class="px-6 py-2 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-90 transition-all shadow-lg hover:shadow-cyan-500/30">
            JOIN THE FUTURE
          </a>
</div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);