{{-- resources/views/public/gallery.blade.php --}}
<section id="gallery" class="section-spacing section-bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Galeri Kegiatan</h2>
            <p class="text-muted" style="font-size: 1.1rem;">Momen berharga dari kegiatan sekolah kami</p>
        </div>
        <div class="gallery-grid">
            @forelse($fotos as $foto)
                @php 
                    $cover = is_iterable($foto) ? $foto->first() : $foto; 
                @endphp
                <div class="gallery-item">
                    <img src="{{ asset('storage/galeri/' . $cover->file_path) }}" alt="{{ $cover->judul }}" style="width: 100%; height: 100%; object-fit: cover;">
                    <div class="gallery-overlay">
                        <div class="gallery-text">
                            {{ $cover->judul }}
                        </div>
                    </div>
                </div>
            @empty
                <div class="gallery-item">
                    <svg width="100%" height="100%" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="300" fill="#e8f5e9" /> <circle cx="150" cy="100" r="40" fill="#1E88E5" /> <circle cx="100" cy="180" r="35" fill="#1565C0" /> <circle cx="200" cy="200" r="38" fill="#1E88E5" /> <path d="M 50 280 Q 150 250 250 280" stroke="#d4af37" stroke-width="4" fill="none" /></svg>
                    <div class="gallery-overlay"><div class="gallery-text">Kegiatan Belajar</div></div>
                </div>
            @endforelse
        </div>

        @if(isset($fotos) && $fotos->count() > 0)
        <div class="text-center mt-5">
            <a href="{{ route('public.galeri') }}" class="btn-daftar text-decoration-none d-inline-flex align-items-center" style="font-size: 1.1rem; padding: 0.8rem 2.5rem;">
                Lihat Semua Galeri <i class="bi bi-arrow-right ms-2"></i>
            </a>
        </div>
        @endif
    </div>
</section>