components/header.js

class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        header {
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .nav-link {
          position: relative;
          padding: 1.5rem 0;
          font-weight: 500;
          transition: color 0.2s;
        }
        .nav-link:hover {
          color: #2563eb;
        }
        .dropdown {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          background: white;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
          border-radius: 0.5rem;
          padding: 1rem;
          width: 320px;
          z-index: 30;
        }
        .nav-item:hover .dropdown {
          display: block;
        }
        .mobile-menu {
          position: fixed;
          top: 0;
          left: 0;
          height: 100vh;
          width: 100%;
          background: white;
          z-index: 40;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
        }
        .mobile-menu.active {
          transform: translateX(0);
        }
        .search-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.5);
          z-index: 50;
          display: none;
        }
      </style>
      <header class="bg-white sticky top-0 z-30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <div class="flex-shrink-0">
              <a href="/" class="text-2xl font-bold text-blue-600">Hostnet</a>
            </div>

            <!-- Desktop Navigation -->
            <nav class="hidden md:flex space-x-8">
              <div class="nav-item relative">
                <a href="#" class="nav-link">Domeinnaam</a>
                <div class="dropdown">
                  <div class="space-y-3">
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Domeinnaam registreren</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Domeinnaam verhuizen</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">E-mail</a>
                  </div>
                </div>
              </div>
              
              <div class="nav-item relative">
                <a href="#" class="nav-link">E-mail en Office</a>
                <div class="dropdown">
                  <div class="space-y-3">
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Microsoft 365</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">E-mail</a>
                  </div>
                </div>
              </div>
              
              <div class="nav-item relative">
                <a href="#" class="nav-link">Website</a>
                <div class="dropdown">
                  <div class="space-y-3">
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Website maken</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Webshop maken</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Website laten maken</a>
                  </div>
                </div>
              </div>
              
              <div class="nav-item relative">
                <a href="#" class="nav-link">WordPress</a>
                <div class="dropdown">
                  <div class="space-y-3">
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Hosting voor WordPress</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">WP.one</a>
                  </div>
                </div>
              </div>
              
              <div class="nav-item relative">
                <a href="#" class="nav-link">Hosting</a>
                <div class="dropdown">
                  <div class="space-y-3">
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Webhosting</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Performance Hosting</a>
                  </div>
                </div>
              </div>
              
              <div class="nav-item relative">
                <a href="#" class="nav-link">VPS</a>
                <div class="dropdown">
                  <div class="space-y-3">
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Unmanaged VPS</a>
                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Managed VPS</a>
                  </div>
                </div>
              </div>
            </nav>

            <!-- Right side buttons -->
            <div class="hidden md:flex items-center space-x-4">
              <button id="search-button" class="p-2 rounded-full hover:bg-gray-100">
                <i data-feather="search" class="w-5 h-5"></i>
              </button>
              <a href="#" class="btn-primary">Inloggen</a>
            </div>

            <!-- Mobile menu button -->
            <div class="md:hidden flex items-center">
              <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700">
                <i data-feather="menu" class="w-6 h-6"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="mobile-menu md:hidden">
          <div class="pt-5 pb-6 px-5">
            <div class="flex items-center justify-between">
              <div>
                <div class="text-2xl font-bold text-blue-600">Hostnet</div>
              </div>
              <div class="-mr-2">
                <button id="close-menu" class="p-2 rounded-md text-gray-700">
                  <i data-feather="x" class="w-6 h-6"></i>
                </button>
              </div>
            </div>
            <div class="mt-6">
              <nav class="grid gap-y-8">
                <a href="#" class="py-3 px-4 rounded-md hover:bg-gray-50">Domeinnaam</a>
                <a href="#" class="py-3 px-4 rounded-md hover:bg-gray-50">E-mail en Office</a>
                <a href="#" class="py-3 px-4 rounded-md hover:bg-gray-50">Website</a>
                <a href="#" class="py-3 px-4 rounded-md hover:bg-gray-50">WordPress</a>
                <a href="#" class="py-3 px-4 rounded-md hover:bg-gray-50">Hosting</a>
                <a href="#" class="py-3 px-4 rounded-md hover:bg-gray-50">VPS</a>
              </nav>
            </div>
            <div class="mt-6">
              <a href="#" class="w-full btn-primary text-center block">Inloggen</a>
            </div>
          </div>
        </div>

        <!-- Search Overlay -->
        <div id="search-overlay" class="search-overlay hidden">
          <div class="absolute inset-0 flex items-start justify-center pt-20 px-4">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">Zoeken</h3>
                <button id="close-search" class="text-gray-500 hover:text-gray-700">
                  <i data-feather="x" class="w-5 h-5"></i>
                </button>
              </div>
              <div class="relative">
                <input type="text" placeholder="Wat zoek je?" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <button class="absolute right-3 top-3 text-gray-500">
                  <i data-feather="search" class="w-5 h-5"></i>
                </button>
              </div>
              <div class="mt-4">
                <h4 class="font-medium mb-2">Populaire zoektermen</h4>
                <div class="flex flex-wrap gap-2">
                  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">SSL</span>
                  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Webmail</span>
                  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">WordPress</span>
                  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Verhuizen</span>
                  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">E-mail</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    `;
    
    // Initialize feather icons
    feather.replace();
  }
}

customElements.define('header-component', HeaderComponent);