@php
    $galleries = [
        [
            'title' => 'Külső látványtervek',
            'img' => asset('/kepek/gallery/kulso-latvanytervek.jpg'),
            'url' => '/hu/galeria/kulso-latvanytervek',
        ],
        [
            'title' => 'Közösségi tér',
            'img' => asset('/kepek/gallery/kozossegi-ter.jpg'),
            'url' => '/hu/galeria/kozossegi-ter',
        ],
        [
            'title' => 'Bemutató videó',
            'img' => asset('/kepek/gallery/bemutato-video.jpg'),
            'url' => '/hu/galeria/bemutato-video',
        ],
        [
            'title' => 'Helyszín és építkezés képek',
            'img' => asset('/kepek/gallery/helyszin-es-epitkezes-kepek.jpg'),
            'url' => '/hu/galeria/helyszin-es-epitkezes-kepek',
        ],
        /*
        [
            'title' => 'Belső látványtervek',
            'img' => asset('/kepek/gallery/belso-latvanytervek.jpg'),
            'url' => '/hu/galeria/belso-latvanytervek',
        ],
        */
    ];

    $galleries = \App\Models\Gallery::getGalleryList();
@endphp

<x-frontend.animation delay="250">
    <div class="swiper swiper-galleries">
        <div class="swiper-wrapper">
            @foreach ($galleries as $gallery)
                <div class="swiper-slide">
                    <a href="{{ $gallery['url'] }}" class="block overflow-hidden bg-white shadow-lg rounded-3xl">
                        <div>
                            <img src="{{ $gallery['img'] }}" alt="{{ $gallery['title'] }}" width="1024" height="576"
                                class="w-full h-auto">
                        </div>
                        <div class="h-2 bg-gradient"></div>
                        <h3 class="p-8 text-xl font-bold font-heading text-laurel">
                            {{ $gallery['title'] }}
                        </h3>
                    </a>
                </div>
            @endforeach
        </div>
        <div class="flex items-center justify-center gap-4 mt-8 lg:mt-16">
            <div class="custom-prev"><x-frontend.icons.arrow-left stroke="2" class="size-6" /></div>
            <div class="custom-next"><x-frontend.icons.arrow-right stroke="2" class="size-6" /></div>
        </div>
    </div>
</x-frontend.animation>