class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    --nav-height: 5rem;
                    --nav-bg: rgba(255, 255, 255, 0.86);
                    --nav-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                    --nav-blur: blur(10px);
                }

                nav {
                    background: var(--nav-bg);
                    backdrop-filter: var(--nav-blur);
                    -webkit-backdrop-filter: var(--nav-blur);
                    box-shadow: var(--nav-shadow);
                    position: sticky;
                    top: 0;
                    z-index: 999;
                    height: var(--nav-height);
                    display: flex;
                    align-items: center;
                }

                .nav-container {
                    width: 100%;
                    max-width: 1440px;
                    margin: 0 auto;
                    padding: 0 2rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .logo {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    font-weight: 700;
                    font-size: 1.25rem;
                    text-decoration: none;
                    color: var(--color-dark);
                }

                .logo-icon {
                    width: 2.5rem;
                    height: 2.5rem;
                    background: var(--color-primary);
                    color: white;
                    border-radius: 0.5rem;
                    display: grid;
                    place-items: center;
                }

                .nav-links {
                    display: flex;
                    gap: 2rem;
                    align-items: center;
                }

                .nav-link {
                    position: relative;
                    color: var(--color-dark);
                    text-decoration: none;
                    font-weight: 500;
                    padding: 0.5rem 0;
                }

                .nav-link:hover {
                    color: var(--color-primary);
                }

                .nav-link::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 0%;
                    height: 2px;
                    background: var(--color-primary);
                    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
                }

                .nav-link:hover::after {
                    width: 100%;
                }

                .cta-button {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.75rem 1.5rem;
                    background: var(--color-primary);
                    color: white;
                    border-radius: 0.5rem;
                    font-weight: 600;
                    border: none;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

                .cta-button:hover {
                    background: var(--color-secondary);
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
                }

                .menu-toggle {
                    display: none;
                    background: none;
                    border: none;
                    cursor: pointer;
                    padding: 0.5rem;
                }

                @media (max-width: 768px) {
                    .nav-links {
                        display: none;
                    }

                    .menu-toggle {
                        display: block;
                    }
                }
            </style>
            <nav>
<div class="container mx-auto px-4">
                    <div class="flex justify-between items-center py-4">
                        <a href="/" class="flex items-center">
                            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-2">
                                <img src="/static/msc-logo.svg" alt="MSC Logo" class="w-6 h-6" />
                            </div>
                            <span class="text-xl font-bold text-gray-800">MSC CodeHive</span>
</a>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="#cursos" class="nav-link text-gray-600 hover:text-gray-900">Cursos</a>
                            <a href="#sobre" class="nav-link text-gray-600 hover:text-gray-900">Sobre</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Mentores</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Contato</a>
                            <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700">Inscreva-se</a>
                        </div>
                        
                        <button id="mobile-menu-button" class="md:hidden text-gray-700">
                            <i data-feather="menu" class="w-6 h-6"></i>
                        </button>
                    </div>
                    
                    <div id="mobile-menu" class="mobile-menu md:hidden">
                        <div class="pt-2 pb-4 space-y-2">
                            <a href="#cursos" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Cursos</a>
                            <a href="#sobre" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Sobre</a>
                            <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Mentores</a>
                            <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Contato</a>
                            <a href="#" class="block mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium text-center hover:bg-blue-700">Inscreva-se</a>
                        </div>
                    </div>
                </div>
            </nav>
        `;

        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');

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

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