class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    backdrop-filter: blur(10px);
                    background-color: rgba(17, 24, 39, 0.8);
                }
            </style>
            <nav class="navbar border-b border-gray-800 sticky top-0 z-50">
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between py-4">
                        <a href="/" class="flex items-center space-x-2">
                            <i data-feather="film" class="text-primary-500"></i>
                            <span class="text-xl font-bold text-white">TriggerFreeFlicks</span>
                        </a>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="/" class="text-gray-300 hover:text-primary-500 transition">Home</a>
                            <a href="/browse" class="text-gray-300 hover:text-primary-500 transition">Browse</a>
                            <a href="contribute.html" class="text-gray-300 hover:text-primary-500 transition">Contribute</a>
<a href="/about" class="text-gray-300 hover:text-primary-500 transition">About</a>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <button class="text-gray-300 hover:text-primary-500 transition">
                                <i data-feather="user"></i>
                            </button>
                            <button class="md:hidden text-gray-300 hover:text-primary-500 transition" id="mobileMenuButton">
                                <i data-feather="menu"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Mobile menu (hidden by default) -->
                    <div class="hidden md:hidden py-2 border-t border-gray-800" id="mobileMenu">
                        <a href="/" class="block py-2 px-4 text-gray-300 hover:text-primary-500 hover:bg-gray-800 rounded transition">Home</a>
                        <a href="/browse" class="block py-2 px-4 text-gray-300 hover:text-primary-500 hover:bg-gray-800 rounded transition">Browse</a>
                        <a href="contribute.html" class="block py-2 px-4 text-gray-300 hover:text-primary-500 hover:bg-gray-800 rounded transition">Contribute</a>
<a href="/about" class="block py-2 px-4 text-gray-300 hover:text-primary-500 hover:bg-gray-800 rounded transition">About</a>
                    </div>
                </div>
            </nav>
        `;

        // Mobile menu toggle
        const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = mobileMenuButton.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.setAttribute('data-feather', 'menu');
            } else {
                icon.setAttribute('data-feather', 'x');
            }
            feather.replace();
        });
    }
}

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