components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        header {
          background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
          color: white;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .nav-link:hover {
          opacity: 0.9;
          transform: translateY(-2px);
        }
        .nav-link {
          transition: all 0.2s ease;
        }
      </style>
      <header class="py-4 px-6">
        <div class="container mx-auto flex justify-between items-center">
          <div class="flex items-center space-x-2">
            <i data-feather="award" class="w-8 h-8"></i>
            <h1 class="text-xl font-bold">Stadium Showdown</h1>
          </div>
          <nav class="hidden md:flex space-x-6">
            <a href="#" class="nav-link flex items-center">
              <i data-feather="home" class="w-4 h-4 mr-1"></i>
              Home
            </a>
            <a href="#" class="nav-link flex items-center">
              <i data-feather="settings" class="w-4 h-4 mr-1"></i>
              Settings
            </a>
            <a href="#" class="nav-link flex items-center">
              <i data-feather="help-circle" class="w-4 h-4 mr-1"></i>
              Help
            </a>
          </nav>
          <button class="md:hidden">
            <i data-feather="menu" class="w-6 h-6"></i>
          </button>
        </div>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);