@php
            $items = \App\Models\Backend\ContentVideo::with(['translations' => function($q) use ($lang) { $q->where('video_translation_language', $lang); }])->where('video_status', 'ACTIVE')->orderBy('video_date', 'desc')->get();
            @endphp
            @if($items->count())
            <section class="video-section">
                <div class="container">
                    <div class="video-header">
                        <span class="video-badge">Video</span>
                        <h1 class="video-title">Video</h1>
                        <p class="video-subtitle">Koleksi video dan tayangan multimedia rasmi.</p>
                    </div>
                    <div class="video-grid">
                        @foreach($items as $item)
                        @php $t = $item->translations->first(); @endphp
                        <div class="video-card">
                            <div class="video-thumb">
                                @if($item->video_img)
                                <img src="{{ image_url($item->video_img) }}" alt="{{ $t->video_translation_title ?? '' }}">
                                @elseif($item->video_external)
                                <div class="video-embed" style="padding:56.25% 0 0 0;position:relative;"><iframe src="{{ $item->video_external }}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>
                                @else
                                <div class="video-placeholder"><i class="fas fa-video"></i></div>
                                @endif
                            </div>
                            @if($t)
                            <div class="video-info">
                                <h3 class="video-title-text">{{ $t->video_translation_title }}</h3>
                                @if($t->video_translation_content)<p class="video-desc">{{ Str::limit($t->video_translation_content, 120) }}</p>@endif
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>
            <style>
            .video-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }
            .video-header { text-align: center; margin-bottom: 50px; }
            .video-badge { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }
            .video-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }
            .video-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }
            .video-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
            .video-card { background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); transition: box-shadow 0.2s; }
            .video-card:hover { box-shadow: var(--shadow-lg); }
            .video-thumb { }
            .video-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
            .video-placeholder { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-300); font-size: 2.5rem; }
            .video-embed { }
            .video-info { padding: 16px 18px; }
            .video-title-text { font-size: 0.95rem; font-weight: 600; color: var(--gray-900); margin: 0 0 6px; }
            .video-desc { font-size: 0.82rem; color: var(--gray-500); margin: 0; line-height: 1.5; }
            @media (max-width: 768px) {
                .video-section { padding: 30px 0 50px; }
                .video-title { font-size: 1.4rem; }
                .video-grid { grid-template-columns: 1fr; }
            }
            </style>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;"><div class="container"><i class="fas fa-video" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i><h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Tiada Video</h2><p style="color:var(--gray-400);margin:10px 0 30px;">Tiada video buat masa ini.</p><a href="/{{ $siteSlug }}" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;"><i class="fas fa-arrow-left"></i> Kembali</a></div></section>
            @endif
            