components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        header {
          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
          color: white;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .container {
          max-width: 100%;
        }
        .logo {
          font-weight: 800;
          letter-spacing: -0.5px;
        }
        nav a:hover {
          opacity: 0.9;
        }
      </style>
      <header class="py-4">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-2">
              <i data-feather="image" class="w-6 h-6"></i>
              <h1 class="logo text-xl md:text-2xl">Posterizer Pro</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
              <a href="#" class="font-medium">Home</a>
              <a href="#" class="font-medium">Guide</a>
              <a href="#" class="font-medium">About</a>
            </nav>
            <button class="md:hidden">
              <i data-feather="menu" class="w-6 h-6"></i>
            </button>
          </div>
        </div>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);