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

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

// Scan the assets/videos 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;
    }
}

// Fallback if no videos found
if (empty($videos)) {
    $videos[] = "fallback.mp4"; // optional
}
?>
<!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%;
        }

        /* Desktop background */
        .bg-desktop {
            background: url('assets/images/desktop_bg.png') no-repeat center center fixed;
            background-size: cover;
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
        }

        /* Mobile background */
        @media (max-width: 768px) {
            .bg-desktop {
                background: url('assets/images/mobile_bg.png') no-repeat center center fixed;
                background-size: cover;
            }
        }

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

        /* Optional iron background */
        .iron {
            background: url('assets/images/iron.jpg') no-repeat center center;
            background-size: contain;
            padding: 40px;
            display: inline-block;
        }

        .enter-btn {
            margin-top: 20px;
            padding: 12px 25px;
            background: #7a0000;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            border-radius: 6px;
        }

        .enter-btn:hover {
            background: #a00000;
        }

        /* Fullscreen video overlay */
        #videoContainer {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000;
            z-index: 9999;
        }

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

</head>
<body>

<div class="bg-desktop"></div>

<div class="center-box">
    <div class="iron">
        <h1>Welcome back, Champion</h1>
        <button class="enter-btn" onclick="startIntro()">ENTER</button>
    </div>
</div>

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

<script>
    // PHP → JS video list
    const videos = <?php echo json_encode($videos); ?>;

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

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

        container.style.display = "block";

        // Set video source
        video.src = "assets/videos/" + randomVideo;
        video.play();

        // When video ends → go to dashboard
        video.onended = function() {
            window.location.href = "pages/dashboard.php";
        };
    }
</script>
</body>
</html>