components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background-color: rgba(15, 23, 42, 0.8);
                    backdrop-filter: blur(10px);
                }
                
                .nav-link:hover {
                    color: #8b5cf6;
                }
                
                .nav-link.active {
                    color: #8b5cf6;
                    border-bottom: 2px solid #8b5cf6;
                }
            </style>
            <nav class="border-b border-gray-800 sticky top-0 z-50">
                <div class="container mx-auto px-4 py-4 flex justify-between items-center">
                    <a href="/" class="flex items-center gap-2">
                        <i data-feather="hexagon" class="text-primary-500"></i>
                        <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-purple-400 bg-clip-text text-transparent">ShadowWeave</span>
                    </a>
                    
                    <div class="hidden md:flex items-center gap-8">
                        <a href="#generate" class="nav-link active">Create</a>
                        <a href="#gallery" class="nav-link">Gallery</a>
                        <a href="#models" class="nav-link">Models</a>
                        <a href="#spells" class="nav-link">Spells</a>
                    </div>
                    
                    <div class="flex items-center gap-4">
                        <button class="md:hidden">
                            <i data-feather="menu"></i>
                        </button>
                        <a href="#" class="hidden md:block bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">
                            Sign In
                        </a>
                    </div>
                </div>
            </nav>
        `;
    }
}

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