class CasinoNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        nav {
          background: rgba(17, 24, 39, 0.9);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(239, 68, 68, 0.3);
          padding: 1rem 0;
          position: sticky;
          top: 0;
          z-index: 50;
        }
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1.5rem;
          font-weight: bold;
          color: white;
          text-decoration: none;
        }
        .logo-icon {
          width: 32px;
          height: 32px;
          color: #ef4444;
        }
        .nav-links {
          display: flex;
          gap: 2rem;
          align-items: center;
        }
        .nav-links a {
          color: white;
          text-decoration: none;
          transition: color 0.3s;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .nav-links a:hover {
          color: #ef4444;
        }
        .nav-links a.active {
          color: #ef4444;
          font-weight: 600;
        }
        .games-badge {
          background: linear-gradient(45deg, #ef4444, #dc2626);
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 600;
          margin-left: 0.5rem;
        }
        @media (max-width: 768px) {
          .nav-links {
            gap: 1rem;
          }
          .nav-links span {
            display: none;
          }
        }
      </style>
      <nav>
        <div class="container">
          <a href="/" class="logo">
            <svg class="logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2L2 7v10c0 5.55 3.84 9.74 9 12 5.16-2.26 9-6.45 9-12V7l-10-5z"></path>
            </svg>
            CodeVault Casino
          </a>
          <div class="nav-links">
            <a href="/" class="active">
              <i data-feather="home" class="w-5 h-5"></i>
              <span>Home</span>
            </a>
            <a href="/games.html">
              <i data-feather="dice" class="w-5 h-5"></i>
              <span>Games</span>
              <span class="games-badge">NEW</span>
            </a>
            <a href="#" onclick="alert('Admin panel coming soon!')">
              <i data-feather="user" class="w-5 h-5"></i>
              <span>Admin</span>
            </a>
          </div>
        </div>
      </nav>
    `;
    
    // Re-apply feather icons in shadow DOM
    if (window.feather) {
      setTimeout(() => {
        feather.replace({ 
          'stroke-width': 2,
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round'
        });
      }, 10);
    }
  }
}

customElements.define('casino-navbar', CasinoNavbar);