<?php
/**
 * Home Page Video Section
 * Displays uploaded video or YouTube embed from admin settings
 */

// Load video section settings
$settingsPath = __DIR__ . '/data/video_section.json';
$videoSection = [];

if (file_exists($settingsPath)) {
    $videoContent = file_get_contents($settingsPath);
    $videoSection = json_decode($videoContent, true);
    if (!is_array($videoSection)) $videoSection = [];
} else {
    // Fallback to DatabaseHelper if available
    if (class_exists('DatabaseHelper') && method_exists('DatabaseHelper', 'loadJson')) {
        $videoSection = DatabaseHelper::loadJson('video_section.json', []);
    } else {
        $videoSection = [];
    }
}

// Only display if enabled
if (!($videoSection['enabled'] ?? true)) {
    return;
}

// Get safe values with defaults
$title = htmlspecialchars($videoSection['title'] ?? 'Our Story');
$subtitle = htmlspecialchars($videoSection['subtitle'] ?? '');
$description = htmlspecialchars($videoSection['description'] ?? '');
$buttonText = htmlspecialchars($videoSection['button_text'] ?? 'Play Video');
$showButton = $videoSection['show_button'] ?? true;
$videoUrl = htmlspecialchars($videoSection['video_url'] ?? '');
$uploadedVideo = $videoSection['uploaded_video'] ?? '';
$posterImage = $videoSection['poster_image'] ?? '';

// Check if uploaded video exists
$hasUploadedVideo = !empty($uploadedVideo) && file_exists(__DIR__ . '/' . $uploadedVideo);
if ($hasUploadedVideo) {
    $uploadedVideo = '/emporio/' . ltrim($uploadedVideo, '/');
}

// Check if poster image exists
$hasPosterImage = !empty($posterImage) && file_exists(__DIR__ . '/' . $posterImage);
if ($hasPosterImage) {
    $posterImage = '/emporio/' . ltrim($posterImage, '/');
}
?>

<section class="video-section" style="padding: 60px 20px; background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);">
    <div class="container" style="max-width: 1200px; margin: 0 auto;">
        <!-- Section Header -->
        <div class="video-header" style="text-align: center; margin-bottom: 50px;">
            <h2 style="font-size: 36px; color: #333; margin: 0 0 15px 0; font-weight: 600;">
                <?php echo $title; ?>
            </h2>
            <?php if (!empty($subtitle)): ?>
            <p style="font-size: 18px; color: #666; margin: 0 0 10px 0;">
                <?php echo $subtitle; ?>
            </p>
            <?php endif; ?>
            <?php if (!empty($description)): ?>
            <p style="font-size: 14px; color: #999; max-width: 600px; margin: 0 auto;">
                <?php echo $description; ?>
            </p>
            <?php endif; ?>
        </div>

        <!-- Video Player -->
        <div class="video-player-wrapper" style="max-width: 900px; margin: 0 auto;">
            <div class="video-container" style="position: relative; width: 100%; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);">
                <?php if ($hasUploadedVideo): ?>
                    <!-- Uploaded Video -->
                    <video 
                        controls 
                        playsinline 
                        <?php if ($hasPosterImage): ?>poster="<?php echo $posterImage; ?>"<?php endif; ?>
                        style="width: 100%; height: auto; display: block; background: #000;">
                        <source src="<?php echo $uploadedVideo; ?>" type="video/<?php echo htmlspecialchars(pathinfo($uploadedVideo, PATHINFO_EXTENSION)); ?>">
                        Your browser does not support the video tag.
                    </video>
                <?php elseif (!empty($videoUrl)): ?>
                    <!-- YouTube Embed -->
                    <div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                        <iframe 
                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
                            src="<?php echo $videoUrl; ?>"
                            title="Video"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
                        </iframe>
                    </div>
                <?php else: ?>
                    <!-- Placeholder -->
                    <div style="width: 100%; padding-top: 56.25%; position: relative; background: #1a1a1a;">
                        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                            <p style="color: #999; font-size: 14px;">No video configured</p>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- CTA Button -->
        <?php if ($showButton && (!empty($uploadedVideo) || !empty($videoUrl))): ?>
        <div style="text-align: center; margin-top: 40px;">
            <button 
                style="
                    background: #F07E2D;
                    color: #fff;
                    border: none;
                    padding: 14px 32px;
                    font-size: 16px;
                    font-weight: 600;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: background 0.3s ease;
                "
                onmouseover="this.style.background='#c76b8a'"
                onmouseout="this.style.background='#F07E2D'"
                onclick="document.querySelector('.video-container').scrollIntoView({behavior: 'smooth'})">
                <?php echo $buttonText; ?>
            </button>
        </div>
        <?php endif; ?>
    </div>
</section>

<style>
    @media (max-width: 768px) {
        .video-header {
            margin-bottom: 30px !important;
        }
        
        .video-header h2 {
            font-size: 24px !important;
        }
        
        .video-header p {
            font-size: 14px !important;
        }
        
        .video-section {
            padding: 30px 15px !important;
        }
    }
</style>
