class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    transition: all 0.3s ease;
                }
                .navbar-scrolled {
                    background-color: rgba(15, 23, 42, 0.95);
                    backdrop-filter: blur(10px);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }
                .navbar {
                    background-color: transparent;
                    backdrop-filter: none;
                }
                .nav-link {
                    position: relative;
                    overflow: hidden;
                }
                .nav-link span:last-child {
                    transform-origin: left;
                    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
                }
                .nav-link:hover span:last-child {
                    transform: scaleX(1);
                }
                .nav-link.active {
                    color: white;
                }
                .nav-link.active span:last-child {
                    transform: scaleX(1);
                }
                .mobile-menu {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                    background: rgba(15, 23, 42, 0.98);
                    backdrop-filter: blur(20px);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 0.75rem;
                    margin-top: 0.75rem;
                }
                .mobile-menu.open {
                    max-height: 400px;
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
                }
.dropdown-menu {
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                }
</style>
            <nav class="navbar fixed w-full z-50 px-6 py-4 transition-colors duration-300">
<div class="max-w-7xl mx-auto flex justify-between items-center">
                    <a href="/" class="text-xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-primary-100 to-secondary-500">Complex Devs</a>
                <div class="hidden md:flex items-center space-x-6">
                    <a href="/" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
                        <span class="relative z-10">Home</span>
                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
                    </a>
                    <a href="#services" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
                        <span class="relative z-10">Services</span>
                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
                    </a>
                    <a href="#process" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
                        <span class="relative z-10">Process</span>
                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
                    </a>
                    <a href="#about" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
                        <span class="relative z-10">About</span>
                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
                    </a>
</div>
                    
                    <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
                        <i data-feather="menu"></i>
                    </button>
                </div>
                    <div id="mobile-menu" class="mobile-menu md:hidden bg-gray-900 rounded-lg mt-2 shadow-xl">
                        <div class="px-4 py-2 space-y-2">
                            <a href="/" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
                                <div class="flex items-center space-x-3">
                                    <i data-feather="home" class="w-5 h-5"></i>
                                    <span>Home</span>
                                </div>
                            </a>
                            <a href="#services" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
                                <div class="flex items-center space-x-3">
                                    <i data-feather="layers" class="w-5 h-5"></i>
                                    <span>Services</span>
                                </div>
                            </a>
                            <a href="#process" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
                                <div class="flex items-center space-x-3">
                                    <i data-feather="settings" class="w-5 h-5"></i>
                                    <span>Process</span>
                                </div>
                            </a>
                            <a href="#about" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
                                <div class="flex items-center space-x-3">
                                    <i data-feather="user" class="w-5 h-5"></i>
                                    <span>About</span>
                                </div>
                            </a>
                        </div>
</div>
                </div>
            </nav>
            
            <script>
                // Mobile menu toggle
                document.addEventListener('DOMContentLoaded', () => {
                    const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
                    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
                    
                    menuButton.addEventListener('click', () => {
                        mobileMenu.classList.toggle('open');
                        const icon = menuButton.querySelector('i');
                        if (mobileMenu.classList.contains('open')) {
                            feather.replace();
                            icon.setAttribute('data-feather', 'x');
                        } else {
                            feather.replace();
                            icon.setAttribute('data-feather', 'menu');
                        }
                        feather.replace();
                    });
                    
                    // Navbar scroll effect
                    const navbar = this.shadowRoot.querySelector('.navbar');
                    window.addEventListener('scroll', () => {
                        if (window.scrollY > 50) {
                            navbar.classList.add('navbar-scrolled');
                        } else {
                            navbar.classList.remove('navbar-scrolled');
                        }
                    });
                    
                    // Close mobile menu when clicking a link
                    const navLinks = this.shadowRoot.querySelectorAll('#mobile-menu a');
                    navLinks.forEach(link => {
                        link.addEventListener('click', () => {
                            mobileMenu.classList.remove('open');
                            const icon = menuButton.querySelector('i');
                            icon.setAttribute('data-feather', 'menu');
                            feather.replace();
                        });
                    });
                });
            </script>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);