components/navbar.js

class CustomNavbar 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: 0;
                    left: 0;
                    background-color: #0d9488;
                    transition: width 0.3s ease;
                }
                .nav-link:hover::after {
                    width: 100%;
                }
                .mobile-menu {
                    transition: all 0.3s ease;
                    max-height: 0;
                    overflow: hidden;
                }
                .mobile-menu.open {
                    max-height: 500px;
                }
            </style>
            <nav class="bg-white shadow-sm">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex justify-between h-16">
                        <div class="flex items-center">
                            <a href="/" class="flex-shrink-0 flex items-center">
                                <span class="text-xl font-bold text-primary-500">FacadeForge Pro</span>
                            </a>
                            <div class="hidden md:ml-10 md:flex md:space-x-8">
                                <a href="/features" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium nav-link">Features</a>
                                <a href="/pricing" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium nav-link">Pricing</a>
                                <a href="/examples" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium nav-link">Examples</a>
                                <a href="/support" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium nav-link">Support</a>
                            </div>
                        </div>
                        <div class="hidden md:flex items-center space-x-4">
                            <a href="/login" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium nav-link">Login</a>
                            <a href="/signup" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Start Free Trial</a>
                        </div>
                        <div class="-mr-2 flex items-center md:hidden">
                            <button onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
                                <i data-feather="menu"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="mobile-menu" class="mobile-menu md:hidden bg-white shadow-lg">
                    <div class="pt-2 pb-3 space-y-1 px-4">
                        <a href="/features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Features</a>
                        <a href="/pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Pricing</a>
                        <a href="/examples" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Examples</a>
                        <a href="/support" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Support</a>
                        <div class="border-t border-gray-200 pt-4 pb-3">
                            <div class="space-y-1">
                                <a href="/login" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Login</a>
                                <a href="/signup" class="block w-full text-center px-3 py-2 rounded-md text-base font-medium text-white bg-primary-500 hover:bg-primary-600">Start Free Trial</a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);

// Global function for mobile menu toggle
function toggleMobileMenu() {
    const mobileMenu = document.getElementById('mobile-menu');
    mobileMenu.classList.toggle('open');
}