components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          font-family: 'Comic Sans MS', cursive, sans-serif;
          display: flex;
          align-items: center;
        }
.nav-link:hover {
          transform: translateY(-2px);
        }
        .nav-link::after {
          content: '';
          display: block;
          width: 0;
          height: 2px;
          background: #ff3389;
          transition: width .3s;
        }
        .nav-link:hover::after {
          width: 100%;
        }
      </style>
      <header class="bg-turtle-500 text-white shadow-md">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
          <a href="/" class="flex items-center gap-2">
            <span class="text-2xl font-bold bg-blossom-500 text-white px-3 py-1 rounded-full">🐢</span>
            <span class="text-xl font-bold">Turtle Haven</span>
          </a>
          <div class="hidden md:flex items-center gap-8" style="display: flex;">
<a href="#turtles" class="nav-link text-white font-medium transition-all">Meet Turtles</a>
            <a href="#" class="nav-link text-white font-medium transition-all">Turtle Facts</a>
            <a href="#" class="nav-link text-white font-medium transition-all">Conservation</a>
            <a href="#" class="bg-blossom-500 hover:bg-blossom-600 text-white font-bold py-2 px-4 rounded-full transition-all">Adopt a Turtle</a>
          </div>
</nav>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);