class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    backdrop-filter: blur(10px);
                    background-color: rgba(255, 255, 255, 0.8);
                }
                @media (prefers-color-scheme: dark) {
                    .navbar {
                        background-color: rgba(26, 32, 44, 0.8);
                    }
                }
                .nav-link {
                    position: relative;
                }
                .nav-link:after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -2px;
                    left: 0;
                    background-color: #2563eb;
                    transition: width 0.3s ease;
                }
                .nav-link:hover:after {
                    width: 100%;
                }
            </style>
            <nav class="navbar sticky top-0 z-50 border-b border-gray-200">
                <div class="container mx-auto px-4">
                    <div class="flex justify-between items-center py-4">
                        <div class="flex items-center">
                            <a href="/" class="flex items-center text-xl font-bold">
                                <i data-feather="activity" class="text-blue-600 mr-2"></i>
                                <span>LucidAI</span>
                            </a>
                        </div>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="/features" class="nav-link">Features</a>
                            <a href="/pricing" class="nav-link">Pricing</a>
                            <a href="/research" class="nav-link">Research</a>
                            <a href="/about" class="nav-link">About</a>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <a href="/login" class="px-4 py-2 font-medium">Log in</a>
                            <a href="/signup" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
                                Sign up
                            </a>
                            <button class="md:hidden">
                                <i data-feather="menu"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);