@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>
                <p
                    style="text-align: center; color: var(--text-secondary); max-width: 600px; margin: 0 auto; font-size: 16px;">
                    نفخر بثقة عملائنا ونسعى دائماً لتقديم أفضل مستويات الرعاية الطبية للحفاظ على نعمة البصر. إليكم بعض
                    من رسائل
                    وشكر مرضانا.
                </p>
            </div>

            <div class="reviews-gallery">
                @forelse($reviews as $review)
                    <div class="review-card">
                        <div class="review-image-placeholder">
                            <iframe width="560" height="315" src="{{ $review->embed_url }}" title="{{ $review->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