components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          font-family: 'Poppins', sans-serif;
        }
        .nav-link {
          position: relative;
        }
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 2px;
          background: linear-gradient(90deg, #bc13fe, #ff44cc);
          transition: width 0.3s ease;
        }
        .nav-link:hover::after {
          width: 100%;
        }
      </style>
      <header class="border-b border-gray-800">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
          <a href="/" class="text-2xl font-bold bg-gradient-to-r from-neonpurple via-neonblue to-neonpink bg-clip-text text-transparent">NEON✧DREAM</a>
          <div class="hidden md:flex space-x-8">
            <a href="#" class="nav-link text-white hover:text-neonpink">Home</a>
            <a href="#" class="nav-link text-white hover:text-neonpurple">Explore</a>
            <a href="#" class="nav-link text-white hover:text-neonblue">Community</a>
            <a href="#" class="nav-link text-white hover:text-neonpink">Events</a>
          </div>
          <div class="flex items-center space-x-4">
            <a href="#" class="p-2 rounded-full hover:bg-gray-800">
              <i data-feather="search" class="w-5 h-5"></i>
            </a>
            <a href="#" class="p-2 rounded-full hover:bg-gray-800">
              <i data-feather="user" class="w-5 h-5"></i>
            </a>
            <button class="md:hidden p-2 rounded-full hover:bg-gray-800">
              <i data-feather="menu" class="w-5 h-5"></i>
            </button>
          </div>
        </nav>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);