components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background-color: white;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .nav-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 1rem 2rem;
        }
        .nav-links a:hover {
          color: #3b82f6;
        }
        @media (max-width: 768px) {
          .nav-container {
            flex-direction: column;
          }
        }
      </style>
      <nav>
        <div class="nav-container flex justify-between items-center">
          <div class="flex items-center">
            <i data-feather="zap" class="w-6 h-6 text-blue-500 mr-2"></i>
            <span class="text-xl font-bold">AutoStream</span>
          </div>
          <div class="nav-links flex space-x-6">
            <a href="#" class="font-medium">Home</a>
            <a href="#" class="font-medium">Tutorial</a>
            <a href="#" class="font-medium">Resources</a>
            <a href="#" class="font-medium bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Get Started</a>
          </div>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-header', CustomHeader);