components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: sticky;
          top: 0;
          z-index: 50;
          background: white;
          padding: 1rem 2rem;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          max-width: 1200px;
          margin: 0 auto;
        }
        .logo {
          font-weight: bold;
          color: #111;
        }
        nav {
          display: flex;
          gap: 1rem;
        }
        nav a {
          text-decoration: none;
          font-weight: bold;
          color: #111;
          transition: color 0.3s;
        }
        nav a:hover {
          color: #10b981;
        }
        .cta-btn {
          background: #10b981;
          color: black;
          font-weight: bold;
          padding: 0.5rem 1rem;
          border-radius: 9999px;
          transition: all 0.3s;
        }
        .cta-btn:hover {
          background: #059669;
          transform: scale(1.05);
        }
        @media (max-width: 768px) {
          :host {
            padding: 1rem;
          }
          nav {
            display: none;
          }
        }
      </style>
      <div class="container">
        <div class="logo">Alexander Adolfsson Coaching</div>
        <nav>
          <a href="#home">Hem</a>
          <a href="#about">Om mig</a>
          <a href="#services">Tjänster</a>
          <a href="#pricing">Priser</a>
          <a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank" class="cta-btn">Boka gratis konsultation</a>
        </nav>
      </div>
    `;
  }
}
customElements.define('custom-header', CustomHeader);