@if(($settings?->show_gallery ?? true) && $gallery->isNotEmpty())
<section class="section {{ $sectionBg ?? '' }}" id="galeria">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="badge-pill">Galeria</span>
            <h2 class="section-title mt-2">{!! $settings?->gallery_title ?: 'Momentos en el Colegio' !!}</h2>
            @if($settings?->gallery_subtitle)
                <p class="section-subtitle mx-auto">{!! $settings->gallery_subtitle !!}</p>
            @endif
        </div>
        <div class="row g-3">
            @foreach($gallery as $image)
                <div class="col-md-3 col-6" data-aos="zoom-in" data-aos-delay="{{ $loop->index * 60 }}">
                    <div class="gallery-item" data-src="{{ image_url($image->image) }}" data-title="{{ $image->title ?: $image->category }}">
                        <img src="{{ image_url($image->image) }}" alt="{{ $image->title }}">
                        <div class="caption"><small class="fw-semibold">{{ $image->title ?: $image->category }}</small></div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('gallery.index') }}" class="btn btn-outline-primary rounded-pill">Ver galeria completa</a>
        </div>
    </div>
</section>
@endif
