components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .header {
          background-color: rgba(245, 197, 24, 1);
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .nav-link {
          transition: color 0.3s ease;
        }
        
        .nav-link:hover {
          color: #1f2937;
        }
        
        .search-bar {
          background-color: #f3f4f6;
          border: 1px solid #d1d5db;
          transition: all 0.3s ease;
        }
        
        .search-bar:focus {
          background-color: white;
          border-color: #1f2937;
          box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
        }
        
        @media (max-width: 768px) {
          .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
          }
          
          .mobile-menu.open {
            max-height: 500px;
          }
        }
      </style>
      
      <header class="header">
        <div class="container mx-auto px-4 py-3">
          <div class="flex items-center justify-between">
            <!-- Logo -->
            <div class="flex items-center">
              <a href="/" class="flex items-center">
                <h1 class="text-2xl font-bold text-black">
                  <span class="text-black">Cine</span>
                  <span class="text-gray-700">Pulse</span>
                </h1>
              </a>
            </div>
            
            <!-- Search Bar -->
            <div class="hidden lg:flex flex-1 max-w-2xl mx-8">
              <div class="relative w-full">
                <input 
                  type="text" 
                  placeholder="Search movies, TV shows, celebrities..." 
                  class="search-bar w-full py-2 px-4 pl-10 rounded-full focus:outline-none"
                >
                <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 w-4 h-4"></i>
              </div>
            </div>
            
            <!-- Right Navigation -->
            <div class="flex items-center space-x-6">
              <div class="hidden md:flex items-center space-x-4">
                <a href="movies.html" class="nav-link font-medium text-black">Movies</a>
                <a href="#" class="nav-link font-medium text-black">TV Shows</a>
                <a href="#" class="nav-link font-medium text-black">Watch List</a>
              </div>
              
              <!-- User Menu -->
              <div class="flex items-center space-x-3">
                <button class="p-2 hover:bg-yellow-100 rounded-full transition">
                  <i data-feather="bell" class="w-5 h-5 text-black"></i>
                </button>
                <div class="relative">
                  <button class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-black flex items-center justify-center">
                      <span class="font-bold text-white text-sm">U</span>
                    </div>
                  </button>
                </div>
                
                <!-- Mobile menu button -->
                <button id="mobile-toggle" class="md:hidden">
                  <i data-feather="menu" class="w-6 h-6 text-black"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- Mobile Navigation -->
          <div id="mobile-menu" class="mobile-menu md:hidden mt-4">
            <div class="pt-4 pb-2 space-y-3">
              <div class="relative mb-4">
                <input 
                  type="text" 
                  placeholder="Search..." 
                  class="w-full search-bar py-2 px-4 pl-10 rounded-full focus:outline-none"
                >
                <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 w-4 h-4"></i>
              </div>
              <a href="movies.html" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">Movies</a>
              <a href="#" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">TV Shows</a>
              <a href="#" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">Watch List</a>
              <a href="#" class="block py-2 px-4 rounded hover:bg-yellow-100 font-medium">Sign In</a>
            </div>
          </div>
        </div>
      </header>
    `;
    
    // Add event listener for mobile menu toggle
    setTimeout(() => {
      const toggleButton = this.shadowRoot.getElementById('mobile-toggle');
      const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
      
      toggleButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('open');
      });
      
      // Initialize Feather icons
      feather.replace();
    }, 0);
  }
}

customElements.define('custom-header', CustomHeader);