<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TMDB Ultra Elite V4.1 - Future Edition</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --accent: #E50914;
            --glass: rgba(5, 5, 5, 0.78);
            --border-glass: rgba(255, 255, 255, 0.12);
            --star: #FFD700;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        
        body { background: #000; color: #fff; overflow: hidden; height: 100vh; }

        .showcase { position: relative; width: 100%; height: 100vh; background: #000; }

        .bg-image {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center 15%;
            transition: opacity 1.8s ease-in-out;
            opacity: 0;
            filter: brightness(0.4) contrast(1.1);
            transform: scale(1.1);
            will-change: opacity, transform;
        }

        .bg-image.visible { 
            opacity: 1; 
            transform: scale(1);
            transition: opacity 1.8s ease-in-out, transform 12s linear;
        }

        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, #000 10%, transparent 50%),
                        linear-gradient(90deg, rgba(0,0,0,0.9) 0%, transparent 70%);
            z-index: 1;
        }

        .details-panel {
            position: absolute;
            bottom: 8%;
            left: 5%;
            z-index: 10;
            max-width: 650px;
            padding: 30px;
            background: var(--glass);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid var(--border-glass);
            border-radius: 28px;
            transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
        }

        .details-panel.hidden { opacity: 0; transform: translateX(-30px); }

        .panel-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            margin-bottom: 10px;
            line-height: 1.1;
            text-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

        .panel-metadata {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1rem;
            color: rgba(255,255,255,0.8);
        }

        .metadata-rating {
            color: var(--star);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 12px;
            border-radius: 8px;
        }

        .category-label {
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 4px;
            font-size: 0.85rem;
            font-weight: 800;
            margin-bottom: 10px;
            display: block;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: var(--accent);
            width: 0%;
            z-index: 20;
            box-shadow: 0 0 15px var(--accent);
        }
    </style>
</head>
<body>
    <div class="showcase">
        <div id="bg1" class="bg-image visible"></div>
        <div id="bg2" class="bg-image"></div>
        <div class="overlay"></div>
        
        <div id="details-panel" class="details-panel">
            <span id="label-type" class="category-label">ESTREIA</span>
            <h1 id="panel-title" class="panel-title">Iniciando...</h1>
            <div id="panel-metadata" class="panel-metadata"></div>
        </div>
        
        <div id="loader" class="progress-bar"></div>
    </div>

    <script>
        const apiKey = '8c0267e0f9ec706130cc4ed8a91cb056';
        const imageBaseUrl = 'https://image.tmdb.org/t/p/original';
        
        let displayList = []; // Itens de 2025/2026/Lançamentos
        let futureStore = []; // Armazenado 2027+
        let current = 0;
        let showingBg1 = true;

        async function fetchAll() {
            try {
                // Busca Tendências, Animes, Kids e Novelas
                const endpoints = [
                    `https://api.themoviedb.org/3/trending/all/week?api_key=${apiKey}&language=pt-BR`,
                    `https://api.themoviedb.org/3/discover/tv?api_key=${apiKey}&language=pt-BR&with_genres=16`, // Animes
                    `https://api.themoviedb.org/3/discover/tv?api_key=${apiKey}&language=pt-BR&with_genres=10762`, // Kids
                    `https://api.themoviedb.org/3/discover/tv?api_key=${apiKey}&language=pt-BR&with_genres=10766`  // Novelas
                ];

                const results = await Promise.all(endpoints.map(url => fetch(url).then(r => r.json())));
                
                let rawData = [];
                results.forEach(data => {
                    rawData = [...rawData, ...data.results.filter(i => i.backdrop_path)];
                });

                // Lógica de Separação Temporal (2025, 2026 e Futuro)
                rawData.forEach(item => {
                    const dateStr = item.release_date || item.first_air_date || "2025";
                    const year = parseInt(dateStr.split('-')[0]);

                    if (year >= 2027) {
                        futureStore.push(item);
                    } else {
                        displayList.push(item);
                    }
                });

                // Se houver poucos itens de 2025/26, mesclamos os mais populares de outros anos
                displayList.sort(() => Math.random() - 0.5);
                rotate();
            } catch (e) {
                console.error("Erro na conexão TMDB");
            }
        }

        function rotate() {
            if (displayList.length === 0) return;
            
            const item = displayList[current];
            const panel = document.getElementById('details-panel');
            const loader = document.getElementById('loader');
            
            panel.classList.add('hidden');
            loader.style.transition = 'none';
            loader.style.width = '0%';

            setTimeout(() => {
                const nextBg = showingBg1 ? document.getElementById('bg2') : document.getElementById('bg1');
                const currBg = showingBg1 ? document.getElementById('bg1') : document.getElementById('bg2');

                nextBg.style.backgroundImage = `url(${imageBaseUrl}${item.backdrop_path})`;
                currBg.classList.remove('visible');
                nextBg.classList.add('visible');

                // Identificação de Categoria
                let typeLabel = "LANÇAMENTO";
                const g = item.genre_ids || [];
                if(g.includes(16)) typeLabel = "ANIME";
                else if(g.includes(10766)) typeLabel = "NOVELA";
                else if(g.includes(10762)) typeLabel = "KIDS";
                else if(item.media_type === 'tv' || item.first_air_date) typeLabel = "SÉRIE";
                else typeLabel = "FILME";

                const year = (item.release_date || item.first_air_date || '2025').slice(0, 4);

                document.getElementById('label-type').textContent = `${typeLabel} ${year}`;
                document.getElementById('panel-title').textContent = item.title || item.name;
                document.getElementById('panel-metadata').innerHTML = `
                    <div class="metadata-rating">
                        <i class="fa-solid fa-star"></i> ${item.vote_average.toFixed(1)}
                    </div>
                    <span>•</span>
                    <span>HD / 4K</span>
                    <span>•</span>
                    <span style="text-transform: uppercase; font-weight:800; font-size:0.8rem">${item.original_language}</span>
                `;

                panel.classList.remove('hidden');
                
                setTimeout(() => {
                    loader.style.transition = 'width 9.5s linear';
                    loader.style.width = '100%';
                }, 50);
                
                showingBg1 = !showingBg1;
                current = (current + 1) % displayList.length;
            }, 800);
        }

        setInterval(rotate, 10000);
        fetchAll();
    </script>
</body>
</html>