components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background: linear-gradient(90deg, rgba(14,165,233,0.1) 0%, rgba(139,92,246,0.1) 100%);
          backdrop-filter: blur(10px);
        }
        .nav-link {
          transition: all 0.3s ease;
        }
        .nav-link:hover {
          color: #0ea5e9;
          transform: translateY(-2px);
        }
      </style>
      <header class="sticky top-0 z-50">
        <nav class="border-b border-gray-200">
          <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
              <a href="/" class="flex items-center space-x-2">
                <i data-feather="box" class="text-primary-600 w-6 h-6"></i>
                <span class="text-xl font-bold text-primary-800">PixelPalette</span>
              </a>
              
              <div class="hidden md:flex items-center space-x-8">
                <a href="#" class="nav-link text-gray-700 hover:text-primary-600">Home</a>
                <a href="#" class="nav-link text-gray-700 hover:text-primary-600">Colors</a>
                <a href="#" class="nav-link text-gray-700 hover:text-primary-600">Generator</a>
                <a href="#" class="nav-link text-gray-700 hover:text-primary-600">About</a>
              </div>
              
              <button class="md:hidden focus:outline-none">
                <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
              </button>
            </div>
          </div>
        </nav>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);