components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                nav {
                    background: rgba(255, 255, 255, 0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                }
                .nav-link {
                    transition: all 0.3s ease;
                    position: relative;
                }
                .nav-link:hover {
                    color: #0ea5e9;
                }
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -2px;
                    left: 0;
                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
                    transition: width 0.3s ease;
                }
                .nav-link:hover::after {
                    width: 100%;
                }
            </style>
            <nav class="sticky top-0 z-50">
                <div class="container mx-auto px-4 py-4">
                    <div class="flex items-center justify-between">
                        <!-- Logo -->
                        <div class="flex items-center space-x-2">
                            <i data-feather="music" class="text-primary-600"></i>
                            <span class="text-xl font-bold bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
                                TuneTok Takedown
                            </span>
                        </div>

                        <!-- Navigation Links -->
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="#" class="nav-link text-gray-700 font-medium">Inicio</a>
                            <a href="#how-it-works" class="nav-link text-gray-700 font-medium">Cómo funciona</a>
                            <a href="#" class="nav-link text-gray-700 font-medium">FAQ</a>
                        </div>

                        <!-- Mobile menu button -->
                        <button id="mobileMenuButton" class="md:hidden text-gray-700">
                            <i data-feather="menu"></i>
                        </button>
                    </div>

                    <!-- Mobile Menu -->
                    <div id="mobileMenu" class="hidden md:hidden mt-4 space-y-4">
                            <a href="#" class="block nav-link text-gray-700 font-medium">Inicio</a>
                            <a href="#how-it-works" class="block nav-link text-gray-700 font-medium">Cómo funciona</a>
                            <a href="#" class="block nav-link text-gray-700 font-medium">FAQ</a>
                    </div>
                </div>
            </nav>
        `;

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

        mobileMenuButton.addEventListener('click', () => {
            const isHidden = mobileMenu.classList.contains('hidden');
            if (isHidden) {
                mobileMenu.classList.remove('hidden');
                mobileMenuButton.innerHTML = '<i data-feather="x"></i>';
            } else {
                mobileMenu.classList.add('hidden');
                mobileMenuButton.innerHTML = '<i data-feather="menu"></i>';
            }
            feather.replace();
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', (event) => {
            if (!this.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
                mobileMenuButton.innerHTML = '<i data-feather="menu"></i>';
                feather.replace();
            }
        });
    }
}

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