components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }
                .nav-item:hover {
                    transform: translateY(-2px);
                    transition: all 0.2s ease;
                }
            </style>
            <nav class="text-white py-4 px-6">
                <div class="container mx-auto flex justify-between items-center">
                    <div class="flex items-center space-x-2">
                        <i data-feather="cpu"></i>
                        <h1 class="text-xl font-bold">Avatar Commander AI</h1>
                    </div>
                    <div class="hidden md:flex space-x-6">
                        <a href="#" class="nav-item">Home</a>
                        <a href="#" class="nav-item">Commands</a>
                        <a href="#" class="nav-item">About</a>
                    </div>
                    <button class="md:hidden" id="mobile-menu-button">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </nav>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);