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(10px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .nav-link {
          transition: all 0.3s ease;
        }
        
        .nav-link:hover {
          color: #f59e0b;
        }
        
        .logo {
          text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
        }
      </style>
      <nav class="w-full py-4 px-6">
        <div class="container mx-auto flex justify-between items-center">
          <a href="#" class="text-2xl font-bold text-orange-400 flex items-center logo">
            <i data-feather="package" class="mr-2"></i>
            LootSpin
          </a>
          <div class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-300 nav-link">Home</a>
            <a href="#" class="text-gray-300 nav-link">Prizes</a>
            <a href="#" class="text-gray-300 nav-link">About</a>
            <a href="#" class="text-orange-400 font-medium nav-link">Play Now</a>
          </div>
          <button class="md:hidden text-gray-300">
            <i data-feather="menu"></i>
          </button>
        </div>
      </nav>
    `;
    
    // Replace feather icons in shadow DOM
    setTimeout(() => {
      const featherScript = document.createElement('script');
      featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
      this.shadowRoot.appendChild(featherScript);
      
      featherScript.onload = () => {
        if (window.feather) {
          window.feather.replace({ class: 'feather', 'stroke-width': 2 });
        }
      };
    }, 0);
  }
}

customElements.define('custom-navbar', CustomNavbar);