class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .nav-link {
                    position: relative;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -2px;
                    left: 0;
                    background-color: #0D9488;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                .mobile-menu {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                }
                
                .mobile-menu.open {
                    max-height: 500px;
                }
            </style>
            <header class="bg-white shadow-sm fixed w-full z-50">
                <div class="container mx-auto px-6 py-4">
                    <div class="flex justify-between items-center">
                        <a href="/" class="flex items-center">
                            <span class="text-2xl font-bold text-primary-600">Management Evolution</span>
                        </a>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="/" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Home</a>
                            <a href="#services" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Services</a>
                            <a href="/about.html" class="nav-link text-gray-700 hover:text-primary-600 font-medium">About</a>
<a href="#contact" class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300">Contact</a>
                        </div>
                        
                        <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
                            <i data-feather="menu" class="w-6 h-6"></i>
                        </button>
                    </div>
                    
                    <div id="mobile-menu" class="mobile-menu md:hidden">
                        <div class="pt-4 pb-2 space-y-2">
                            <a href="/" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Home</a>
                            <a href="#services" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Services</a>
                            <a href="/about.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">About</a>
<a href="#contact" class="block px-4 py-2 bg-primary-600 text-white rounded-lg text-center mt-2">Contact</a>
                        </div>
                    </div>
                </div>
            </header>
        `;

        // Initialize mobile menu functionality
        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('open');
            const icon = mobileMenuButton.querySelector('i');
            if (mobileMenu.classList.contains('open')) {
                feather.replace();
                icon.setAttribute('data-feather', 'x');
            } else {
                feather.replace();
                icon.setAttribute('data-feather', 'menu');
            }
            feather.replace();
        });
    }
}

customElements.define('custom-header', CustomHeader);