@props(['images'])

<section class="gallery-container py-5" data-aos="fade-up" data-aos-duration="1000">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="fw-bold text-black" data-aos="fade-down" data-aos-delay="100" style="font-family: 'Poppins', sans-serif;">
                    Gallery
                </h2>
            </div>
        </div>

        <div class="gallery-grid d-none d-xl-block">
            <div class="row p-0 mb-2 gallery-item" data-aos="fade-up" data-aos-delay="150">
                <div class="col-md-2 position-relative p-0 m-0" data-aos="zoom-in" data-aos-delay="200">
                    <img src="{{ $images[0] }}" class="row1-img1" alt="Gallery Element Slot 1">
                </div>
                <div class="col-md-3 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="250">
                    <img src="{{ $images[1] }}" class="row1-img2" alt="Gallery Element Slot 2">
                </div>
                <div class="col-md-4 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="300">
                    <img src="{{ $images[2] }}" class="row1-img3" alt="Gallery Element Slot 3">
                </div>
                <div class="col-md-3 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="350">
                    <img src="{{ $images[3] }}" class="row1-img4" alt="Gallery Element Slot 4">
                </div>
            </div>

            <div class="row p-0 mb-2 gallery-item" data-aos="fade-up" data-aos-delay="200">
                <div class="col-md-4 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="250">
                    <img src="{{ $images[4] }}" class="row1-img5" alt="Gallery Element Slot 5">
                </div>
                <div class="col-md-3 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="300">
                    <img src="{{ $images[5] }}" class="row1-img6" alt="Gallery Element Slot 6">
                </div>
                <div class="col-md-3 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="350">
                    <img src="{{ $images[6] }}" class="row1-img7" alt="Gallery Element Slot 7">
                    <img src="{{ $images[8] }}" class="row1-img9" alt="Gallery Element Slot 9">
                </div>
                <div class="col-md-2 position-relative m-0 p-0" data-aos="zoom-in" data-aos-delay="400">
                    <img src="{{ $images[7] }}" class="row1-img8" alt="Gallery Element Slot 8">
                </div>
            </div>
        </div>

        <div class="responsive-gallery d-block d-xl-none">
            <div class="row g-3">
                @foreach($images as $mIdx => $imageUrl)
                    <div class="col-6 col-md-4" data-aos="zoom-in" data-aos-delay="{{ 100 + ($mIdx * 50) }}">
                        <img src="{{ $imageUrl }}" class="img-fluid rounded gallery-img" alt="Responsive Gallery Image Asset #{{ $mIdx + 1 }}">
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>