components/navigation.js

class CustomNavigation extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background-color: rgba(0, 65, 113, 0.95);
                    backdrop-filter: blur(8px);
                    transition: all 0.3s ease;
                }
                nav.scrolled {
                    background-color: rgba(0, 65, 113, 1);
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                }
                .nav-link {
                    position: relative;
                }
                .nav-link:after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: 0;
                    left: 0;
                    background-color: #00A0B0;
                    transition: width 0.3s ease;
                }
                .nav-link:hover:after {
                    width: 100%;
                }
                @media (max-width: 768px) {
                    .mobile-menu {
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.3s ease-out;
                    }
                    .mobile-menu.open {
                        max-height: 500px;
                    }
                }
            </style>
            <nav class="fixed w-full z-50 text-white py-4 scrolled">
                <div class="container mx-auto px-6">
                    <div class="flex justify-between items-center">
                        <a href="#" class="text-2xl font-bold">BLU2</a>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="#products" class="nav-link">Products</a>
                            <a href="#facilities" class="nav-link">Facilities</a>
                            <a href="#distribution" class="nav-link">Distribution Network</a>
                            <a href="#advantage" class="nav-link">The BLU2 Advantage</a>
                            
                            <div class="flex items-center space-x-4">
                                <button class="px-4 py-2 rounded border border-white hover:bg-white hover:text-primary transition">FR/EN</button>
                                <a href="#contact" class="bg-secondary hover:bg-opacity-90 px-6 py-2 rounded-lg font-medium transition">Contact Us</a>
                            </div>
                        </div>
                        
                        <button class="md:hidden focus:outline-none" id="mobile-menu-button">
                            <i data-feather="menu"></i>
                        </button>
                    </div>
                    
                    <div class="mobile-menu md:hidden mt-4" id="mobile-menu">
                        <div class="flex flex-col space-y-4 py-4">
                            <a href="#products" class="nav-link">Products</a>
                            <a href="#facilities" class="nav-link">Facilities</a>
                            <a href="#distribution" class="nav-link">Distribution Network</a>
                            <a href="#advantage" class="nav-link">The BLU2 Advantage</a>
                            <div class="flex space-x-4 pt-4">
                                <button class="px-4 py-2 rounded border border-white hover:bg-white hover:text-primary transition w-full">FR/EN</button>
                                <a href="#contact" class="bg-secondary hover:bg-opacity-90 px-6 py-2 rounded-lg font-medium transition text-center w-full">Contact Us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        `;

        // Mobile menu toggle
        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
        
        menuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('open');
            feather.replace();
        });

        // Scroll effect
        window.addEventListener('scroll', () => {
            const nav = this.shadowRoot.querySelector('nav');
            if (window.scrollY > 10) {
                nav.classList.add('scrolled');
            } else {
                nav.classList.remove('scrolled');
            }
        });

        // Initialize feather icons
        feather.replace();
    }
}

customElements.define('custom-navigation', CustomNavigation);