<?php
require_once "includes/config.php";

// Allowed video extensions
$videoExtensions = ['mp4','avi','mkv','webm','3gp'];

// Scan video folder
$videoDir = __DIR__ . "/assets/videos/";
$files = scandir($videoDir);

$videos = [];
foreach ($files as $file) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    if (in_array($ext, $videoExtensions)) {
        $videos[] = $file;
    }
}

if (empty($videos)) {
    $videos[] = "fallback.mp4"; // optional fallback
}

// Random quotes
$quotes = [
    "“Every habit completed is a blade sharpened.”",
    "“Champions are forged in the fires of repetition.”",
    "“Your actions today echo in eternity.”",
    "“Strength is built one choice at a time.”",
    "“The path of mastery begins with a single step.”",
    "“Discipline is the truest form of magic.”",
    "“A warrior trains even when unseen.”",
    "“Your future self is watching.”"
];
?>
<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
            font-family: "Cinzel", serif;
        }

        /* Background */
        .bg {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: fadeIn 2s forwards;
        }

        /* Desktop */
        .bg {
            background-image: url('assets/images/desktop_bg.png');
        }

        /* Mobile override */
        @media (max-width: 768px) {
            .bg {
                background-image: url('assets/images/mobile_bg.png');
            }
        }

        /* Dark fantasy shader overlay */
        .shader {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            background:
                radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%),
                url('assets/images/grain.png');
            mix-blend-mode: multiply;
            opacity: 0.6;
        }

        /* Center content */
        .center-box {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #f5e6c8;
            width: 90%;
        }

        .quote {
            font-size: 26px;
            margin-bottom: 40px;
            opacity: 0;
            animation: fadeIn 3s forwards 1s;
            text-shadow: 0 0 10px #000;
        }

        @media (max-width: 768px) {
            .quote {
                font-size: 18px;
            }
        }

        /* Animated ENTER button */
        .enter-btn {
            padding: 14px 40px;
            font-size: 26px;
            background: rgba(120,0,0,0.85);
            border: 2px solid #ffcc66;
            color: #ffcc66;
            cursor: pointer;
            border-radius: 8px;
            text-transform: uppercase;
            letter-spacing: 2px;
            animation: pulse 2s infinite;
            transition: 0.3s;
        }

        .enter-btn:hover {
            background: rgba(160,0,0,1);
            box-shadow: 0 0 20px #ffcc66;
            transform: scale(1.05);
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 10px #ffcc66; }
            50% { box-shadow: 0 0 25px #ffcc66; }
            100% { box-shadow: 0 0 10px #ffcc66; }
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        @keyframes fadeOut {
            to { opacity: 0; }
        }

        /* Video overlay */
        #videoContainer {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000;
            z-index: 9999;
            animation: fadeIn 1s forwards;
        }

        #introVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

</head>
<body>

<div class="bg"></div>
<div class="shader"></div>

<div class="center-box">
    <div class="quote" id="quoteBox"></div>
    <button class="enter-btn" onclick="startIntro()">Enter</button>
</div>

<!-- Video overlay -->
<div id="videoContainer">
    <video id="introVideo" autoplay></video>
</div>

<script>
    // Quotes from PHP
    const quotes = <?php echo json_encode($quotes); ?>;
    const videos = <?php echo json_encode($videos); ?>;

    // Pick random quote
    document.getElementById("quoteBox").innerHTML =
        quotes[Math.floor(Math.random() * quotes.length)];

    function startIntro() {
        // Fade out splash
        document.querySelector(".bg").style.animation = "fadeOut 1s forwards";
        document.querySelector(".shader").style.animation = "fadeOut 1s forwards";
        document.querySelector(".center-box").style.animation = "fadeOut 1s forwards";

        setTimeout(() => {
            // Pick random video
            const randomVideo = videos[Math.floor(Math.random() * videos.length)];

            const container = document.getElementById("videoContainer");
            const video = document.getElementById("introVideo");

            container.style.display = "block";
            video.src = "assets/videos/" + randomVideo;
            video.play();

            video.onended = function() {
                window.location.href = "pages/dashboard.php";
            };
        }, 900);
    }
</script>

</body>
</html>