components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .nav-link {
                    position: relative;
                    transition: all 0.3s ease;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -2px;
                    left: 0;
                    background-color: #ef4444;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                .mobile-menu {
                    animation: slideDown 0.3s ease-out;
                }
                
                @keyframes slideDown {
                    from {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            </style>
            <nav class="bg-white/80 backdrop-blur-md shadow-sm fixed w-full top-0 z-50">
                <div class="max-w-7xl mx-auto px-4">
                    <div class="flex justify-between items-center py-4">
                        <!-- Logo -->
                        <a href="/" class="flex items-center space-x-2">
                            <div class="w-10 h-10 bg-primary-500 rounded-full flex items-center justify-center">
                                <i data-feather="sparkles" class="text-white"></i>
                            </div>
                            <span class="text-xl font-bold text-primary-600">Naughty Nook</span>
                        </a>

                        <!-- Desktop Menu -->
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="/gay-cruising" class="nav-link text-secondary-600 hover:text-primary-500 font-medium">
                                Hot Spots
                            </a>
                            <a href="/gay-personals" class="nav-link text-secondary-600 hover:text-primary-500 font-medium">
                                Playful Encounters
                            </a>
                            <a href="/mobile-app" class="nav-link text-secondary-600 hover:text-primary-500 font-medium">
                                On The Go
                            </a>
                            <div class="flex items-center space-x-4">
                                <a href="/login" class="text-secondary-600 hover:text-primary-500 font-medium">
                                    Sign In
                                </a>
                                <a href="/register" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-full font-medium transition-all duration-300">
                                    Join the Fun
                                </a>
                            </div>
                        </div>

                        <!-- Mobile Menu Button -->
                        <div class="md:hidden">
                            <button onclick="toggleMobileMenu()" class="text-secondary-600 hover:text-primary-500">
                                <i data-feather="menu"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Mobile Menu -->
                    <div id="mobileMenu" class="hidden md:hidden flex-col space-y-4 py-4 border-t border-secondary-200">
                        <a href="/gay-cruising" class="text-secondary-600 hover:text-primary-500 font-medium py-2">
                        Hot Spots
                        </a>
                        <a href="/gay-personals" class="text-secondary-600 hover:text-primary-500 font-medium py-2">
                            Playful Encounters
                        </a>
                        <a href="/mobile-app" class="text-secondary-600 hover:text-primary-500 font-medium py-2">
                                On The Go
                            </a>
                            <div class="flex flex-col space-y-2 pt-4 border-t border-secondary-200">
                                <a href="/login" class="text-secondary-600 hover:text-primary-500 font-medium py-2">
                                    Sign In
                                </a>
                                <a href="/register" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-full font-medium text-center transition-all duration-300">
                                    Join the Fun
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        `;
        
        // Add feather icons replacement for shadow DOM
        setTimeout(() => {
            if (window.feather) {
                window.feather.replace({ class: 'feather-inline' });
            }
        }, 100);
    }
}

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