@extends('site.layouts.app')
@section('content')
    <!-- PAGE HERO -->
    <section class="page-hero">
        <div class="page-hero-bg">
            <img src="{{ asset('site/images/page-hider.png') }}" alt="معلومة في فيديو">
        </div>
        <div class="breadcrumb">
            <a href="{{ route('site.home') }}">الرئيسية</a>
            <span class="separator">←</span>
            <span>معلومة في فيديو</span>
        </div>
    </section>

    <!-- REVIEWS GALLERY SECTION -->
    <section class="section">
        <div class="container">
            <div class="section-title-wrapper">
                <h2 class="section-title">معلومة في فيديو</h2>
            </div>

            <div class="reviews-gallery">
                @forelse($videoInfos as $videoInfo)
                    <div class="review-card">
                        <div class="review-image-placeholder">
                            <iframe width="560" height="315"
                                src="{{ $videoInfo->embed_url }}"
                                title="{{ $videoInfo->title }}" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                @empty
                    <p class="text-center" style="color: var(--text-secondary);">لا توجد معلومات فيديو حتى الآن.</p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- LIGHTBOX MODAL -->
    <div id="lightbox" class="lightbox">
        <span class="close-lightbox" onclick="closeLightbox()">&times;</span>
        <div class="lightbox-content-wrapper">
            <div id="lightbox-content-clone"></div>
        </div>
    </div>
@endsection