class AppHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                header {
                    background: linear-gradient(180deg, rgba(17, 24, 39, 1) 0%, rgba(17, 24, 39, 0.95) 100%);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                }

                .search-container {
                    position: relative;
                    max-width: 500px;
                    width: 100%;
                }

                .search-input {
                    width: 100%;
                    padding: 10px 40px 10px 16px;
                    background: rgba(255, 255, 255, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-radius: 12px;
                    color: white;
                    font-size: 14px;
                    transition: all 0.3s ease;
                }

                .search-input:focus {
                    outline: none;
                    background: rgba(255, 255, 255, 0.15);
                    border-color: #8b5cf6;
                    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
                }

                .search-input::placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }

                .search-button {
                    position: absolute;
                    right: 4px;
                    top: 50%;
                    transform: translateY(-50%);
                    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
                    border: none;
                    padding: 6px 12px;
                    border-radius: 8px;
                    color: white;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }

                .search-button:hover {
                    transform: translateY(-50%) scale(1.05);
                }

                .nav-link {
                    color: rgba(255, 255, 255, 0.8);
                    text-decoration: none;
                    font-weight: 500;
                    padding: 8px 16px;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                    position: relative;
                }

                .nav-link:hover {
                    color: white;
                    background: rgba(139, 92, 246, 0.1);
                }

                .nav-link.active {
                    color: #8b5cf6;
                    background: rgba(139, 92, 246, 0.1);
                }

                .mobile-menu-button {
                    display: none;
                    background: none;
                    border: none;
                    color: white;
                    cursor: pointer;
                    padding: 8px;
                }

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

                    .mobile-menu-button {
                        display: block;
                    }

                    .mobile-menu {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        right: 0;
                        background: rgba(17, 24, 39, 0.98);
                        backdrop-filter: blur(10px);
                        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                        padding: 16px;
                    }

                    .mobile-menu.active {
                        display: block;
                    }
                }
            </style>
            <header class="sticky top-0 z-50">
                <div class="container mx-auto px-4 py-4">
                    <div class="flex items-center justify-between">
                        <!-- Logo -->
                        <a href="#" class="flex items-center gap-2 text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                            </svg>
                            MangaFlow
                        </a>

                        <!-- Search Bar -->
                        <div class="search-container hidden md:block">
                            <input type="text" placeholder="Buscar manga, cómic o autor..." class="search-input">
                            <button class="search-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <path d="m21 21-4.35-4.35"></path>
                                </svg>
                            </button>
                        </div>

                        <!-- Desktop Navigation -->
                        <nav class="desktop-nav flex items-center gap-6">
                            <a href="#trending" class="nav-link active">Inicio</a>
                            <a href="#library" class="nav-link">Biblioteca</a>
                            <a href="#lists" class="nav-link">Listas</a>
                            <a href="#blog" class="nav-link">Blog</a>
                            <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 py-2 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105">
                                Iniciar Sesión
                            </button>
                        </nav>

                        <!-- Mobile Menu Button -->
                        <button class="mobile-menu-button" onclick="toggleMobileMenu()">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="3" y1="12" x2="21" y2="12"></line>
                                <line x1="3" y1="6" x2="21" y2="6"></line>
                                <line x1="3" y1="18" x2="21" y2="18"></line>
                            </svg>
                        </button>

                        <!-- Mobile Menu -->
                        <div class="mobile-menu" id="mobileMenu">
                            <div class="flex flex-col gap-4">
                                <input type="text" placeholder="Buscar..." class="search-input">
                                <a href="#trending" class="nav-link">Inicio</a>
                                <a href="#library" class="nav-link">Biblioteca</a>
                                <a href="#lists" class="nav-link">Listas</a>
                                <a href="#blog" class="nav-link">Blog</a>
                                <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 py-2 rounded-lg font-semibold">
                                    Iniciar Sesión
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        `;
    }
}

customElements.define('app-header', AppHeader);

// Mobile menu toggle function
function toggleMobileMenu() {
    const mobileMenu = document.getElementById('mobileMenu');
    if (mobileMenu) {
        mobileMenu.classList.toggle('active');
    }
}