@php
    $testimonialContent = getContent('testimonials.content', true);
    $testimonialElement = getContent('testimonials.element', orderById: true);
@endphp
<section class="testimonials-section my-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-8">
                <div class="section-title text-center">
                    <span class="btn btn--base btn--section animate" data-direction="down">{{ __($testimonialContent?->data_values?->heading ?? '') }}</span>
                    <h2 class="main-title animate" data-direction="down">{{ __($testimonialContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down">{{ __($testimonialContent?->data_values?->short_details ?? '') }}</p>
                </div>
                <div class="happy-client justify-content-center mt-4 animate">
                    <img src="{{ frontendImage('testimonials', $testimonialContent?->data_values?->image_one ?? '', '60x60') }}" alt="user image">
                    <img src="{{ frontendImage('testimonials', $testimonialContent?->data_values?->image_two ?? '', '60x60') }}" alt="user image">
                    <img src="{{ frontendImage('testimonials', $testimonialContent?->data_values?->image_three ?? '', '60x60') }}" alt="user image">
                    <img src="{{ frontendImage('testimonials', $testimonialContent?->data_values?->image_four ?? '', '60x60') }}" alt="user image">
                    <p><span class="odometer-counter" data-start="0" data-target="1500"></span>{{ __($testimonialContent?->data_values?->title ?? '') }}</p>
                </div>
            </div>
        </div>
        <div class="row mt-60">
            <div class="col-12">
                <div class="testimonial-slider swiper">
                    <div class="swiper-wrapper">

                        @foreach ($testimonialElement as $testimonial)
                            <div class="swiper-slide">
                                <div class="testimonial-card animate">
                                    <div class="testimonial-card__header">
                                        <div class="user-content">
                                            <img src="{{ frontendImage('testimonials', $testimonial?->data_values?->image ?? '', '60x60') }}" alt="user image" class="user-img">
                                            <div class="user-text">
                                                <h6 class="mb-0">{{ __($testimonial?->data_values?->name ?? '') }}</h6>
                                                <div class="star-rating">
                                                    @for ($i = 0; $i < ($testimonial?->data_values?->rating ?? 5); $i++)
                                                        <i class="fa-solid fa-star"></i>
                                                    @endfor
                                                </div>
                                            </div>
                                        </div>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="67" height="48" viewBox="0 0 67 48" fill="none">
                                            <path d="M12.8181 31.2986C11.3525 34.9847 9.04316 38.6265 5.95652 42.1351C4.97946 43.2454 4.84622 44.8441 5.64561 46.0877C6.26744 47.0647 7.28883 47.5977 8.39912 47.5977C8.71002 47.5977 9.02095 47.5756 9.33186 47.4644C15.8603 45.5547 31.1158 38.782 31.5378 17.0645C31.6931 8.69301 25.5644 1.49832 17.5924 0.676704C13.1734 0.232564 8.77671 1.67586 5.51237 4.60706C2.24817 7.56049 0.382812 11.7797 0.382812 16.1764C0.382812 23.5043 5.57906 29.9219 12.8181 31.2986Z" fill="white" fill-opacity="0.05"></path>
                                            <path d="M53.0322 0.676704C48.6353 0.232564 44.2386 1.67586 40.9744 4.60706C37.7101 7.56049 35.8447 11.7797 35.8447 16.1764C35.8447 23.5043 41.041 29.9218 48.2801 31.2986C46.8145 34.9847 44.5051 38.6265 41.4184 42.1351C40.4414 43.2454 40.3081 44.8441 41.1077 46.0877C41.7294 47.0647 42.7509 47.5976 43.8612 47.5976C44.1719 47.5976 44.4829 47.5755 44.7938 47.4644C51.3223 45.5547 66.5778 38.782 66.9997 17.0645V16.7538C66.9997 8.51532 60.9375 1.49832 53.0322 0.676704Z" fill="white" fill-opacity="0.05"></path>
                                        </svg>
                                    </div>
                                    <div class="testimonial-card__content">
                                        <p>{{ __($testimonial?->data_values?->review ?? '') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="testimonial-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</section>