<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner TMDB Premium</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            height: 100vh;
            overflow: hidden;
            font-family: 'Roboto', sans-serif;
            transition: background-image 1s ease-in-out; /* Efeito de transição suave no fundo */
            background-size: cover;
            background-position: center;
        }

        .overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
            z-index: 1;
        }

        /* Container ajustado para ficar acima dos botões centrais */
        .info-container {
            position: fixed;
            top: 15%; /* Ajustado para não bater nos botões vermelhos */
            left: 5%;
            z-index: 10;
            max-width: 50%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out; /* Fade in dos textos */
        }

        .info-container.visible { opacity: 1; }

        /* Etiqueta de Tipo (Filme/Série) */
        .content-type {
            background-color: #e50914; /* Vermelho Netflix */
            color: white;
            padding: 4px 12px;
            font-size: 0.9vw;
            font-weight: bold;
            border-radius: 4px;
            text-transform: uppercase;
            margin-bottom: 15px;
            display: inline-block;
        }

        .movie-info {
            margin: 0;
            color: #fff;
            font-size: 3vw;
            font-weight: 900;
            text-transform: uppercase;
            text-shadow: 2px 2px 15px rgba(0,0,0,1);
        }

        .subtitial-info {
            margin: 10px 0;
            color: #ccc;
            font-size: 1.1vw;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 1px 1px 5px rgba(0,0,0,1);
        }

        .rating-box {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="overlay">
        <div class="info-container" id="movie-content">
            <div id="type-badge" class="content-type">Filme</div>
            <h1 id="movie-title" class="movie-info"></h1>
            <p id="msubtitial" class="subtitial-info"></p>
            <div id="stars-container" class="rating-box"></div>
        </div>
    </div>

    <script>
        const apiKey = 'b9c0d10b7c5c7a38070e6117ce9a3b82';
        let mediaList = [];
        let currentIndex = 0;

        async function init() {
            try {
                // Busca Filmes e Séries Populares para alternar
                const [movies, shows] = await Promise.all([
                    fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=pt-BR&page=1`).then(r => r.json()),
                    fetch(`https://api.themoviedb.org/3/tv/popular?api_key=${apiKey}&language=pt-BR&page=1`).then(r => r.json())
                ]);

                // Une as duas listas identificando o tipo
                mediaList = [
                    ...movies.results.map(m => ({ ...m, media_type: 'movie' })),
                    ...shows.results.map(s => ({ ...s, media_type: 'tv' }))
                ].sort(() => Math.random() - 0.5); // Embaralha

                updateDisplay();
                setInterval(updateDisplay, 12000); 
            } catch (e) { console.error(e); }
        }

        function updateDisplay() {
            const container = document.getElementById('movie-content');
            container.classList.remove('visible'); // Inicia o Fade Out

            setTimeout(async () => {
                const item = mediaList[currentIndex];
                const isMovie = item.media_type === 'movie';
                
                // Busca detalhes específicos (filme ou série)
                const res = await fetch(`https://api.themoviedb.org/3/${item.media_type}/${item.id}?api_key=${apiKey}&language=pt-BR`);
                const data = await res.json();

                // Atualiza Textos
                const title = isMovie ? data.title : data.name;
                const date = isMovie ? data.release_date : data.first_air_date;
                const year = new Date(date).getFullYear();
                const runtime = isMovie ? `${data.runtime}m` : `${data.number_of_seasons} Temporadas`;

                document.getElementById('type-badge').innerText = isMovie ? "Filme" : "Série";
                document.getElementById('movie-title').innerText = `${title} (${year})`;
                document.getElementById('msubtitial').innerText = `${year} | ${data.genres.slice(0,2).map(g => g.name).join(' / ')} | ${runtime}`;
                
                // Estrelas
                renderStars(data.vote_average);

                // Troca o fundo
                document.body.style.backgroundImage = `url('https://image.tmdb.org/t/p/original${data.backdrop_path}')`;
                
                container.classList.add('visible'); // Inicia o Fade In
                currentIndex = (currentIndex + 1) % mediaList.length;
            }, 800);
        }

        function renderStars(rating) {
            const container = document.getElementById('stars-container');
            let html = "";
            const activeStars = Math.round(rating);
            for (let i = 1; i <= 10; i++) {
                html += i <= activeStars ? "⭐" : "<span style='filter:grayscale(1);opacity:0.3'>⭐</span>";
            }
            container.innerHTML = `<div style="color:white; font-size:1.1vw;">${html} (${rating.toFixed(1)})</div>`;
        }

        init();
    </script>
</body>
</html>
