@aware(['page'])
<div class="theme-max-w mx-auto my-4 px-5">
    <div class="bg-cover bg-center mx-auto py-16 mb-20 relative">
        <div class="relative md:absolute inset-0 z-10 flex flex-col md:flex-row justify-center items-center md:items-start text-white text-center md:py-12 ">
            <img class="order-2 md:order-1 w-[380px] h-[380px] object-cover lazy" src="" data-src="{{asset('storage/'.$image)}}" alt="image">
            <div class="order-1 md:order-2 text-black text-3xl text-left md:text-4xl font-bold mb-4 px-6 md:px-24 lg:w-3/5">{{$title}}</div>
        </div>

        <div class="relative z-20 mt-12 md:mt-48 ">
            <div class="swiper customerReview px-4 max-w-4xl mx-auto swiper-initialized swiper-horizontal swiper-backface-hidden">
                <div class="swiper-wrapper" id="review-wrapper">
                    @foreach($reviews as $review)
                        <div class="swiper-slide w-full swiper-slide-active shadow-md mb-4" role="group">
                            <div class="border border-8 border-white theme-bg-blue text-white p-6 shadow-lg">
                                <div class="text-7xl">“</div>
                                <p class="mb-6">{{$review['review']}}</p>
                                <div class="flex items-center gap-3">
                                    <img src="{{asset('storage/'.$review['user'])}}" class="w-10 h-10 rounded-full">
                                    <div>
                                        <div class="font-semibold">{{$review['name']}}</div>
                                        <div class="text-sm">{{$review['location']}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <span class="swiper-notification"></span></div>

            <div class="absolute -bottom-16 lg:bottom-0 left-[40%] md:left-[5%] mb-4 ml-4 z-30">
                <div class="flex gap-4">
                    <button id="btnPrev" class="swiper-button-prev-static w-10 h-10 bg-gray-100 shadow-md flex items-center justify-center rounded text-gray-600 swiper-button-disabled" disabled="" tabindex="-1" aria-label="Previous slide" aria-controls="review-wrapper" aria-disabled="true">
                        <i class="fa-solid fa-arrow-left"></i>
                    </button>
                    <button id="btnNext" class="swiper-button-next-static w-10 h-10 bg-gray-100 shadow-md flex items-center justify-center rounded text-gray-600" tabindex="0" aria-label="Next slide" aria-controls="review-wrapper" aria-disabled="false">
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    @push("inlinescript")
        <script>
            const swipe = new Swiper('.customerReview', {
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                navigation: {
                    nextEl: '#btnNext',
                    prevEl: '#btnPrev',
                },
                simulateTouch: true,
                grabCursor: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                breakpoints: {
                    768: {
                        slidesPerView: 1,
                    },
                    1024: {
                        slidesPerView: 2,
                    },
                },
            });
        </script>
    @endpush
</div>