@php
    $videos = $section->getSetting('videos', []);
    $layout = $section->getSetting('layout', 'featured');
    $showTitles = $section->getSetting('show_titles', true);
@endphp

<div class="site-section">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'فيديو' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        @if(count($videos))
            @if($layout === 'featured' && count($videos) > 1)
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 reveal" x-data="{
                    activeIdx: 0,
                    videos: @js(collect($videos)->map(fn($v) => ['url' => video_embed_url($v['url'] ?? ''), 'title' => $v['title'] ?? ''])->toArray())
                }">
                    {{-- Featured (active video large) --}}
                    <div class="lg:col-span-2">
                        <div class="relative aspect-video rounded-xl overflow-hidden shadow-lg">
                            <iframe :src="videos[activeIdx]?.url" class="absolute inset-0 w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                        <h3 x-show="videos[activeIdx]?.title" x-text="videos[activeIdx]?.title" class="mt-3 text-lg font-bold text-gray-900"></h3>
                    </div>
                    {{-- Sidebar thumbnails --}}
                    <div class="space-y-3 max-h-[400px] overflow-y-auto">
                        @foreach($videos as $vIdx => $video)
                            <div class="relative aspect-video rounded-lg overflow-hidden shadow-sm cursor-pointer group transition-all"
                                 :class="activeIdx === {{ $vIdx }} ? 'ring-2 ring-[var(--site-accent)] scale-[1.02]' : 'opacity-80 hover:opacity-100'"
                                 @click="activeIdx = {{ $vIdx }}">
                                @php $thumbUrl = video_embed_url($video['url'] ?? ''); @endphp
                                @if($thumbUrl)
                                    <iframe src="{{ $thumbUrl }}" class="absolute inset-0 w-full h-full pointer-events-none" frameborder="0" loading="lazy" tabindex="-1"></iframe>
                                @endif
                                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-colors flex items-center justify-center">
                                    <svg class="w-8 h-8 text-white opacity-90" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                                </div>
                            </div>
                            @if($showTitles && !empty($video['title']))
                                <p class="text-sm font-medium text-gray-700 -mt-1.5 mb-1">{{ $video['title'] }}</p>
                            @endif
                        @endforeach
                    </div>
                </div>
            @elseif($layout === 'single' || count($videos) === 1)
                <div class="max-w-4xl mx-auto reveal">
                    <div class="relative aspect-video rounded-xl overflow-hidden shadow-xl">
                        @php $embedUrl = video_embed_url($videos[0]['url'] ?? ''); @endphp
                        @if($embedUrl)
                            <iframe src="{{ $embedUrl }}" class="absolute inset-0 w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
                        @endif
                    </div>
                    @if($showTitles && !empty($videos[0]['title']))
                        <h3 class="mt-4 text-xl font-bold text-gray-900 text-center">{{ $videos[0]['title'] }}</h3>
                    @endif
                </div>
            @elseif($layout === 'grid')
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @foreach($videos as $index => $video)
                        <div class="reveal reveal--delay-{{ ($index % 4) + 1 }}">
                            <div class="relative aspect-video rounded-xl overflow-hidden shadow-md">
                                @php $embedUrl = video_embed_url($video['url'] ?? ''); @endphp
                                @if($embedUrl)
                                    <iframe src="{{ $embedUrl }}" class="absolute inset-0 w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
                                @endif
                            </div>
                            @if($showTitles && !empty($video['title']))
                                <h4 class="mt-2 font-semibold text-gray-800">{{ $video['title'] }}</h4>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                {{-- Carousel --}}
                <div class="flex overflow-x-auto snap-x snap-mandatory gap-6 pb-4 -mx-4 px-4 scrollbar-hide">
                    @foreach($videos as $index => $video)
                        <div class="min-w-[400px] sm:min-w-[500px] snap-start shrink-0 reveal">
                            <div class="relative aspect-video rounded-xl overflow-hidden shadow-md">
                                @php $embedUrl = video_embed_url($video['url'] ?? ''); @endphp
                                @if($embedUrl)
                                    <iframe src="{{ $embedUrl }}" class="absolute inset-0 w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
                                @endif
                            </div>
                            @if($showTitles && !empty($video['title']))
                                <h4 class="mt-2 font-semibold text-gray-800">{{ $video['title'] }}</h4>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        @else
            <div class="max-w-lg mx-auto text-center py-12">
                <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-gray-500 text-sm">لم تُضف فيديوهات بعد</p>
            </div>
        @endif
    </div>
</div>
