<?php
        if(get_theme_mod('howcan_testi_on') ){
  ?> 
         
    
<section class="py-5 position-relative" style="background: linear-gradient(135deg, #f8fafc 0%, #eef1f7 100%);">
  <div class="container">
    <!-- Section Title -->
    <div class="text-center mb-5">
      <h2 class="fw-bold display-6 text-dark mb-3">
        <?php echo esc_html(get_theme_mod('testi_section_title'),'howcan'); ?>
      </h2>
      <p class="text-muted fs-5">
        <?php echo esc_html(get_theme_mod('testi_section_dsc'),'howcan'); ?>
      </p>
    </div>

    <!-- Swiper -->
    <div class="swiper testimonialSwiper">
      <div class="swiper-wrapper">

        <!-- Testimonial 1 -->
        <div class="swiper-slide">
          <div class="card border-0 shadow-lg text-center p-4" style="border-radius: 1.5rem; backdrop-filter: blur(8px); background: rgba(255,255,255,0.9);">
            <img width="90" height="90" src="<?php echo esc_url(get_theme_mod('test_reviewer_img')); ?>" class="rounded-circle mx-auto mb-3 shadow-sm" alt="Client 1">
            <p class="text-muted fst-italic mb-4">
              “<?php echo esc_html(get_theme_mod('test_reviewer_text')); ?>”
            </p>
            <h5 class="fw-bold text-dark mb-1"><?php echo esc_html(get_theme_mod('test_reviewer_name')); ?></h5>
            <small class="text-primary"><?php echo esc_html(get_theme_mod('test_reviewer_position')); ?></small>
          </div>
        </div>

        <!-- Testimonial 2 -->
        <div class="swiper-slide">
          <div class="card border-0 shadow-lg text-center p-4" style="border-radius: 1.5rem; backdrop-filter: blur(8px); background: rgba(255,255,255,0.9);">
            <img width="90" height="90" src="<?php echo esc_url(get_theme_mod('test_reviewer_img2')); ?>" class="rounded-circle mx-auto mb-3 shadow-sm" alt="Client 2">
            <p class="text-muted fst-italic mb-4">
              “<?php echo esc_html(get_theme_mod('test_reviewer_text2')); ?>”
            </p>
            <h5 class="fw-bold text-dark mb-1"><?php echo esc_html(get_theme_mod('test_reviewer_name2')); ?></h5>
            <small class="text-primary"><?php echo esc_html(get_theme_mod('test_reviewer_position2')); ?></small>
          </div>
        </div>

        <!-- Testimonial 3 -->
        <div class="swiper-slide">
          <div class="card border-0 shadow-lg text-center p-4" style="border-radius: 1.5rem; backdrop-filter: blur(8px); background: rgba(255,255,255,0.9);">
            <img width="90" height="90" src="<?php echo esc_url(get_theme_mod('test_reviewer_img3')); ?>" class="rounded-circle mx-auto mb-3 shadow-sm" alt="Client 3">
            <p class="text-muted fst-italic mb-4">
              “<?php echo esc_html(get_theme_mod('test_reviewer_text3')); ?>”
            </p>
            <h5 class="fw-bold text-dark mb-1"><?php echo esc_html(get_theme_mod('test_reviewer_name3')); ?></h5>
            <small class="text-dark"><?php echo esc_html(get_theme_mod('test_reviewer_position3')); ?></small>
          </div>
        </div>

      </div>

      <!-- Pagination -->
      <div class="swiper-pagination mt-4"></div>

      <!-- Navigation Buttons -->
     
    </div>
  </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
  new Swiper('.testimonialSwiper', {
    slidesPerView: 'auto',       // স্বয়ংক্রিয়ভাবে স্লাইডের সংখ্যা
    spaceBetween: 30,
    loop: true,                  // অনন্ত লুপ
    freeMode: true,              // Premium smooth scrolling
    speed: 8000,                 // scroll speed
    autoplay: {
      delay: 1,                  // delay কম, যাতে continuous feel আসে
      disableOnInteraction: false,
    },
    loopedSlides: 3,             // কমপক্ষে 3 স্লাইড থাকলে seamless
    centeredSlides: false,
    breakpoints: {
      768: { slidesPerView: 2 },
      992: { slidesPerView: 3 },
    },
  });
});
</script>     
          
<?php
        }
        
?>

