// Configuración mejorada
        const CONFIG = {
            API_KEY: '6b8e3eaa1a03ebb45642e9531d8a76d2',
            BASE_URL: 'https://api.themoviedb.org/3',
            IMAGE_BASE_URL: 'https://image.tmdb.org/t/p/original',
            LOGO_BASE_URL: 'https://image.tmdb.org/t/p/w500', // Mayor calidad para logos
            CHANGE_INTERVAL: 6000, // 8 segundos por película
            GRID_COLS: 5, // Más columnas para efecto de fragmentación más interesante
            GRID_ROWS: 5,
            ANIMATION_DURATION: 1500,
            PARTICLE_COUNT: 50,
            TRENDING_DAYS: 7 // Obtener tendencias de la semana
        };
        
        // Elementos del DOM
        const backgroundContainer = document.getElementById('background-container');
        const loadingElement = document.querySelector('.loading');
        const particlesContainer = document.getElementById('particles');
        
        // Variables de estado
        let currentIndex = 0;
        let mediaItems = [];
        let isAnimating = false;
        let particles = [];
        
        // Inicialización mejorada
        async function init() {
            try {
                createParticles();
                
                // 1. Obtener películas y series en tendencia
                const [moviesResponse, tvResponse] = await Promise.all([
                    fetch(`${CONFIG.BASE_URL}/trending/movie/week?api_key=${CONFIG.API_KEY}&language=es-ES`),
                    fetch(`${CONFIG.BASE_URL}/trending/tv/week?api_key=${CONFIG.API_KEY}&language=es-ES`)
                ]);
                
                const [moviesData, tvData] = await Promise.all([
                    moviesResponse.json(),
                    tvResponse.json()
                ]);
                
                // Combinar y mezclar películas y series
                const allItems = [...moviesData.results, ...tvData.results]
                    .filter(item => item.backdrop_path) // Solo items con backdrop
                    .sort(() => Math.random() - 0.5); // Mezclar aleatoriamente
                
                // Obtener detalles completos para los primeros 15 items
                mediaItems = await Promise.all(
                    allItems.slice(0, 15).map(async item => {
                        const isMovie = item.media_type === 'movie' || !item.media_type;
                        const detailsUrl = isMovie 
                            ? `${CONFIG.BASE_URL}/movie/${item.id}?api_key=${CONFIG.API_KEY}&language=es-ES` 
                            : `${CONFIG.BASE_URL}/tv/${item.id}?api_key=${CONFIG.API_KEY}&language=es-ES`;
                        
                        const imagesUrl = `${CONFIG.BASE_URL}/${isMovie ? 'movie' : 'tv'}/${item.id}/images?api_key=${CONFIG.API_KEY}`;
                        
                        const [detailsResponse, imagesResponse] = await Promise.all([
                            fetch(detailsUrl),
                            fetch(imagesUrl)
                        ]);
                        
                        const [detailsData, imagesData] = await Promise.all([
                            detailsResponse.json(),
                            imagesResponse.json()
                        ]);
                        
                        // Buscar logo en español o cualquier otro logo
                        const logosEs = imagesData.logos.filter(logo => logo.iso_639_1 === 'es');
                        const anyLogo = imagesData.logos.length > 0 ? imagesData.logos[0] : null;
                        
                        return {
                            type: isMovie ? 'movie' : 'tv',
                            backdrop: `${CONFIG.IMAGE_BASE_URL}${item.backdrop_path}`,
                            logo: logosEs.length > 0 
                                ? `${CONFIG.LOGO_BASE_URL}${logosEs[0].file_path}`
                                : anyLogo 
                                    ? `${CONFIG.LOGO_BASE_URL}${anyLogo.file_path}`
                                    : null,
                            title: isMovie ? detailsData.title : detailsData.name,
                            overview: detailsData.overview || "Descripción no disponible",
                            year: isMovie 
                                ? new Date(detailsData.release_date).getFullYear() 
                                : new Date(detailsData.first_air_date).getFullYear(),
                            rating: detailsData.vote_average ? Math.round(detailsData.vote_average * 10) / 10 : null
                        };
                    })
                );
                
                if (mediaItems.length === 0) {
                    throw new Error('No se encontraron elementos con imágenes de fondo');
                }
                
                // Precargar imágenes con barra de progreso
                await preloadImagesWithProgress();
                
                // Ocultar loading con efecto de desvanecimiento
                loadingElement.style.opacity = '0';
                setTimeout(() => {
                    loadingElement.style.display = 'none';
                }, 1000);
                
                // Comenzar animación
                startBackgroundRotation();
                
            } catch (error) {
                console.error('Error al cargar contenido:', error);
                loadingElement.innerHTML = `
                    <div style="text-align: center; padding: 20px;">
                        <div style="font-size: 48px; margin-bottom: 20px;">🎬</div>
                        <div>Error al cargar contenido. Verifica tu conexión o intenta más tarde.</div>
                        <button onclick="location.reload()" style="margin-top: 20px; padding: 10px 20px; background: var(--primary-color); border: none; border-radius: 5px; color: white; cursor: pointer;">Reintentar</button>
                    </div>
                `;
                showDefaultBackground();
            }
        }
        
        function showDefaultBackground() {
            backgroundContainer.innerHTML = `
                <div class="background-item active" style="background-image: url('https://image.tmdb.org/t/p/original/wwemzKWzjKYJFfCeiB57q3r4Bcm.png')"></div>
                <div class="logo-container active">
                    <img src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg" alt="TMDB Logo">
                    <h1 class="text-logo">CineMagic</h1>
                </div>
            `;
        }
        
        // Precargar imágenes con barra de progreso
        function preloadImagesWithProgress() {
            return new Promise((resolve) => {
                let loadedCount = 0;
                const totalItems = mediaItems.length * 2; // Backdrop + logo por item
                
                const updateProgress = () => {
                    loadedCount++;
                    const progress = Math.round((loadedCount / totalItems) * 100);
                    loadingElement.querySelector('div:last-child').textContent = 
                        `Cargando... ${progress}%`;
                    
                    if (loadedCount === totalItems) {
                        resolve();
                    }
                };
                
                mediaItems.forEach(item => {
                    // Precargar backdrop
                    const bgImg = new Image();
                    bgImg.src = item.backdrop;
                    bgImg.onload = updateProgress;
                    bgImg.onerror = () => {
                        item.backdrop = 'https://image.tmdb.org/t/p/original/wwemzKWzjKYJFfCeiB57q3r4Bcm.png';
                        updateProgress();
                    };
                    
                    // Precargar logo (si existe)
                    if (item.logo) {
                        const logoImg = new Image();
                        logoImg.src = item.logo;
                        logoImg.onload = updateProgress;
                        logoImg.onerror = () => {
                            item.logo = null;
                            updateProgress();
                        };
                    } else {
                        updateProgress(); // No hay logo para precargar
                    }
                });
            });
        }
        
        // Rotación de fondos mejorada
        function startBackgroundRotation() {
            // Mostrar primera imagen
            showCurrentBackground();
            
            // Configurar intervalo para cambiar imágenes
            setInterval(() => {
                if (!isAnimating) {
                    showNextBackground();
                }
            }, CONFIG.CHANGE_INTERVAL);
        }
        
        function showNextBackground() {
            currentIndex = (currentIndex + 1) % mediaItems.length;
            startPixelExplosionAnimation();
        }
        
        function showCurrentBackground() {
            // Limpiar contenedor
            backgroundContainer.innerHTML = '';
            
            const currentItem = mediaItems[currentIndex];
            
            // Crear elemento de fondo
            const bgItem = document.createElement('div');
            bgItem.className = 'background-item';
            bgItem.style.backgroundImage = `url(${currentItem.backdrop})`;
            backgroundContainer.appendChild(bgItem);
            
            // Forzar reflow para activar la transición
            void bgItem.offsetWidth;
            bgItem.classList.add('active');
            
            // Crear contenedor de logo
            const logoContainer = document.createElement('div');
            logoContainer.className = 'logo-container';
            
            // Si hay logo, mostrarlo, sino mostrar texto con efecto
            if (currentItem.logo) {
                const logoImg = document.createElement('img');
                logoImg.src = currentItem.logo;
                logoImg.alt = `${currentItem.title} logo`;
                logoImg.loading = 'lazy';
                logoContainer.appendChild(logoImg);
            } else {
                const textLogo = document.createElement('h1');
                textLogo.className = 'text-logo';
                textLogo.textContent = currentItem.title;
                logoContainer.appendChild(textLogo);
            }
            
            backgroundContainer.appendChild(logoContainer);
            
            // Crear información de la película/serie
           /* const movieInfo = document.createElement('div');
            movieInfo.className = 'movie-info';
            
            const titleElement = document.createElement('h2');
            titleElement.className = 'movie-title';
            titleElement.textContent = `${currentItem.title} (${currentItem.year})`;
            
            const overviewElement = document.createElement('p');
            overviewElement.className = 'movie-overview';
            overviewElement.textContent = currentItem.overview;
            
            movieInfo.appendChild(titleElement);
            movieInfo.appendChild(overviewElement);
            backgroundContainer.appendChild(movieInfo);
            
            // Activar elementos con retraso escalonado para mejor efecto
            setTimeout(() => {
                logoContainer.classList.add('active');
                
                setTimeout(() => {
                    movieInfo.classList.add('active');
                }, 500);
            }, 800);*/
            // Versión simplificada sin la info de película:
setTimeout(() => {
    logoContainer.classList.add('active');
}, 800);
        }
        
        // Efecto de explosión de píxeles mejorado
        function startPixelExplosionAnimation() {
            if (isAnimating) return;
            isAnimating = true;
            
            const currentBg = backgroundContainer.querySelector('.background-item.active');
            const currentLogo = backgroundContainer.querySelector('.logo-container');
            /*const currentInfo = backgroundContainer.querySelector('.movie-info');*/
            
            if (!currentBg) return;
            
            // Ocultar elementos actuales
            if (currentLogo) currentLogo.classList.remove('active');
            /*if (currentInfo) currentInfo.classList.remove('active');*/
            
            // Calcular índice siguiente
            const nextIndex = (currentIndex + 1) % mediaItems.length;
            const nextItem = mediaItems[nextIndex];
            
            const rect = currentBg.getBoundingClientRect();
            const width = rect.width;
            const height = rect.height;
            const fragmentWidth = width / CONFIG.GRID_COLS;
            const fragmentHeight = height / CONFIG.GRID_ROWS;
            
            // Crear fragmentos de la imagen actual (para explosión)
            for (let row = 0; row < CONFIG.GRID_ROWS; row++) {
                for (let col = 0; col < CONFIG.GRID_COLS; col++) {
                    const fragment = document.createElement('div');
                    fragment.className = 'fragment';
                    
                    const left = col * fragmentWidth;
                    const top = row * fragmentHeight;
                    
                    fragment.style.width = `${fragmentWidth}px`;
                    fragment.style.height = `${fragmentHeight}px`;
                    fragment.style.left = `${left}px`;
                    fragment.style.top = `${top}px`;
                    
                    // Usar imagen actual para los fragmentos
                    fragment.style.backgroundImage = currentBg.style.backgroundImage;
                    fragment.style.backgroundPosition = `-${left}px -${top}px`;
                    fragment.style.backgroundSize = `${width}px ${height}px`;
                    
                    fragment.style.opacity = '1';
                    
                    backgroundContainer.appendChild(fragment);
                }
            }
            
            // Ocultar la imagen actual
            currentBg.classList.remove('active');
            
            // Animar fragmentos (explosión)
            animateFragmentsOut(() => {
                // Cuando termine la animación de explosión:
                // actualizar el índice, mostrar la imagen y logo definitivos y eliminar fragmentos
                currentIndex = nextIndex;
                
                // Mostrar la imagen y logo definitivos
                showCurrentBackground();
                
                // Eliminar fragmentos después de mostrar la imagen
                const fragments = document.querySelectorAll('.fragment');
                fragments.forEach(frag => frag.remove());
                
                isAnimating = false;
            });
        }
        
        function animateFragmentsOut(onComplete) {
            const fragments = document.querySelectorAll('.fragment');
            
            fragments.forEach((fragment, index) => {
                // Dirección aleatoria para la explosión
                const angle = Math.random() * Math.PI * 2;
                const distance = 100 + Math.random() * 300;
                
                const left = parseFloat(fragment.style.left);
                const top = parseFloat(fragment.style.top);
                
                const targetX = left + Math.cos(angle) * distance;
                const targetY = top + Math.sin(angle) * distance;
                
                const rotation = (Math.random() - 0.5) * 720;
                const scale = 0.1 + Math.random() * 0.5;
                
                // Retraso escalonado para efecto de onda
                const delay = index * 20 + Math.random() * 50;
                
                setTimeout(() => {
                    fragment.style.transition = `transform ${CONFIG.ANIMATION_DURATION}ms cubic-bezier(0.5, 1, 0.89, 1), 
                                              opacity ${CONFIG.ANIMATION_DURATION}ms ease-out, 
                                              filter ${CONFIG.ANIMATION_DURATION}ms ease-out`;
                    fragment.style.transform = `translate(${targetX - left}px, ${targetY - top}px) 
                                               rotate(${rotation}deg) 
                                               scale(${scale})`;
                    fragment.style.opacity = '0';
                    fragment.style.filter = 'brightness(2) blur(2px)';
                }, delay);
            });
            
            // Esperar el tiempo de animación y ejecutar callback
            setTimeout(() => {
                if (onComplete) onComplete();
            }, CONFIG.ANIMATION_DURATION + 300);
        }
        
        // Crear partículas flotantes para efecto atmosférico
        function createParticles() {
            particlesContainer.innerHTML = '';
            particles = [];
            
            for (let i = 0; i < CONFIG.PARTICLE_COUNT; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // Tamaño aleatorio entre 1px y 3px
                const size = 1 + Math.random() * 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // Posición inicial aleatoria
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                // Opacidad aleatoria
                particle.style.opacity = 0.2 + Math.random() * 0.5;
                
                particlesContainer.appendChild(particle);
                particles.push({
                    element: particle,
                    x: parseFloat(particle.style.left),
                    y: parseFloat(particle.style.top),
                    speedX: (Math.random() - 0.5) * 0.2,
                    speedY: (Math.random() - 0.5) * 0.2,
                    size: size
                });
            }
            
            animateParticles();
        }
        
        function animateParticles() {
            particles.forEach(particle => {
                // Mover partícula
                particle.x += particle.speedX;
                particle.y += particle.speedY;
                
                // Rebotar en los bordes
                if (particle.x < 0 || particle.x > 100) {
                    particle.speedX *= -1;
                }
                
                if (particle.y < 0 || particle.y > 100) {
                    particle.speedY *= -1;
                }
                
                // Aplicar movimiento
                particle.element.style.left = `${particle.x}%`;
                particle.element.style.top = `${particle.y}%`;
            });
            
            requestAnimationFrame(animateParticles);
        }
        
        // Iniciar la aplicación
        document.addEventListener('DOMContentLoaded', init);
        
        // Manejar errores no capturados
        window.addEventListener('error', (e) => {
            console.error('Error no capturado:', e.error);
            loadingElement.innerHTML = `
                <div style="text-align: center; padding: 20px;">
                    <div style="font-size: 48px; margin-bottom: 20px;">😕</div>
                    <div>Algo salió mal. Por favor, recarga la página.</div>
                    <button onclick="location.reload()" style="margin-top: 20px; padding: 10px 20px; background: var(--primary-color); border: none; border-radius: 5px; color: white; cursor: pointer;">Recargar</button>
                </div>
            `;
        });
   