components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background: rgba(17, 24, 39, 0.8);
          backdrop-filter: blur(8px);
        }
      </style>
      <nav class="border-b border-gray-800 py existing-node-644">
        <div class="container mx-auto px-4 flex justify-between items-center">
          <a href="/" class="flex items-center gap-2">
            <i data-feather="cpu" class="w-6 h-6 text-purple-400"></i>
            <span class="font-bold text-xl bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">ByteBrew</span>
          </a>
          <div class="hidden md:flex items-center gap-6">
            <a href="#playground" class="text-gray-300 hover:text-white transition-colors">Playground</a>
            <a href="#models" class="text-gray-300 hover:text-white transition-colors">Models</a>
            <a href="#" class="text-gray-300 hover:text-white transition-colors">Docs</a>
            <a href="#" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition-colors">Download</a>
          </div>
          <button class="md:hidden text-gray-300">
            <i data-feather="menu" class="w-6 h-6"></i>
          </button>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);