@if(isset($testimonials) && count($testimonials) > 0)
<div class="container-fluid px-0 mx-0 py-5 testimonials-section mb-md-5 mb-4"> <!-- Placeholder for pattern bg -->
    <div class="position-relative">
        <div class="text-center mb-5 testimonials-head-titles">
            <h2 class="section-title fw-bold text_3"> {{$home_setting->home_settings_title}}</h2>
            <p class="text_6 font-16 d-md-block d-none"> {{$home_setting->home_settings_sub_title}}</p>
        </div>

        <div class="swiper-container testimonials-swiper">
            <div class="swiper-wrapper">
                @foreach($testimonials as $testimonial)
                    @php
                        $hasImage = !empty($testimonial->testimonials_image);
                        $imagePath = $hasImage
                            ? $imagesBaseUrl.'uploads/'.env('accountId').'/testimonials/original/'.$testimonial->testimonials_image
                            : null;
                        $firstLetter = mb_substr($testimonial->testimonials_name, 0, 1, 'UTF-8');
                    @endphp
                    <div class="swiper-slide">
                        <div class="card h-100 testimonial-card border-0 shadow-sm"
                             data-name="{{ $testimonial->testimonials_name }}"
                             data-image="{{ $imagePath }}"
                             data-has-image="{{ $hasImage ? '1' : '0' }}"
                             data-first-letter="{{ $firstLetter }}">
                            <div class="card-body text-center d-flex flex-column align-items-center">
                                <div class="mb-3 position-relative">
                                    {{-- Decorative elements (Wheat) - Placeholders --}}
                                    <span class="decorative-element left"> <i class="polaris-max-icon-brand-icon-6 text_1"></i> </span>
                                    <div class="avatar-container">
                                        @if($hasImage)
                                            <img src="{{ $imagePath }}" alt="{{ $testimonial->testimonials_name }}" class="rounded-circle img-fluid testimonial-avatar" width="60" height="60">
                                        @else
                                            <div class="rounded-circle testimonial-avatar d-flex align-items-center justify-content-center"
                                                 style="background-color: #E8D2C7; color: var(--text_1); font-size: 20px; font-weight: bold;">
                                                {{ $firstLetter }}
                                            </div>
                                        @endif
                                    </div>

                                    <span class="decorative-element right"><i class="polaris-max-icon-brand-icon-6 text_1 "></i> </span>
                                </div>

                                <h5 class="card-title mb-3 text_4">{{ $testimonial->testimonials_name }}</h5>