components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                    transition: all 0.3s ease;
                }
                
                .navbar.scrolled {
                    background: rgba(255, 255, 255, 0.98);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }
                
                .nav-link {
                    position: relative;
                    transition: color 0.3s ease;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -4px;
                    left: 0;
                    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
                    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="navbar fixed top-0 left-0 right-0 z-50 py-4">
                <div class="max-w-7xl mx-auto px-6">
                    <div class="flex justify-between items-center">
                        <!-- Logo -->
                        <a href="/" class="text-2xl font-bold text-gray-900 hover:text-blue-600 transition-colors duration-300">
                            Vision<span class="text-blue-600">Nova</span>
                        </a>
                        
                        <!-- Desktop Menu -->
                        <div class="hidden md:flex space-x-8">
                            <a href="#accueil" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Accueil</a>
                            <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Services</a>
                            <a href="#projets" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Projets</a>
                            <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Contact</a>
                        </div>
                        
                        <!-- CTA Button -->
                        <div class="hidden md:block">
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 transform hover:scale-105">
                            Commencer
                        </button>
                        </div>
                        
                        <!-- Mobile Menu Button -->
                        <button class="md:hidden text-gray-700 hover:text-blue-600 transition-colors duration-300" onclick="this.getRootNode().host.toggleMobileMenu()">
                            <i data-feather="menu"></i>
                        </button>
                    </div>
                    
                    <!-- Mobile Menu -->
                    <div id="mobile-menu" class="hidden md:hidden mobile-menu flex-col space-y-4 mt-4 pt-4 border-t border-gray-200">
                        <a href="#accueil" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Accueil</a>
                        <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Services</a>
                        <a href="#projets" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Projets</a>
                        <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Contact</a>
                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 mt-2">
                            Commencer
                        </button>
                    </div>
                </div>
            </nav>
        `;

        // Add scroll effect
        this.addScrollEffect();
        
        // Initialize Feather Icons
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }

    addScrollEffect() {
        const navbar = this.shadowRoot.querySelector('.navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    }

    toggleMobileMenu() {
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
        mobileMenu.classList.toggle('flex');
        
        // Update menu icon
        const menuIcon = this.shadowRoot.querySelector('[data-feather="menu"]');
        if (mobileMenu.classList.contains('hidden')) {
            menuIcon.setAttribute('data-feather', 'menu');
        } else {
            menuIcon.setAttribute('data-feather', 'x');
        }
        feather.replace();
    }
}

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