class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .navbar {
          transition: all 0.3s ease;
        }
        .nav-link {
          position: relative;
        }
        .nav-link:after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -2px;
          left: 0;
          background-color: #f59e0b;
          transition: width 0.3s ease;
        }
        .nav-link:hover:after {
          width: 100%;
        }
      </style>
      <nav class="navbar bg-white shadow-sm py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
          <a href="/" class="flex items-center">
            <span class="text-2xl font-bold text-amber-500">LinkHive</span>
          </a>
          
          <div class="hidden md:flex space-x-8">
            <a href="/features" class="nav-link text-gray-700 hover:text-amber-500">Features</a>
            <a href="/pricing" class="nav-link text-gray-700 hover:text-amber-500">Pricing</a>
            <a href="/templates" class="nav-link text-gray-700 hover:text-amber-500">Templates</a>
            <a href="/blog" class="nav-link text-gray-700 hover:text-amber-500">Blog</a>
          </div>
          
          <div class="flex items-center space-x-4">
            <a href="/login" class="text-gray-700 hover:text-amber-500">Log In</a>
            <a href="/signup" class="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-full transition duration-300">
              Sign Up
            </a>
          </div>
          
          <button class="md:hidden focus:outline-none">
            <i data-feather="menu" class="text-gray-700"></i>
          </button>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);