components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        header {
          background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
          color: white;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .logo {
          font-weight: 800;
          letter-spacing: -0.025em;
        }
        nav a {
          transition: all 0.2s ease;
          border-bottom: 2px solid transparent;
        }
        nav a:hover {
          border-bottom-color: white;
        }
      </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="shield" class="w-8 h-8"></i>
            <h1 class="logo text-2xl">FireGuardian 3000</h1>
          </div>
            <nav class="hidden md:flex space-x-6">
            <a href="schematic.html" class="font-medium">Schematic</a>
            <a href="#" class="font-medium">Code</a>
            <a href="#" class="font-medium">Components</a>
            <a href="#" class="font-medium">Documentation</a>
          </nav>
<button class="md:hidden">
            <i data-feather="menu"></i>
          </button>
        </div>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);