class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    backdrop-filter: blur(10px);
                }
                
                .nav-link {
                    transition: all 0.3s ease;
                    position: relative;
                }
                
                .nav-link:hover {
                    transform: translateY(-2px);
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background: white;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                @media (max-width: 768px) {
                    .nav-menu {
                        display: none;
                    }
                    
                    .nav-menu.active {
                        display: flex;
                        flex-direction: column;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        right: 0;
                        background: rgba(255, 255, 255, 0.95);
                        backdrop-filter: blur(10px);
                    }
                }
            </style>
            <nav class="navbar text-white shadow-lg">
                <div class="container mx-auto px-4">
                    <div class="flex justify-between items-center py-4">
                        <!-- Logo -->
                        <a href="/" class="flex items-center gap-3 text-xl font-bold">
                                <i data-feather="search" class="w-6 h-6"></i>
                                SearchSage Explorer
                            </a>
                        
                        <!-- Desktop Menu -->
                        <div class="nav-menu hidden md:flex items-center gap-8">
                            <a href="/" class="nav-link flex items-center gap-2">
                                <i data-feather="home" class="w-4 h-4"></i>
                                Home
                            </a>
                            <a href="#" class="nav-link flex items-center gap-2">
                                <i data-feather="info" class="w-4 h-4"></i>
                                About
                            </a>
                            <a href="#" class="nav-link flex items-center gap-2">
                                <i data-feather="help-circle" class="w-4 h-4"></i>
                                Help
                            </a>
                        </div>
                        
                        <!-- Mobile Menu Button -->
                        <button class="md:hidden mobile-menu-btn">
                            <i data-feather="menu" class="w-6 h-6"></i>
                            </button>
                    </div>
                    
                    <!-- Mobile Menu -->
                    <div class="mobile-menu hidden md:hidden pb-4">
                        <a href="/" class="nav-link block py-2 flex items-center gap-2">
                                <i data-feather="home" class="w-4 h-4"></i>
                                Home
                            </a>
                        <a href="#" class="nav-link block py-2 flex items-center gap-2">
                                <i data-feather="info" class="w-4 h-4"></i>
                                About
                            </a>
                        <a href="#" class="nav-link block py-2 flex items-center gap-2">
                                <i data-feather="help-circle" class="w-4 h-4"></i>
                                Help
                            </a>
                    </div>
                </div>
            </nav>
        `;
        
        // Add mobile menu functionality
        const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
        const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            feather.replace();
        });
        
        feather.replace();
    }
}

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