@push('page.head')
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
@endpush

<section class="w-full max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-14">
    <div class="grid grid-cols-1 md:grid-cols-2 px-0 md:px-8 pt-20 w-full md:col-span-2 gap-8 lg:gap-14">
        <div class="flex flex-col justify-center h-full px-8 md:px-0">
            <h1 class="text-3xl md:text-5xl text-center md:text-left uppercase">
                Des clients satisfaits !
            </h1>
            <p class="text-lg md:text-2xl tracking-wide text-center md:text-justify mt-8">
                Et ils ont pris la parole pour témoigner de leur expérience chez Lockit.
            </p>
        </div>
        <div class="flex flex-col justify-center w-full">
            <a class="w-full bg-gray-300 shadow-lg ml-auto rounded-xl hover:scale-110 hover:shadow-2xl transition" href="https://www.youtube.com/watch?v=Z05vyaaSQEA" target="_blank" rel="noopener noreferrer">
                <img src="{{ asset('images/visuals/avis-client-video.webp') }}" alt="Qu'en pensent nos clients ?" class="w-full rounded-xl">
            </a>
        </div>

        <div class="flex justify-end md:col-span-2 px-8 md:px-0">
            <p class="text-xl text-center md:text-left">Vivez la même expérience que nos clients</p>
        </div>
    </div>

    <div class="swiper w-full md:col-span-2 h-80 relative p-12 select-none">
        <div class="swiper-wrapper">
            @foreach (\App\Models\Review::orderBy('published_at', 'desc')->get() as $review)
                @include('components.public.reviews.tiny', ['review' => $review])
            @endforeach
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev-custom absolute top-[45%] left-8 flex justify-center items-center w-10 h-10 text-xl bg-white shadow-lockit rounded-full z-40 text-lockit-blue"><i class="bi bi-arrow-left"></i></div>
        <div class="swiper-button-next-custom absolute top-[45%] right-8 flex justify-center items-center w-10 h-10 text-xl bg-white shadow-lockit rounded-full z-40 text-lockit-blue"><i class="bi bi-arrow-right"></i></div>
    </div>
</section>

@push('page.scripts')
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
@endpush

@push('page.scripts')
<script>
    const swiper = new Swiper('.swiper', {
        // Optional parameters
        direction: 'horizontal',

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next-custom',
            prevEl: '.swiper-button-prev-custom',
        },

        slidesPerView: 1,
        spaceBetween: 10,

        // Responsive breakpoints
        breakpoints: {
            // when window width is >= 480px
            430: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            // when window width is >= 640px
            640: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            1080: {
                slidesPerView:4,
                spaceBetween:30
            },
        }
    });
</script>
@endpush