components/header.js

class CustomNavbar extends HTMLElement {
connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background: rgba(30, 30, 30, 0.8);
          backdrop-filter: blur(10px);
        }
        .nav-link:hover {
          color: #a78bfa;
        }
        .logo {
          background: linear-gradient(90deg, #8b5cf6, #6366f1);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      </style>
      <nav class="border-b border-gray-700">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
          <a href="/" class="text-2xl font-bold logo">MelodyMapper</a>
          <div class="flex items-center space-x-6">
            <a href="/" class="nav-link text-white hover:text-purple-300 transition-colors">Home</a>
            <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Features</a>
            <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Pricing</a>
            <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">About</a>
            <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md flex items-center" data-feather="log-in">
              <span class="ml-6">Login</span>
            </button>
</div>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);