<?php
session_start();

require "Auth/db.php";

/* TOTAL COUNTS */
$movieCount = $pdo->query("
    SELECT COUNT(*) 
    FROM media_movies
")->fetchColumn();

$seriesCount = $pdo->query("
    SELECT COUNT(*) 
    FROM media_series
")->fetchColumn();

$ppvCount = $pdo->query("
    SELECT COUNT(*) 
    FROM media_ppv
")->fetchColumn();

$isLoggedIn = isset($_SESSION["user"]);

if (isset($_SESSION["user"])) {
    $stmt = $pdo->prepare("SELECT is_banned FROM users WHERE id = ?");
    $stmt->execute([$_SESSION["user"]["id"]]);

    $checkUser = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!empty($checkUser["is_banned"])) {
        session_destroy();
        header("Location: /Banned.php");
        exit;
    }
}

$stmt = $pdo->query("
    SELECT *
    FROM media_movies
    ORDER BY id DESC
");

$movies = $stmt->fetchAll(PDO::FETCH_ASSOC);

$heroStmt = $pdo->query("
    SELECT m.*
    FROM hero_movies h
    INNER JOIN media_movies m ON h.movie_id = m.id
    ORDER BY h.slot ASC
");

$heroMovies = $heroStmt->fetchAll(PDO::FETCH_ASSOC);

/* TOP 10 */
$top10MoviesStmt = $pdo->query("
    SELECT
        id,
        title,
        banner,
        rating,
        release_year,
        top10_position
    FROM media_movies
    WHERE top10_position IS NOT NULL
");

$top10Movies = $top10MoviesStmt->fetchAll(PDO::FETCH_ASSOC);

$top10SeriesStmt = $pdo->query("
    SELECT
        id,
        title,
        banner,
        rating,
        release_year,
        top10_position
    FROM media_series
    WHERE top10_position IS NOT NULL
");

$top10Series = $top10SeriesStmt->fetchAll(PDO::FETCH_ASSOC);

$top10Items = [];

/* MOVIES */
foreach ($top10Movies as $movie) {

    $top10Items[] = [
        "title" => $movie["title"],
        "rating" => $movie["rating"],
        "year" => $movie["release_year"],
        "type" => "Movie",
        "position" => (int)$movie["top10_position"],
        "banner" => $movie["banner"]
    ];
}

/* TV SHOWS */
foreach ($top10Series as $show) {

    $top10Items[] = [
        "title" => $show["title"],
        "rating" => $show["rating"],
        "year" => $show["release_year"],
        "type" => "TV Show",
        "position" => (int)$show["top10_position"],
        "banner" => $show["banner"]
    ];
}

/* SORT */
usort($top10Items, function ($a, $b) {
    return $a["position"] <=> $b["position"];
});

function indexYoutubeEmbedUrl($url) {
    if (!$url) return "";

    preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/', $url, $matches);

    if (empty($matches[1])) return "";

    $id = $matches[1];

    return "https://www.youtube.com/embed/" . $id .
        "?autoplay=1&mute=1&controls=0&loop=1&playlist=" . $id .
        "&modestbranding=1&showinfo=0";
}

function youtubeEmbedUrl($url) {
    if (!$url) return "";

    preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&?]+)/', $url, $matches);

    if (empty($matches[1])) return "";

    $id = $matches[1];

    return "https://www.youtube.com/embed/" . $id .
        "?autoplay=1&mute=1&controls=0&loop=1&playlist=" . $id .
        "&playsinline=1&modestbranding=1&rel=0";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home - Rewire</title>
<link rel="icon" type="image/png" href="Assets/Logo.png">

<script src="https://unpkg.com/lucide@latest"></script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background: #050505;
    color: white;
    overflow-x: hidden;
}

/* HEADER */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}

.logo-img {
    height: 70px;
}

.right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav {
    display: flex;
    gap: 25px;
    font-size: 0.95rem;
}

.nav a {
    text-decoration: none;
    color: #ccc;
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #00c2ff;
    transition: 0.3s;
}

.nav a:hover::after {
    width: 100%;
}

.icon {
    width: 22px;
    height: 22px;
    opacity: 0.85;
    cursor: pointer;
    transition: 0.3s;
}

.icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* HERO */
.hero {
    height: 82vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 60px;
    background: #050505;
    margin-bottom: -120px;
    padding-bottom: 120px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-bg.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(5,5,5,0.15) 0%,
            rgba(5,5,5,0.05) 35%,
            rgba(5,5,5,0.65) 70%,
            #050505 100%
        ),
        linear-gradient(to right,
            rgba(5,5,5,0.85) 0%,
            rgba(5,5,5,0.45) 30%,
            rgba(5,5,5,0.08) 65%,
            rgba(5,5,5,0.03) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 580px;
}

.title {
    font-size: 3.2rem;
    font-weight: 800;
}

.meta {
    margin: 12px 0;
    color: #aaa;
    font-size: 0.9rem;
}

.desc {
    margin: 15px 0;
    line-height: 1.6;
    color: #ddd;
}

.buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

/* HERO BUTTONS */
.btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 25px;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* PLAY BUTTON */
.play {
    background: white;
    color: black;
    box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}

.play:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255,255,255,0.35);
    background: #f2f2f2;
}

/* INFO BUTTON */
.info {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
}

.info:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(255,255,255,0.2);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* SECTIONS */
.section {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    padding: 35px 40px 25px;
    background: transparent;
}

.section:first-of-type {
    padding-top: 0;
}

.section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    margin-bottom: 18px;
}

.accent {
    width: 4px;
    height: 20px;
    background: #00c2ff;
    display: inline-block;
}

.row-wrap {
    position: relative;
}

.row {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
}

.row::-webkit-scrollbar {
    display: none;
}

.movie-item {
    min-width: 180px;
}

.card {
    width: 180px;
    height: 250px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #151515;
}

.card:hover {
    transform: scale(1.06);
}

.rank {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 48px;
    background: #00c2ff;
    color: #001014;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4;
    border-radius: 0 0 7px 0;
}

.rank::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    border-left: 21px solid #00c2ff;
    border-right: 21px solid #00c2ff;
    border-bottom: 8px solid transparent;
}

.card-info {
    margin-top: 10px;
    font-size: 0.78rem;
    color: #aaa;
}

.card-title {
    color: white;
    font-weight: bold;
    margin-bottom: 4px;
}

.card-meta {
    font-size: 0.72rem;
    color: #888;
}

.star {
    color: #00c2ff;
}

.move-btn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 45px;
    height: 70px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    color: white;
    cursor: pointer;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
}

.move-btn:hover {
    background: rgba(0,194,255,0.85);
    color: #001014;
}

.move-left {
    left: -20px;
}

.move-right {
    right: -20px;
}

/* SEARCH MODAL */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.search-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* BACKDROP */
.search-blur {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.4s ease, opacity 0.4s;
    opacity: 0;
}

.search-modal.active .search-blur {
    backdrop-filter: blur(10px);
    opacity: 1;
}

/* SEARCH BOX ANIMATION */
.search-box {
    position: relative;
    z-index: 2;
    width: 620px;
    max-width: 92%;

    transform: translateY(40px) scale(0.95);
    opacity: 0;

    transition: all 0.35s cubic-bezier(.2,.8,.2,1);
}

.search-modal.active .search-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.search-box {
    position: relative;
    z-index: 2;
    width: 620px;
    max-width: 92%;
}

.search-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.search-top h2 {
    margin-right: auto;
    font-size: 1.45rem;
}

/* CUSTOM DROPDOWN */
.custom-select {
    position: relative;
    width: 155px;
}

.select-btn {
    width: 100%;
    height: 42px;
    background: #101216;
    color: white;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.select-menu {
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    background: #101216;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px;
    overflow: hidden;
    display: none;
    z-index: 10;
}

.custom-select.active .select-menu {
    display: block;
}

.select-menu div {
    padding: 12px 14px;
    cursor: pointer;
    font-size: 0.9rem;
}

.select-menu div:hover {
    background: #00c2ff;
    color: #001014;
}

.close-search {
    width: 42px;
    height: 42px;
    background: #101216;
    color: white;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px;
    cursor: pointer;
}

.search-input-wrap {
    height: 54px;
    background: #080a0d;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 13px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}

.search-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 1rem;
}

.clear-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
}

.search-results {
    margin-top: 14px;
    background: rgba(5,5,5,0.94);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 12px;
    display: none;
}

.search-results.active {
    display: block;
}

.result-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    transition: 0.25s;
    position: relative;
}

.result-card:hover {
    background: rgba(255,255,255,0.06);
}

.result-card img {
    width: 58px;
    height: 82px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
    background: #111;
}

.result-info {
    flex: 1;
}

.result-info h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.result-info p {
    font-size: 0.82rem;
    color: #8c95a3;
}

.result-toggle {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
}

.result-actions button {
    border: none;
    border-radius: 22px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.25s ease;
}

/* WATCH BUTTON */
.result-actions button:first-child {
    background: white;
    color: black;
    box-shadow: 0 4px 12px rgba(255,255,255,0.2);
}

.result-actions button:first-child:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 22px rgba(255,255,255,0.35);
}

/* DETAILS BUTTON */
.result-actions button:last-child {
    background: rgba(255,255,255,0.13);
    color: white;
}

.result-actions button:last-child:hover {
    transform: translateY(-2px) scale(1.06);
    background: rgba(255,255,255,0.25);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.result-actions {
    display: none;
    gap: 10px;
    margin-top: 12px;
}

.result-card.open .result-actions {
    display: flex;
}

/* PROFILE MODAL */
.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.35s ease;
}

.profile-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.profile-blur {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(10px);
}

.profile-box {
    position: relative;
    z-index: 2;
    width: 430px;
    max-width: 92%;
    background: rgba(8,10,13,0.95);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    padding: 35px;
    text-align: center;
    transform: translateY(35px) scale(0.95);
    transition: 0.35s ease;
}

.profile-modal.active .profile-box {
    transform: translateY(0) scale(1);
}

.profile-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #101216;
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
    width: 36px;
    height: 36px;
    border-radius: 9px;
    cursor: pointer;
}

.profile-logo {
    height: 70px;
    margin-bottom: 15px;
}

.profile-box h2 {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.profile-sub {
    color: #9aa3ad;
    font-size: 0.9rem;
    margin-bottom: 22px;
}

.profile-box input {
    width: 100%;
    height: 48px;
    background: #080a0d;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    color: white;
    padding: 0 15px;
    outline: none;
    margin-bottom: 14px;
}

.profile-btn {
    width: 100%;
    height: 48px;
    background: white;
    color: black;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s ease;
}

.profile-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(255,255,255,0.3);
}

.profile-tabs {
    display: flex;
    gap: 35px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.profile-tab {
    background: none;
    border: none;
    color: #8c95a3;
    font-weight: bold;
    padding-bottom: 14px;
    cursor: pointer;
    position: relative;
}

.profile-tab.active {
    color: white;
}

.profile-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #00c2ff;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.discord-btn {
    margin-top: 14px;
    width: 100%;
    height: 48px;
    border-radius: 25px;
    background: #5865F2;
    color: white;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
}

.discord-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(88,101,242,0.4);
}

.demo-code {
    margin-top: 12px;
    color: #00c2ff;
    font-size: 0.85rem;
}

.email-preview {
    margin-top: 25px;
}

.email-card {
    background:
        linear-gradient(135deg, rgba(0,194,255,0.18), rgba(255,255,255,0.04)),
        #050505;
    border: 1px solid rgba(0,194,255,0.35);
    border-radius: 16px;
    padding: 25px;
}

.email-card img {
    height: 55px;
    margin-bottom: 10px;
}

.email-card h1 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.email-card p {
    color: #ccc;
}

.email-code {
    margin: 18px auto;
    font-size: 2rem;
    letter-spacing: 8px;
    font-weight: bold;
    color: #00c2ff;
}

.email-card small {
    color: #888;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: bold;
}

.user-menu a {
    color: #00c2ff;
    text-decoration: none;
    font-size: 0.9rem;
}

.profile-dropdown {
    position: relative;
    cursor: pointer;
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.25);
    transition: 0.25s;
}

.profile-avatar:hover {
    transform: scale(1.08);
    border-color: #00c2ff;
}

.profile-menu {
    position: absolute;
    top: 48px;
    right: 0;
    width: 170px;
    background: rgba(8,10,13,0.96);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 10px;
    display: none;
    box-shadow: 0 12px 35px rgba(0,0,0,0.55);
}

.profile-menu.active {
    display: block;
}

.profile-menu-name {
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.profile-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    color: #00c2ff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
}

.profile-menu a:hover {
    background: rgba(0,194,255,0.12);
}

.browse-dropdown {
    position: relative;
}

.browse-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.browse-btn:hover {
    color: white;
}

.browse-btn i {
    width: 16px;
    height: 16px;
}

.browse-menu a {
    display: block;
    padding: 10px;
    border-radius: 8px;
    color: #c8d0d8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
}

.browse-menu a:hover {
    background: rgba(0,194,255,0.12);
    color: #00c2ff;
}

.result-card {
    text-decoration: none;
    color: inherit;
}

.nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 0.95rem;
}

.btn,
.btn:visited,
.btn:hover,
.btn:active,
.play,
.info {
    text-decoration: none;
}

.hero-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #050505;
    border: 1px solid rgba(0,194,255,0.45);
    cursor: pointer;
    position: relative;
}

.hero-checkbox:checked {
    background: #00c2ff;
    box-shadow: 0 0 14px rgba(0,194,255,0.45);
}

.hero-checkbox:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: #001014;
    font-weight: 900;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 67.5vw;
    min-width: 177.77vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.home-btn {
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.25s ease;
}

.home-btn i {
    width: 22px;
    height: 22px;
}

.home-btn:hover {
    color: #00c2ff;
    transform: scale(1.08);
}

.search-icon-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon-btn i,
.search-icon-btn svg {
    width: 22px;
    height: 22px;
}

.browse-menu {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    background: rgba(8,10,13,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 18px 14px;
    display: none;
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
    z-index: 999;
}

.browse-menu.active {
    display: block;
}

.browse-title {
    text-align: center;
    font-weight: 900;
    margin-bottom: 22px;
}

.browse-section-label {
    color: #8f9aa5;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 16px 0 10px;
}

.browse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.browse-menu a {
    height: 76px;
    border-radius: 12px;
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 800;
}

.browse-menu a i {
    color: #00c2ff;
    width: 24px;
    height: 24px;
}

.browse-menu a:hover {
    background: rgba(0,194,255,0.10);
}

.browse-personal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stats-wrap{
    width:100%;
    margin-top:50px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}

.stat-box{
    text-align:center;
    min-width:220px;
}

.stat-label{
    font-size:18px;
    font-weight:800;
    color:white;
    letter-spacing:2px;
    margin-bottom:12px;
}

.stat-number{
    font-size:72px;
    font-weight:900;
    color:white;
    line-height:1;
}

.stat-divider{
    width:1px;
    height:120px;
    background:rgba(255,255,255,0.15);
}

@media(max-width:900px){

    .stats-wrap{
        flex-direction:column;
        gap:25px;
    }

    .stat-divider{
        width:100px;
        height:1px;
    }

    .stat-number{
        font-size:54px;
    }
}
</style>
</head>
<body>
<?php include "Preloader.php"; ?>
<div class="header">
    <div class="left">
        <img src="Assets/Logo.png" class="logo-img">
    </div>

    <div class="right">
        <div class="nav">
            <a href="Index.php" class="home-btn">
                    <i data-lucide="house"></i>
                </a>
        
            <div class="browse-dropdown">
                <button type="button" class="browse-btn" onclick="toggleBrowseMenu(event)">
                    <i data-lucide="grid-2x2"></i>
                    <i data-lucide="chevron-down" class="browse-arrow"></i>
                </button>
            
                <div class="browse-menu" id="browseMenu">
                    <div class="browse-title">Browse</div>
                
                    <div class="browse-section-label">CONTENT</div>
                    <div class="browse-grid">
                        <a href="../Movies/Movies.php">
                            <i data-lucide="clapperboard"></i>
                            Movies
                        </a>
                
                        <a href="../Series/Series.php">
                            <i data-lucide="tv"></i>
                            TV Shows
                        </a>
                
                        <a href="../PPV/PPV.php">
                            <i data-lucide="ticket"></i>
                            PPV
                        </a>
                    </div>
                
                    <div class="browse-section-label">PERSONAL</div>
                    <div class="browse-personal">
                        <a href="History.php">
                            <i data-lucide="history"></i>
                            History
                        </a>
                
                        <a href="Watchlist.php">
                            <i data-lucide="heart"></i>
                            Watchlist
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <button type="button" class="search-icon-btn" id="openSearchBtn">
            <i data-lucide="search"></i>
        </button>
        <?php if ($isLoggedIn): ?>
            <?php
                $avatar = !empty($_SESSION["user"]["avatar"])
                    ? "https://cdn.discordapp.com/avatars/" . $_SESSION["user"]["discord_id"] . "/" . $_SESSION["user"]["avatar"] . ".png"
                    : "Assets/Logo.png";
            ?>
        
            <div class="profile-dropdown" onclick="toggleProfileMenu()">
                <img src="<?php echo htmlspecialchars($avatar); ?>" class="profile-avatar">
        
                <div class="profile-menu" id="profileMenu">
                    <div class="profile-menu-name">
                        <?php echo htmlspecialchars($_SESSION["user"]["username"]); ?>
                    </div>
                
                    <?php if (!empty($_SESSION["user"]["is_admin"])): ?>
                        <a href="Admin/Dashboard.php">Admin Interface</a>
                    <?php endif; ?>
                
                    <a href="Auth/logout.php">Logout</a>
                </div>
            </div>
        <?php else: ?>
            <i data-lucide="user" class="icon" onclick="openProfile()"></i>
        <?php endif; ?>
    </div>
</div>

<div class="hero" id="hero">
    <?php foreach ($heroMovies as $index => $movie): ?>
        <?php
            $trailerEmbed = youtubeEmbedUrl($movie["youtube_trailer_url"] ?? "");
            $fallbackBg = !empty($movie["banner"])
                ? $movie["banner"]
                : (!empty($movie["logo"]) ? $movie["logo"] : "Assets/Logo.png");
        ?>
    
        <div
            class="hero-bg <?php echo $index === 0 ? 'active' : ''; ?>"
            style="<?php echo empty($trailerEmbed) ? "background-image:url('" . htmlspecialchars($fallbackBg) . "')" : ""; ?>"
        >
            <?php if (!empty($trailerEmbed)): ?>
                <iframe
                    src="<?php echo htmlspecialchars($trailerEmbed); ?>"
                    frameborder="0"
                    allow="autoplay; encrypted-media"
                    allowfullscreen>
                </iframe>
            <?php endif; ?>
        </div>
    <?php endforeach; ?>

    <div class="hero-overlay"></div>

    <?php $firstHero = $heroMovies[0] ?? null; ?>

    <div class="hero-content">
        <div class="title" id="heroTitle">
            <?php echo htmlspecialchars($firstHero["title"] ?? "Rewire"); ?>
        </div>

        <div class="meta" id="heroMeta">
            ⭐ <?php echo htmlspecialchars($firstHero["rating"] ?? "N/A"); ?>
            • <?php echo htmlspecialchars($firstHero["release_year"] ?? "Unknown"); ?>
            • <?php echo htmlspecialchars($firstHero["category"] ?? "Movie"); ?>
        </div>

        <div class="desc" id="heroDesc">
            <?php echo htmlspecialchars($firstHero["description"] ?? "No Hero Movies Available Right Now!"); ?>
        </div>

        <div class="buttons">
            <?php if ($firstHero): ?>
                <a class="btn play" id="heroPlay" href="Movies/Player.php?id=<?php echo $firstHero["id"]; ?>">▶ Play</a>
                <a class="btn info" id="heroInfo" href="Movies/Preset.php?id=<?php echo $firstHero["id"]; ?>">ⓘ See More</a>
            <?php endif; ?>
        </div>
    </div>
</div>

<div class="section">

    <h2>
        <span class="accent"></span>
        Top 10 Today
    </h2>

    <div class="row-wrap">

        <button class="move-btn move-left" onclick="moveRow(this, -1)">
            <i data-lucide="chevron-left"></i>
        </button>

        <div class="row">

            <?php
            $top10Items = [];
            
            /* MOVIES */
            foreach ($top10Movies as $movie) {
            
                $top10Items[] = [
                    "title" => $movie["title"],
                    "rating" => $movie["rating"],
                    "year" => $movie["release_year"],
                    "type" => "Movie",
                    "position" => (int)$movie["top10_position"],
                    "banner" => !empty($movie["banner"])
                        ? $movie["banner"]
                        : "Assets/Logo.png"
                ];
            }
            
            /* TV SHOWS */
            foreach ($top10Series as $show) {
            
                $top10Items[] = [
                    "title" => $show["title"],
                    "rating" => $show["rating"],
                    "year" => $show["release_year"],
                    "type" => "TV Show",
                    "position" => (int)$show["top10_position"],
                    "banner" => !empty($show["banner"])
                        ? $show["banner"]
                        : "Assets/Logo.png"
                ];
            }

            // SORT BY TOP POSITION
            usort($top10Items, function ($a, $b) {
                return $a["position"] <=> $b["position"];
            });

            foreach ($top10Items as $item):

                $rank = str_pad($item["position"], 2, "0", STR_PAD_LEFT);
            ?>

                <div class="movie-item">

                    <div
                        class="card"
                        style="background-image:url('../<?php echo htmlspecialchars($item["banner"]); ?>')"
                    >

                        <div class="rank">
                            <span>TOP</span>
                            <span><?php echo $rank; ?></span>
                        </div>

                    </div>

                    <div class="card-info">

                        <div class="card-title">
                            <?php echo htmlspecialchars($item["title"]); ?>
                        </div>

                        <div class="card-meta">
                            <span class="star">★</span>

                            <?php echo htmlspecialchars($item["rating"] ?? "N/A"); ?>

                            ·

                            <?php echo htmlspecialchars($item["year"] ?? "Unknown"); ?>

                            ·

                            <?php echo htmlspecialchars($item["type"]); ?>
                        </div>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

        <button class="move-btn move-right" onclick="moveRow(this, 1)">
            <i data-lucide="chevron-right"></i>
        </button>
    </div>
</div>

<div class="stats-wrap">

    <div class="stat-box">
        <div class="stat-label">MOVIES</div>
        <div class="stat-number">
            <?php echo $movieCount; ?>
        </div>
    </div>

    <div class="stat-divider"></div>

    <div class="stat-box">
        <div class="stat-label">TV SHOWS</div>
        <div class="stat-number">
            <?php echo $seriesCount; ?>
        </div>
    </div>

    <div class="stat-divider"></div>

    <div class="stat-box">
        <div class="stat-label">PPV EVENTS</div>
        <div class="stat-number">
            <?php echo $ppvCount; ?>
        </div>
    </div>

</div>

<div class="search-modal" id="searchModal">
    <div class="search-blur"></div>
    <div class="search-box">
        <div class="search-top">
            <h2>Search</h2>
            <div class="custom-select" id="customSelect">
                <div class="select-btn" onclick="toggleSelect()">
                    <span id="selectedType">Movies</span>
                    <i data-lucide="chevron-down"></i>
                </div>
                <div class="select-menu">
                    <div onclick="setType('Movies')">Movies</div>
                    <div onclick="setType('Series')">Series</div>
                    <div onclick="setType('Pay-Per-View')">Pay-Per-View</div>
                </div>
            </div>
            <button class="close-search" onclick="closeSearch()">✕</button>
        </div>
        <div class="search-input-wrap">
            <i data-lucide="search"></i>
            <input type="text" id="searchInput" placeholder="Type here to search..." oninput="showResults()">
            <button onclick="clearSearch()" class="clear-btn">✕</button>
        </div>
        <div class="search-results" id="searchResults">
        
            <?php foreach ($movies as $movie): ?>
                <?php
                    $searchThumb = !empty($movie["banner"])
                        ? $movie["banner"]
                        : (!empty($movie["logo"])
                            ? $movie["logo"]
                            : "Assets/Logo.png");
                ?>
        
                <a href="Movies/Preset.php?id=<?php echo $movie["id"]; ?>" class="result-card">
                    <img src="<?php echo htmlspecialchars($searchThumb); ?>">
        
                    <div class="result-info">
                        <h3><?php echo htmlspecialchars($movie["title"]); ?></h3>
        
                        <p>
                            Movie |
                            <?php echo htmlspecialchars($movie["release_year"] ?? "Unknown"); ?>
                            |
                            ⭐ <?php echo htmlspecialchars($movie["rating"] ?? "N/A"); ?>
                            |
                            <?php echo htmlspecialchars($movie["category"] ?? "Uncategorized"); ?>
                        </p>
                    </div>
                </a>
            <?php endforeach; ?>
        
        </div>
    </div>
</div>

<!-- PROFILE AUTH MODAL -->
<div class="profile-modal" id="profileModal">
    <div class="profile-blur" onclick="closeProfile()"></div>

    <div class="profile-box">
        <button class="profile-close" onclick="closeProfile()">✕</button>

        <div class="profile-tabs">
            <button class="profile-tab active" onclick="showAuthTab('login')">Login</button>
            <button class="profile-tab" onclick="showAuthTab('signup')">Sign Up</button>
        </div>

        <form class="auth-form active" id="loginForm" action="Auth/login.php" method="POST">
            <input type="email" name="email" placeholder="Email address" required>
            <input type="password" name="password" placeholder="Password" required>

            <button class="profile-btn" type="submit">Login</button>

            <a href="Auth/discord_start.php" class="discord-btn">
                Continue With Discord
            </a>
        </form>

        <form class="auth-form" id="signupForm" action="Auth/signup.php" method="POST">
            <input type="text" name="username" placeholder="Username" required>
            <input type="email" name="email" placeholder="Email address" required>
            <input type="password" name="password" placeholder="Password" required>

            <button class="profile-btn" type="submit">Sign up</button>

            <a href="Auth/discord_start.php" class="discord-btn">
                Sign Up With Discord
            </a>
        </form>
    </div>
</div>

<script>
lucide.createIcons();

const openSearchBtn = document.getElementById("openSearchBtn");

if (openSearchBtn) {
    openSearchBtn.addEventListener("click", openSearch);
}

function moveRow(button, direction) {
    const row = button.parentElement.querySelector(".row");
    row.scrollBy({
        left: direction * 650,
        behavior: "smooth"
    });
}

const searchModal = document.getElementById("searchModal");
const searchInput = document.getElementById("searchInput");
const searchResults = document.getElementById("searchResults");
const customSelect = document.getElementById("customSelect");
const selectedType = document.getElementById("selectedType");

function openSearch() {
    searchModal.classList.add("active");
    setTimeout(() => searchInput.focus(), 100);
}

function closeSearch() {
    searchModal.classList.remove("active");

    // wait for animation to finish before fully hiding
    setTimeout(() => {
        searchResults.classList.remove("active");
        searchInput.value = "";
    }, 300);
}

function showResults() {
    const term = searchInput.value.trim().toLowerCase();
    const cards = document.querySelectorAll("#searchResults .result-card");

    searchResults.classList.toggle("active", term.length > 0);

    cards.forEach(card => {
        const title = card.querySelector("h3").textContent.toLowerCase();
        const meta = card.querySelector("p").textContent.toLowerCase();

        card.style.display =
            title.includes(term) || meta.includes(term)
                ? "flex"
                : "none";
    });
}

function clearSearch() {
    searchInput.value = "";
    searchResults.classList.remove("active");
    searchInput.focus();
}

function toggleSelect() {
    customSelect.classList.toggle("active");
}

function setType(type) {
    selectedType.textContent = type;
    customSelect.classList.remove("active");
}

function toggleResult(button) {
    const card = button.closest(".result-card");
    card.classList.toggle("open");
}

function toggleBrowseMenu(event) {
    event.stopPropagation();
    document.getElementById("browseMenu").classList.toggle("active");
}

document.addEventListener("click", function(e) {
    const browseMenu = document.getElementById("browseMenu");
    const browseDropdown = document.querySelector(".browse-dropdown");

    if (browseMenu && browseDropdown && !browseDropdown.contains(e.target)) {
        browseMenu.classList.remove("active");
    }
});

document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") closeSearch();
});

document.querySelector(".search-blur").addEventListener("click", closeSearch);

lucide.createIcons();

const heroSlides = <?php echo json_encode(array_map(function($movie) {
    return [
        "id" => $movie["id"],
        "title" => $movie["title"],
        "meta" => "⭐ " . ($movie["rating"] ?? "N/A") . " • " . ($movie["release_year"] ?? "Unknown") . " • " . ($movie["category"] ?? "Movie"),
        "desc" => $movie["description"] ?? ""
    ];
}, $heroMovies)); ?>;

let currentHero = 0;

function switchHero() {
    if (!heroSlides.length) return;

    const backgrounds = document.querySelectorAll(".hero-bg");

    if (!backgrounds.length) return;

    backgrounds[currentHero].classList.remove("active");

    currentHero = (currentHero + 1) % heroSlides.length;

    backgrounds[currentHero].classList.add("active");

    document.getElementById("heroTitle").textContent = heroSlides[currentHero].title;
    document.getElementById("heroMeta").textContent = heroSlides[currentHero].meta;
    document.getElementById("heroDesc").textContent = heroSlides[currentHero].desc;

    document.getElementById("heroPlay").href = "Movies/Player.php?id=" + heroSlides[currentHero].id;
    document.getElementById("heroInfo").href = "Movies/Preset.php?id=" + heroSlides[currentHero].id;
}

setInterval(switchHero, 20000);

const userIcon = document.querySelector('[data-lucide="user"]');

if (userIcon) {
    userIcon.addEventListener("click", openProfile);
}

function openProfile() {
    document.getElementById("profileModal").classList.add("active");
}

function closeProfile() {
    document.getElementById("profileModal").classList.remove("active");
}

function showAuthTab(tab) {
    document.querySelectorAll(".profile-tab").forEach(btn => btn.classList.remove("active"));
    document.querySelectorAll(".auth-form").forEach(form => form.classList.remove("active"));

    if (tab === "login") {
        document.querySelectorAll(".profile-tab")[0].classList.add("active");
        document.getElementById("loginForm").classList.add("active");
    } else {
        document.querySelectorAll(".profile-tab")[1].classList.add("active");
        document.getElementById("signupForm").classList.add("active");
    }
}

function toggleProfileMenu() {
    const menu = document.getElementById("profileMenu");
    if (menu) menu.classList.toggle("active");
}

document.addEventListener("click", function(e) {
    const dropdown = document.querySelector(".profile-dropdown");
    const menu = document.getElementById("profileMenu");

    if (dropdown && menu && !dropdown.contains(e.target)) {
        menu.classList.remove("active");
    }
});
</script>
<script>

document.querySelectorAll(".counter").forEach(counter => {

    const target = parseInt(counter.dataset.target);

    let current = 0;

    const speed = 45;

    const updateCounter = () => {

        const increment = Math.ceil(target / speed);

        current += increment;

        if (current >= target) {
            counter.innerText = target;
            return;
        }

        counter.innerText = current;

        requestAnimationFrame(updateCounter);
    };

    updateCounter();

});

</script>
<script src="Security.js"></script>
</body>
</html>