components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    z-index: 1000;
                    --navbar-height: 80px;
                    --nav-bg: rgba(15, 23, 42, 0.98);
                    --nav-border: rgba(45, 55, 72, 0.5);
                    --text-primary: #e2e8f0;
                    --text-secondary: #94a3b8;
                    --accent-gradient: linear-gradient(to right, #8b5cf6, #3b82f6);
                }
                nav {
                    backdrop-filter: blur(16px);
                    -webkit-backdrop-filter: blur(16px);
                    background: var(--nav-bg);
                    border-bottom: 1px solid var(--nav-border);
                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                }
                .nav-link {
                    position: relative;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    color: var(--text-secondary);
                    font-weight: 500;
                    letter-spacing: 0.025em;
                }
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -4px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 3px;
                    background: var(--accent-gradient);
                    border-radius: 2px;
                    transition: width 0.3s ease, opacity 0.3s ease;
                    opacity: 0;
                }
                .nav-link:hover::after,
                .nav-link.active::after {
                    width: 80%;
                    opacity: 1;
                }
                .nav-link:hover,
                .nav-link.active {
                    color: var(--text-primary);
                }
                .mobile-menu {
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    animation: fadeIn 0.2s ease-out;
                }
                
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(-10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
</style>
            <nav class="sticky top-0 z-50 w-full">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex items-center justify-between h-[var(--navbar-height)]">
                        <!-- Logo -->
                        <div class="flex-shrink-0 flex items-center">
                            <a href="/" class="flex items-center group">
                                <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-2 rounded-lg group-hover:rotate-12 transition-transform duration-300">
                                    <i data-feather="activity" class="w-6 h-6 text-white"></i>
                                </div>
                                <span class="ml-3 text-xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">CryptoPulse Pro</span>
                            </a>
                        </div>
<!-- Desktop Navigation -->
                        <div class="hidden md:block">
                            <div class="ml-10 flex items-center space-x-8">
                                <a href="/" class="nav-link text-white px-3 py-2 text-sm font-medium active">Home</a>
                                <a href="/plan" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Plans</a>
                                <a href="/contact" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Contact</a>
                                
                                <!-- Dropdown -->
                                <div class="relative" x-data="{ open: false }">
                                    <button @click="open = !open" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium flex items-center">
                                        More
                                        <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
                                    </button>
                                    
                                    <div x-show="open" @click.away="open = false" class="absolute z-10 mt-2 w-48 rounded-md shadow-lg bg-gray-800 border border-gray-700 py-1">
                                        <a href="/about" class="block px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white">About Us</a>
                                        <a href="/blog" class="block px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white">Blog</a>
                                        <a href="/faq" class="block px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white">FAQ</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Auth Buttons -->
                        <div class="hidden md:block">
                            <div class="ml-4 flex items-center space-x-4">
                        <a href="/login" class="text-gray-400 hover:text-white px-3 py-2 text-sm font-medium transition-colors duration-300">Sign In</a>
<darkmode-toggle></darkmode-toggle>
                        <a href="/register" class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 shadow-md hover:shadow-lg hover:scale-[1.03] transform transition-transform">Get Started</a>
</div>
                        </div>
                        
                        <!-- Mobile menu button -->
                        <div class="md:hidden flex items-center">
                            <button type="button" 
                                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" 
                                aria-controls="mobile-menu" 
                                aria-expanded="false"
                                data-collapse-toggle="mobile-menu">
                                <span class="sr-only">Open main menu</span>
                                <i data-feather="menu" class="block h-6 w-6"></i>
                                <i data-feather="x" class="hidden h-6 w-6"></i>
                            </button>
                        </div>
</div>
                </div>
                <!-- Mobile menu -->
                <div class="md:hidden hidden absolute top-[var(--navbar-height)] left-0 right-0 bg-gray-900/95 backdrop-blur-md" id="mobile-menu">
                    <div class="px-4 py-6 space-y-6">
                        <a href="/" class="block px-3 py-3 rounded-lg text-lg font-medium bg-gradient-to-r from-purple-900/30 to-blue-900/30">Home</a>
                        <a href="/plan" class="block px-3 py-3 rounded-lg text-lg font-medium transition-colors duration-300 hover:bg-gray-800 hover:text-white">Plans</a>
                        <a href="/contact" class="block px-3 py-3 rounded-lg text-lg font-medium transition-colors duration-300 hover:bg-gray-800 hover:text-white">Contact</a>
                        <a href="/about" class="block px-3 py-3 rounded-lg text-lg font-medium transition-colors duration-300 hover:bg-gray-800 hover:text-white">About Us</a>
</div>
                    <div class="px-4 py-6 border-t border-gray-800">
                        <div class="grid gap-4">
                            <a href="/login" class="w-full bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg text-center font-medium">Sign In</a>
                            <a href="/register" class="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-lg text-center font-medium shadow-lg hover:shadow-xl transform transition-transform hover:scale-[1.02]">Register</a>
</div>
                    </div>
                </div>
</nav>
        `;
    }
}

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