<?php
// --- CONFIGURAÇÕES ---
$api_key = 'ec8237f367023fbadd38ab6a1596b40c';

function isUrlOnline($url) {
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, true);
    curl_setopt($ch, CURLOPT_NOBODY, true);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
    
    curl_exec($ch);
    $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);
    
    return ($http_code >= 200 && $http_code < 300);
}

// --- VERIFICAÇÃO DO IFRAME ---
$is_iframe_online = isUrlOnline($iframe_url);

// --- LÓGICA DA API TMDB ---
$tmdb_url = "https://api.themoviedb.org/3/trending/movie/week?api_key=$api_key&language=pt-BR";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $tmdb_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);

$data = json_decode($response, true);
$movies = isset($data['results']) ? array_slice($data['results'], 0, 5) : [];

foreach ($movies as $key => $movie) {
    $movie_id = $movie['id'];
    $details_url = "https://api.themoviedb.org/3/movie/$movie_id?api_key=$api_key&language=pt-BR";

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $details_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $details_response = curl_exec($ch);
    curl_close($ch);

    $details = json_decode($details_response, true);
    $movies[$key]['release_date'] = $details['release_date'] ?? 'Data desconhecida';
    $movies[$key]['overview'] = $details['overview'] ?? 'Sem sinopse disponível';
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>flix-play.com/apks</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body, html {
      height: 100vh;
      width: 100vw;
      background: linear-gradient(to bottom, #002547, #1c2d3d 70%, #000000 100%);
      color: #fff;
      font-family: 'Arial', sans-serif;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .movie-container {
      position: relative;
      width: 600px;
      max-width: 95vw;
      height: 500px;
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.5s ease;
    }

    .movie-section {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 25px;
    }

    .movie-section.active {
      opacity: 1;
    }

    .poster-box {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #FFD700;
      border-radius: 12px;
      padding: 15px;
      background: linear-gradient(to bottom, #000000, #302f2f 50%, #000000 100%);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    .ranking-number {
      font-size: 6rem;
      font-weight: bold;
      color: #FFD700;
      text-align: center;
      width: 120px;
    }

    .poster img {
      max-height: 350px;
      border-radius: 8px;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      display: block;
    }

    .fade-in {
      animation: fadeIn 0.8s forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateX(15px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @media (max-width: 640px) {
      .movie-container {
        width: 90vw;
        max-width: 600px;
        height: auto;
      }
      .movie-section {
        gap: 15px;
      }
      .poster-box {
        gap: 20px;
        padding: 10px;
      }
      .poster img {
        max-height: 450px;
      }
      .ranking-number {
        font-size: 6rem;
        width: 100px;
      }
      .movie-details {
        max-width: 100%;
      }
      .movie-details div {
        padding: 4px;
      }
      .movie-details span {
        font-size: 0.7rem !important;
      }
    }

    @media (max-width: 400px) {
      .movie-container {
        max-width: 500px;
      }
      .poster-box {
        gap: 15px;
        padding: 8px;
      }
      .poster img {
        max-height: 350px;
      }
      .ranking-number {
        font-size: 4rem;
        width: 90px;
      }
      .movie-details div {
        padding: 2px;
      }
      .movie-details span {
        font-size: 0.65rem !important;
      }
    }
  </style>
</head>
<body>
  <main class="flex justify-center items-center h-full">
    <div class="movie-container <?php if (!$is_iframe_online) echo 'full-width'; ?>">
      <?php foreach ($movies as $index => $movie):
        $title = $movie['title'];
        $poster = 'https://image.tmdb.org/t/p/w300' . $movie['poster_path'];
        $nota = $movie['vote_average'];
        $sinopse = mb_strimwidth($movie['overview'], 0, 150, '...');
      ?>
      <section class="movie-section<?php echo $index === 0 ? ' active' : ''; ?>">
        <div class="poster-box">
          <div class="ranking-number"><?php echo $index + 1; ?></div>
          <div class="poster">
            <img src="<?php echo $poster; ?>" alt="Poster do filme <?php echo htmlspecialchars($title); ?>" loading="lazy">
          </div>
        </div>
        <div class="movie-details <?php if (!$is_iframe_online) echo 'max-w-md'; ?>">
          <div class="bg-gray-900 bg-opacity-80 p-1 rounded-lg border-l-4 border-yellow-400 mb-1 fade-in">
            <span class="text-xs font-bold text-yellow-400">🎬 <?php echo htmlspecialchars($title); ?></span>
          </div>
          <div class="bg-gray-900 bg-opacity-80 p-1 rounded-lg border-l-4 border-yellow-400 mb-1 fade-in">
            <span class="text-xs text-yellow-400">⭐ Nota <?php echo number_format($nota, 1, ',', '.'); ?> / 10.0</span>
          </div>
          <div class="bg-gray-900 bg-opacity-80 p-1 rounded-lg border-l-4 border-yellow-400 fade-in">
            <span class="text-xs text-gray-300">🎥 <?php echo htmlspecialchars($sinopse); ?></span>
          </div>
        </div>
      </section>
      <?php endforeach; ?>
    </div>
  </main>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const movieContainer = document.querySelector(".movie-container");
      const sections = document.querySelectorAll(".movie-section");
      if (sections.length === 0) return;

      let currentIndex = 0;

      function animateSection(index) {
        sections.forEach(sec => {
          sec.classList.remove("active");
          sec.querySelector(".poster img").style.opacity = 0;
          sec.querySelector(".ranking-number").style.opacity = 0;
          const spans = sec.querySelectorAll(".movie-details div");
          spans.forEach(s => {
            s.classList.remove("fade-in");
            s.style.opacity = 0;
          });
        });

        const section = sections[index];
        section.classList.add("active");

        const posterImg = section.querySelector(".poster img");
        const rankingNumber = section.querySelector(".ranking-number");
        const details = section.querySelectorAll(".movie-details div");

        setTimeout(() => {
          posterImg.style.opacity = 1;
          rankingNumber.style.opacity = 1;
        }, 150);
        details.forEach((detail, i) => {
          setTimeout(() => detail.classList.add("fade-in"), 1500 + i * 1000);
        });
      }

      function nextSection() {
        currentIndex = (currentIndex + 1) % sections.length;
        animateSection(currentIndex);
      }

      setTimeout(() => {
        movieContainer.style.display = "flex";
        animateSection(currentIndex);
        setInterval(nextSection, 12000);
      }, 2000);
    });
  </script>
</body>
</html>