@php
            $items = \App\Models\Backend\ContentPhotoGallery::with(['translations' => function($q) use ($lang) { $q->where('gallery_translation_language', $lang); }])->where('gallery_status', 'ACTIVE')->orderBy('gallery_date', 'desc')->get();
            @endphp
            @if($items->count())
            <section class="galeri-section">
                <div class="container">
                    <div class="galeri-header">
                        <span class="galeri-badge">Galeri</span>
                        <h1 class="galeri-title">Galeri Foto</h1>
                        <p class="galeri-subtitle">Koleksi gambar dan foto-foto rasmi.</p>
                    </div>
                    <div class="galeri-grid">
                        @foreach($items as $item)
                        @php $t = $item->translations->first(); @endphp
                        <div class="galeri-card">
                            <div class="galeri-img">
                                @if($item->gallery_thumbnail)
                                <img src="{{ image_url($item->gallery_thumbnail) }}" alt="{{ $t->gallery_translation_title ?? '' }}">
                                @else
                                <div class="galeri-img-placeholder"><i class="fas fa-image"></i></div>
                                @endif
                            </div>
                            <div class="galeri-overlay">
                                <h3>{{ $t->gallery_translation_title ?? 'Galeri' }}</h3>
                                @if($t->gallery_translation_descr)<p>{{ Str::limit($t->gallery_translation_descr, 100) }}</p>@endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>
            <style>
            .galeri-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }
            .galeri-header { text-align: center; margin-bottom: 50px; }
            .galeri-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; }
            .galeri-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }
            .galeri-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }
            .galeri-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
            .galeri-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
            .galeri-img { width: 100%; height: 100%; }
            .galeri-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
            .galeri-card:hover .galeri-img img { transform: scale(1.08); }
            .galeri-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-300); font-size: 2.5rem; }
            .galeri-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; }
            .galeri-overlay h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 4px; }
            .galeri-overlay p { font-size: 0.8rem; margin: 0; opacity: 0.85; }
            @media (max-width: 768px) {
                .galeri-section { padding: 30px 0 50px; }
                .galeri-title { font-size: 1.4rem; }
                .galeri-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
            }
            </style>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;"><div class="container"><i class="fas fa-images" 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 Galeri</h2><p style="color:var(--gray-400);margin:10px 0 30px;">Tiada galeri foto 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
            