components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
            display: block;
            width: 100%;
            background-color: #1e293b;
            border-bottom: 1px solid #334155;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        nav {
            max-width: 1280px;
            margin: 0 auto;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-weight: 800;
            font-size: 1.5rem;
            color: #10b981;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .nav-links {
            display: flex;
            gap: 1.5rem;
        }
        .nav-link {
            color: #94a3b8;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        .nav-link:hover {
            color: #f8fafc;
        }
        .nav-link i {
            width: 18px;
            height: 18px;
        }
      </style>
      <nav>
        <a href="#" class="logo">
            <i data-feather="box"></i> Checkmate Nexus
        </a>
        <div class="nav-links">
            <a href="#" class="nav-link"><i data-feather="home"></i> Play</a>
            <a href="#" class="nav-link"><i data-feather="book-open"></i> Rules</a>
            <a href="#" class="nav-link"><i data-feather="github"></i> Repo</a>
        </div>
      </nav>
    `;
    // Initialize Feather Icons inside Shadow DOM
    const svg = this.shadowRoot.querySelector('i').outerHTML; // Hacky way to trigger replacement if needed, but feather.replace() targets document by default. 
    // Since Feather Icons doesn't natively support Shadow DOM easily without scope targeting, 
    // we will use standard HTML entities or simple CSS shapes if icons fail, but standard feather.replace usually works on the main document.
    // To ensure icons appear in Shadow DOM, we manually inject SVGs or use a script that traverses shadow roots.
    // For this task, I'll rely on the main script replace(), but Shadow DOM isolation might break it.
    // FIX: Let's use explicit SVG paths for the navbar to guarantee it works in Shadow DOM without complex polyfills.
    
    const iconMap = {
        'box': '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>',
        'home': '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>',
        'book-open': '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>',
        'github': '<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>'
    };

    const tags = this.shadowRoot.querySelectorAll('i[data-feather]');
    tags.forEach(tag => {
        const name = tag.getAttribute('data-feather');
        if(iconMap[name]) {
            tag.innerHTML = iconMap[name];
            tag.outerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-${name}">${iconMap[name]}</svg>`;
        }
    });
  }
}
customElements.define('custom-navbar', CustomNavbar);