@extends('layouts.app')

@section('title', 'Primary Learning Tutor - Your Personal AI Tutor 24/7')

@section('content')
<!-- Hero Section -->
<section class="hero-section text-center py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <h1 class="display-3 fw-bold mb-4 text-white">
                    Your Personal AI Tutor, Available 24/7
                </h1>
                <p class="lead text-white mb-5">
                    What if your child had a tutor that can answer any question, and is available 24/7? 
                    That's Primary Learning Tutor! The AI tutor designed to make learning easy, affordable, and always available 🚀
                </p>
                <div class="d-flex gap-2 gap-md-3 justify-content-center flex-wrap">
                    @guest
                        <a href="{{ route('register') }}" class="btn btn-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                            Get Started Free
                        </a>
                        <a href="{{ route('login') }}" class="btn btn-outline-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                            Login
                        </a>
                    @else
                        <a href="{{ route('app.chat') }}" class="btn btn-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                            Go to Chat Tutor
                        </a>
                    @endguest
                    <a href="{{ route('blogs.index') }}" class="btn btn-outline-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                        📝 Read Blogs
                    </a>
                    <a href="{{ route('videos.index') }}" class="btn btn-outline-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                        📺 Watch Videos
                    </a>
                    <a href="{{ route('faqs.index') }}" class="btn btn-outline-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                        ❓ FAQs
                    </a>
                    <a href="{{ route('compare') }}" class="btn btn-outline-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                        ⚖️ Compare
                    </a>
                    <a href="#features" class="btn btn-outline-light btn-lg px-3 px-md-5 mb-2 mb-md-0">
                        Learn More
                    </a>
                </div>
                <p class="text-white-50 mt-3 small">No signup or credit card needed to try!</p>
            </div>
        </div>
    </div>
</section>

<!-- What is Primary Learning Tutor Section -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="display-5 fw-bold mb-4">What is Primary Learning Tutor?</h2>
                <p class="lead mb-4">
                    Primary Learning Tutor is your personal AI-powered tutor, built specifically for Primary 1 students. 
                    Available 24/7 to provide instant help with mathematics and other subjects, fully aligned with the curriculum.
                </p>
                <div class="d-flex gap-3 mb-4">
                    <div class="feature-icon-box">
                        <span class="feature-icon">💡</span>
                        <div>
                            <strong>Instant Help</strong>
                            <p class="small mb-0">Get answers anytime, anywhere</p>
                        </div>
                    </div>
                    <div class="feature-icon-box">
                        <span class="feature-icon">📚</span>
                        <div>
                            <strong>Curriculum Aligned</strong>
                            <p class="small mb-0">Matches Primary 1 syllabus</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="demo-placeholder bg-light rounded p-5">
                    <h3>📱 Interactive Demo</h3>
                    <p class="text-muted">See how it works!</p>
                    <div class="mock-chat bg-white rounded p-4 shadow-sm">
                        <div class="chat-bubble user mb-3">
                            <p class="mb-0">What is addition?</p>
                        </div>
                        <div class="chat-bubble tutor">
                            <p class="mb-0">Addition is putting numbers together! Let me explain with examples...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us Section -->
<section class="py-5" id="features">
    <div class="container">
        <h2 class="text-center display-5 fw-bold mb-5 text-white">Why Choose Primary Learning Tutor?</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card bg-white rounded p-4 h-100 shadow-sm">
                    <div class="feature-icon-large mb-3">💰</div>
                    <h4 class="fw-bold">Affordable</h4>
                    <p>Get premium learning support for a fraction of traditional tuition costs. Quality education that doesn't break the bank.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card bg-white rounded p-4 h-100 shadow-sm">
                    <div class="feature-icon-large mb-3">⏰</div>
                    <h4 class="fw-bold">Flexible</h4>
                    <p>Learn at your own pace, anytime, anywhere—on your phone, tablet, or desktop. No fixed schedules to worry about.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card bg-white rounded p-4 h-100 shadow-sm">
                    <div class="feature-icon-large mb-3">🤝</div>
                    <h4 class="fw-bold">Supportive</h4>
                    <p>Perfect as your main tutor or as extra help alongside existing classes. Always here when you need assistance.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center display-5 fw-bold mb-5">How It Works</h2>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="step-card text-center">
                    <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                        1
                    </div>
                    <h5 class="fw-bold">Sign Up or Login</h5>
                    <p class="text-muted">Create your free account in seconds. No credit card required to get started!</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="step-card text-center">
                    <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                        2
                    </div>
                    <h5 class="fw-bold">Upload or Ask</h5>
                    <p class="text-muted">Upload learning materials (PDF, images) or simply start asking questions about Primary 1 topics.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="step-card text-center">
                    <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                        3
                    </div>
                    <h5 class="fw-bold">Get Instant Answers</h5>
                    <p class="text-muted">Receive clear, step-by-step explanations tailored for Primary 1 students. Easy to understand!</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="step-card text-center">
                    <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                        4
                    </div>
                    <h5 class="fw-bold">Learn & Practice</h5>
                    <p class="text-muted">Ask follow-up questions, practice more, and track your progress. Keep learning at your pace!</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-5">
    <div class="container">
        <h2 class="text-center display-5 fw-bold mb-5 text-white">Features & Benefits</h2>
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="feature-detail bg-white rounded p-4 shadow-sm mb-3">
                    <h4 class="fw-bold mb-3">🔄 24/7 AI-Powered Tutoring</h4>
                    <p>An always-available AI tutor tailored to Primary 1 curriculum, ready to answer questions anytime.</p>
                    <ul class="list-unstyled">
                        <li>✅ Immediate Help, Anytime</li>
                        <li>✅ Simplified Learning</li>
                        <li>✅ Personalized Support</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="feature-detail bg-white rounded p-4 shadow-sm mb-3">
                    <h4 class="fw-bold mb-3">📖 Curriculum Aligned</h4>
                    <p>Complete coverage of Primary 1 Mathematics and other subjects, fully aligned with the curriculum.</p>
                    <ul class="list-unstyled">
                        <li>✅ Numbers & Counting</li>
                        <li>✅ Addition & Subtraction</li>
                        <li>✅ Shapes & Patterns</li>
                        <li>✅ Measurement & More</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="feature-detail bg-white rounded p-4 shadow-sm mb-3">
                    <h4 class="fw-bold mb-3">📄 Document Analysis</h4>
                    <p>Upload PDFs, images, or documents and get instant explanations. Perfect for homework and worksheets!</p>
                    <ul class="list-unstyled">
                        <li>✅ PDF Support</li>
                        <li>✅ Image Recognition</li>
                        <li>✅ Document Text Extraction</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="feature-detail bg-white rounded p-4 shadow-sm mb-3">
                    <h4 class="fw-bold mb-3">💬 Interactive Chat</h4>
                    <p>Have natural conversations with your AI tutor. Ask questions, get clarifications, and learn interactively.</p>
                    <ul class="list-unstyled">
                        <li>✅ Natural Language</li>
                        <li>✅ Follow-up Questions</li>
                        <li>✅ Conversation History</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Videos Section -->
@if(isset($featuredVideos) && $featuredVideos->count() > 0)
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center display-5 fw-bold mb-4">⭐ Featured Educational Videos</h2>
        <p class="text-center text-muted mb-5">Watch interactive videos, stories, and lessons to enhance your learning experience!</p>
        <div class="row g-4">
            @foreach($featuredVideos as $video)
                <div class="col-md-4 col-lg-3">
                    <div class="video-card-landing bg-white rounded shadow-sm overflow-hidden h-100" 
                         @if($video->player_code || $video->video_hash)
                             onclick="window.location.href='{{ route('videos.show', $video) }}'"
                         @else
                             onclick="openVideoModalLanding('{{ addslashes($video->title) }}', '{{ $video->video_url }}', '{{ $video->description ?? '' }}')"
                         @endif 
                         style="cursor: pointer;">
                        <div class="position-relative" style="padding-top: 56.25%; background: #000; overflow: hidden;">
                            @if($video->thumbnail_url)
                                <img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}" class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;">
                            @else
                                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-white" style="font-size: 3rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    📹
                                </div>
                            @endif
                            <div class="position-absolute top-50 start-50 translate-middle opacity-0 video-card-landing-hover" style="transition: opacity 0.2s;">
                                <span class="bg-white bg-opacity-75 rounded-circle p-3 d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.5rem;">▶</span>
                            </div>
                            @if($video->duration)
                                <span class="position-absolute bottom-0 end-0 m-2 bg-dark bg-opacity-75 text-white px-2 py-1 rounded" style="font-size: 0.75rem;">{{ $video->duration }}</span>
                            @endif
                            <span class="position-absolute top-0 end-0 m-2 bg-warning text-dark px-2 py-1 rounded fw-bold" style="font-size: 0.75rem;">⭐ Featured</span>
                        </div>
                        <div class="p-3">
                            <h6 class="fw-bold mb-2" style="font-size: 0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $video->title }}</h6>
                            <div class="d-flex flex-wrap gap-2 mb-2" style="font-size: 0.75rem;">
                                <span class="badge bg-primary">{{ $video->type }}</span>
                                @if($video->genre)
                                    <span class="badge bg-secondary">{{ $video->genre }}</span>
                                @endif
                                @if($video->rating > 0)
                                    <span class="badge bg-warning text-dark">⭐ {{ number_format($video->rating, 1) }}</span>
                                @endif
                            </div>
                            @if($video->classModel || $video->subject)
                                <p class="text-muted mb-0 small">
                                    @if($video->classModel){{ $video->classModel->name }}@endif
                                    @if($video->subject) • {{ $video->subject->name }}@endif
                                    @if($video->topic) • {{ $video->topic }}@endif
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @guest
            <div class="text-center mt-4">
                <a href="{{ route('register') }}" class="btn btn-primary btn-lg">
                    Sign Up to Watch All Videos
                </a>
            </div>
        @else
            <div class="text-center mt-4">
                <a href="{{ route('app.chat') }}" class="btn btn-primary btn-lg">
                    Browse All Videos
                </a>
            </div>
        @endguest
    </div>
</section>
@endif

<!-- Featured Blogs Section -->
@if(isset($latestBlogs) && $latestBlogs->count() > 0)
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center display-5 fw-bold mb-4">📝 Latest Blog Posts</h2>
        <p class="text-center text-muted mb-5">Read helpful articles, tips, and learning guides!</p>
        <div class="row g-4">
            @foreach($latestBlogs as $blog)
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100 shadow-sm blog-card-landing" 
                         onclick="window.location.href='{{ route('blogs.show', $blog->slug) }}'"
                         style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
                        @if($blog->featured_image)
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($blog->featured_image) }}" 
                                 class="card-img-top" 
                                 alt="{{ $blog->title }}"
                                 style="height: 150px; object-fit: cover;">
                        @else
                            <div class="card-img-top bg-gradient d-flex align-items-center justify-content-center" 
                                 style="height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                <span style="font-size: 3rem;">📝</span>
                            </div>
                        @endif
                        <div class="card-body d-flex flex-column">
                            @if($blog->category)
                                <span class="badge bg-primary mb-2">{{ $blog->category }}</span>
                            @endif
                            <h6 class="card-title fw-bold" style="font-size: 0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $blog->title }}</h6>
                            @if($blog->excerpt)
                                <p class="card-text text-muted small flex-grow-1" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $blog->excerpt }}</p>
                            @endif
                            <small class="text-muted mt-auto">
                                @if($blog->published_at)
                                    {{ $blog->published_at->format('M d, Y') }}
                                @endif
                            </small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('blogs.index') }}" class="btn btn-primary btn-lg">
                View All Blogs
            </a>
        </div>
    </div>
</section>
@endif

<!-- Latest Videos Section -->
@if(isset($latestVideos) && $latestVideos->count() > 0)
<section class="py-5">
    <div class="container">
        <h2 class="text-center display-5 fw-bold mb-4 text-white">📺 Latest Educational Content</h2>
        <p class="text-center text-white-50 mb-5">Check out our newest videos and learning materials!</p>
        <div class="row g-4">
            @foreach($latestVideos->take(4) as $video)
                <div class="col-md-3 col-lg-3">
                    <div class="video-card-landing bg-white rounded shadow-sm overflow-hidden h-100" 
                         @if($video->player_code || $video->video_hash)
                             onclick="window.location.href='{{ route('videos.show', $video) }}'"
                         @else
                             onclick="openVideoModalLanding('{{ addslashes($video->title) }}', '{{ $video->video_url }}', '{{ $video->description ?? '' }}')"
                         @endif 
                         style="cursor: pointer;">
                        <div class="position-relative" style="padding-top: 56.25%; background: #000; overflow: hidden;">
                            @if($video->thumbnail_url)
                                <img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}" class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;">
                            @else
                                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-white" style="font-size: 3rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    📹
                                </div>
                            @endif
                            <div class="position-absolute top-50 start-50 translate-middle opacity-0 video-card-landing-hover" style="transition: opacity 0.2s;">
                                <span class="bg-white bg-opacity-75 rounded-circle p-3 d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.5rem;">▶</span>
                            </div>
                            @if($video->duration)
                                <span class="position-absolute bottom-0 end-0 m-2 bg-dark bg-opacity-75 text-white px-2 py-1 rounded" style="font-size: 0.75rem;">{{ $video->duration }}</span>
                            @endif
                        </div>
                        <div class="p-3">
                            <h6 class="fw-bold mb-2" style="font-size: 0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $video->title }}</h6>
                            <div class="d-flex flex-wrap gap-2 mb-2" style="font-size: 0.75rem;">
                                <span class="badge bg-primary">{{ $video->type }}</span>
                                @if($video->genre)
                                    <span class="badge bg-secondary">{{ $video->genre }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- CTA Section -->
<section class="py-5 bg-white">
    <div class="container text-center">
        <h2 class="display-5 fw-bold mb-4">Ready to Boost Your Learning?</h2>
        <p class="lead mb-4">Join students who are improving their understanding with Primary Learning Tutor!</p>
        @guest
            <a href="{{ route('register') }}" class="btn btn-primary btn-lg px-5">
                Get Started Free
            </a>
            <p class="text-muted mt-3 small">No credit card required. Start learning in seconds!</p>
        @else
            <a href="{{ route('app.chat') }}" class="btn btn-primary btn-lg px-5">
                Continue Learning
            </a>
        @endguest
    </div>
</section>

<!-- Video Modal for Landing Page -->
<div class="modal fade" id="videoModalLanding" tabindex="-1" aria-labelledby="videoModalLandingLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="videoModalLandingTitle">Video Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeVideoModalLanding()"></button>
            </div>
            <div class="modal-body">
                <div class="position-relative" style="padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden;">
                    <!-- For uploaded video files -->
                    <video id="videoPlayerFileLanding" class="position-absolute top-0 start-0 w-100 h-100" controls style="display: none; border-radius: 8px;">
                        Your browser does not support the video tag.
                    </video>
                    <!-- For external URLs (YouTube, Vimeo, etc.) -->
                    <iframe id="videoPlayerLanding" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="position-absolute top-0 start-0 w-100 h-100" style="border-radius: 8px;"></iframe>
                </div>
                <div id="videoDescriptionLanding" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 80px 0;
    margin: -20px -20px 40px -20px;
}

.feature-icon-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.feature-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;
}

.feature-icon-large {
    font-size: 3rem;
    text-align: center;
}

.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.step-number {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    font-weight: bold;
}

.demo-placeholder {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mock-chat {
    max-width: 400px;
    margin: 0 auto;
}

.chat-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.chat-bubble.user {
    background: #e3f2fd;
    text-align: right;
}

.chat-bubble.tutor {
    background: #f5f5f5;
}

.feature-detail ul li {
    padding: 5px 0;
}

.video-card-landing {
    transition: transform 0.2s, box-shadow 0.2s;
}

.video-card-landing:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.video-card-landing:hover .video-card-landing-hover {
    opacity: 1 !important;
}

.blog-card-landing:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 40px 0;
        margin: -10px -10px 20px -10px;
    }
    
    .display-3 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    
    .feature-card,
    .feature-detail {
        margin-bottom: 1rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .video-card-landing,
    .blog-card-landing {
        margin-bottom: 1rem;
    }
    
    .col-md-3,
    .col-md-4 {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 30px 0;
    }
    
    .display-3 {
        font-size: 1.75rem;
    }
    
    .btn-lg {
        font-size: 0.9rem;
        padding: 0.6rem 1.25rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .feature-icon-large {
        font-size: 2rem;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .demo-placeholder {
        min-height: 200px;
    }
}
</style>
@endpush

@push('scripts')
<script>
// Open video modal for landing page
function openVideoModalLanding(title, videoUrl, description) {
    const modalElement = document.getElementById('videoModalLanding');
    const titleElement = document.getElementById('videoModalLandingTitle');
    const iframeElement = document.getElementById('videoPlayerLanding');
    const videoElement = document.getElementById('videoPlayerFileLanding');
    const descriptionElement = document.getElementById('videoDescriptionLanding');
    
    if (!modalElement) return;
    
    // Set title
    if (titleElement) {
        titleElement.textContent = title;
    }
    
    // Check if it's an uploaded file (contains /storage/) or external URL
    const isUploadedFile = videoUrl && (videoUrl.includes('/storage/') || videoUrl.includes('storage/videos/'));
    
    if (isUploadedFile) {
        // Use video tag for uploaded files
        if (iframeElement) {
            iframeElement.style.display = 'none';
            iframeElement.src = ''; // Clear iframe
        }
        if (videoElement) {
            videoElement.style.display = 'block';
            videoElement.src = videoUrl;
            videoElement.load(); // Reload video
        }
    } else {
        // Use iframe for external URLs (YouTube, Vimeo, etc.)
        if (videoElement) {
            videoElement.style.display = 'none';
            videoElement.src = ''; // Clear video
        }
        if (iframeElement) {
            iframeElement.style.display = 'block';
            
            // Convert video URL to embed URL (support YouTube and Vimeo)
            let embedUrl = videoUrl;
            if (videoUrl && (videoUrl.includes('youtube.com/watch') || videoUrl.includes('youtu.be/'))) {
                const videoIdMatch = videoUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/);
                if (videoIdMatch && videoIdMatch[1]) {
                    embedUrl = `https://www.youtube.com/embed/${videoIdMatch[1]}`;
                }
            } else if (videoUrl && videoUrl.includes('vimeo.com/')) {
                const videoIdMatch = videoUrl.match(/vimeo\.com\/(\d+)/);
                if (videoIdMatch && videoIdMatch[1]) {
                    embedUrl = `https://player.vimeo.com/video/${videoIdMatch[1]}`;
                }
            }
            
            // Set iframe source
            iframeElement.src = embedUrl + (embedUrl.includes('?') ? '&' : '?') + 'autoplay=1';
        }
    }
    
    // Set description
    if (descriptionElement) {
        descriptionElement.innerHTML = description ? `<p>${description.replace(/\n/g, '<br>')}</p>` : '';
    }
    
    // Show modal
    if (typeof bootstrap !== 'undefined') {
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
    }
}

// Close video modal for landing page
function closeVideoModalLanding() {
    const modalElement = document.getElementById('videoModalLanding');
    const iframeElement = document.getElementById('videoPlayerLanding');
    const videoElement = document.getElementById('videoPlayerFileLanding');
    
    if (iframeElement) {
        // Stop iframe video by clearing src
        iframeElement.src = '';
    }
    
    if (videoElement) {
        // Stop video tag by pausing and clearing src
        videoElement.pause();
        videoElement.src = '';
        videoElement.load();
    }
    
    if (modalElement && typeof bootstrap !== 'undefined') {
        const modal = bootstrap.Modal.getInstance(modalElement);
        if (modal) {
            modal.hide();
        }
    }
}
</script>
@endpush