components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          background: rgba(0, 0, 0, 0.9);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          padding: 1.5rem 3rem;
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        nav {
          max-width: 1800px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .logo {
          color: #fff;
          font-size: 1.8rem;
          font-weight: 700;
          letter-spacing: 4px;
          text-transform: uppercase;
          text-decoration: none;
          position: relative;
          font-family: 'Bebas Neue', sans-serif;
        }

        .logo::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 60%;
          height: 4px;
          background: linear-gradient(90deg, #ff4d4d, #f9cb28);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .logo:hover::after {
          transform: scaleX(1);
        }

        .nav-links {
          display: flex;
          gap: 4rem;
        }

        .nav-link {
          color: #fff;
          text-decoration: none;
          font-size: 1.1rem;
          font-weight: 500;
          letter-spacing: 1px;
          position: relative;
          padding: 0.5rem 0;
          overflow: hidden;
          font-family: 'Montserrat', sans-serif;
        }

        .nav-link::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, #ff4d4d, #f9cb28);
          transform: translateX(-101%);
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .nav-link:hover::before {
          transform: translateX(0);
        }

        @media (max-width: 992px) {
          .nav-links {
            display: none;
          }
          
          :host {
            padding: 1.5rem;
          }
        }
      </style>

      <nav>
        <a href="/" class="logo">STUDIO</a>
        <div class="nav-links">
          <a href="/work" class="nav-link">Work</a>
          <a href="/about" class="nav-link">About</a>
          <a href="/contact" class="nav-link">Contact</a>
          <a href="/journal" class="nav-link">Journal</a>
        </div>
      </nav>
    `;
  }
}

customElements.define('custom-header', CustomHeader);