<section class="bg-white py-12 lg:py-18" data-component-type="Content" data-component-slug="ss-technology-template-testimonial_experience">
  <div class="max-w-[90%] mx-auto px-6 sm:px-12">
    
    <!-- Section Header -->
    <div class="text-center mb-16">
       <!-- Badge -->
      <div class="inline-flex items-center gap-2 bg-[#E2FC80] px-4 py-2 rounded-lg mb-6">
          <img src="{{badge_icon}}" data-node="badge_icon" data-node-type="file" data-node-label="Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-5 h-5 object-contain" alt="icon">
          <span class="text-[#0A2519] font-medium" data-node="testi_badge_text" data-node-type="text" data-node-label="Badge Text" data-node-default="Experience">
            {{testi_badge_text}}
          </span>
      </div>
      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[#003D33] leading-tight" data-node="testi_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Customer Reviews">
        {{testi_heading}}
      </h2>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      
      <!-- Left Card (Green Stats) -->
      <div class="bg-[#E2FC80] rounded-[32px] p-10 flex flex-col justify-between min-h-[300px] lg:col-span-1">
        <div>
           <div class="text-6xl font-bold text-[#0A2519] mb-4">
              <span data-node="stat_value" data-node-type="text" data-node-label="Stat Value" data-node-default="75K">
                {{stat_value}}
              </span>
           </div>
           <p class="text-[#0A2519] text-xl font-medium leading-normal" data-node="stat_desc" data-node-type="textarea" data-node-label="Stat Description" data-node-default="Real feedbacks from decision-makers.">
             {{stat_desc}}
           </p>
        </div>
        
        <div class="mt-8">
           <p class="text-[#0A2519] text-sm opacity-80 leading-relaxed" data-node="stat_footer" data-node-type="textarea" data-node-label="Stat Footer" data-node-default="The people who rely on us daily don't talk about hype, they talk about results.">
             {{stat_footer}}
           </p>
        </div>
      </div>


    
      <!-- Wrapper for Slider -->
      <div class="lg:col-span-2 overflow-hidden relative ">
        <div id="testimonialTrack" class="flex transition-transform duration-700 ease-in-out">

          <!-- SLIDE 1 -->
          <div class="testimonial-slide min-w-full bg-[#F5F9F6] rounded-[32px] p-12 flex flex-col justify-center">
             <!-- Stars -->
             <div class="flex gap-1 mb-6">
                  <img src="{{star_icon1}}" data-node="star_icon1" data-node-type="file" data-node-label="Star Icon1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star_icon2}}" data-node="star_icon2" data-node-type="file" data-node-label="Star Icon2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star_icon3}}" data-node="star_icon3" data-node-type="file" data-node-label="Star Icon3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star_icon4}}" data-node="star_icon4" data-node-type="file" data-node-label="Star Icon4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star_icon5}}" data-node="star_icon5" data-node-type="file" data-node-label="Star IcoSSn5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
             </div>
             
             <!-- Review Headline -->
             <h3 class="text-2xl md:text-3xl font-bold text-[#003D33] mb-6 leading-tight" data-node="review_headline" data-node-type="textarea" data-node-label="Review Headline" data-node-default="This Platfrom is so great that it solves my problem under 30 mins.">
               {{review_headline}}
             </h3>

             <!-- Review Body -->
             <p class="text-[#4A736D] text-lg leading-relaxed mb-10" data-node="review_body" data-node-type="textarea" data-node-label="Review Body" data-node-default="As a CEO, I don’t experiment with financial platforms. This one delivers consistency, security, and clarity, exactly what our operations require. We stopped worrying about payments the day we switched.">
               {{review_body}}
             </p>

             <!-- Reviewer Info -->
             <div class="flex items-center flex-col md:flex-row justify-between">
                <div class="flex items-center gap-4">
                   <img src="{{reviewer_image}}" data-node="reviewer_image" data-node-type="file" data-node-label="Reviewer Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956679/seltrix/templates/ss-technology-template/p1.jpg" class="w-14 h-14 rounded-full object-cover" alt="Reviewer">
                   <div>
                      <h4 class="text-[#003D33] font-bold text-[18px] md:text-lg" data-node="reviewer_name" data-node-type="text" data-node-label="Reviewer Name" data-node-default="Michael John">
                        {{reviewer_name}}
                      </h4>
                      <p class="text-[#4A736D] text-sm" data-node="reviewer_title" data-node-type="text" data-node-label="Reviewer Title" data-node-default="Ceo of xyz">
                        {{reviewer_title}}
                      </p>
                   </div>
                </div>
                
                <span class="text-[#003D33] font-medium" data-node="review_date" data-node-type="text" data-node-label="Review Date" data-node-default="Dec 2025">
                   {{review_date}}
                </span>
             </div>
          </div>

          <!-- Slider 2 -->
          <div class="testimonial-slide min-w-full bg-[#F5F9F6] rounded-[32px] p-12 flex flex-col justify-center">
             <!-- Stars -->
             <div class="flex gap-1 mb-6">
                  <img src="{{star2_icon1}}" data-node="star2_icon1" data-node-type="file" data-node-label="Star Icon1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star2_icon2}}" data-node="star2_icon2" data-node-type="file" data-node-label="Star Icon2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star2_icon3}}" data-node="star2_icon3" data-node-type="file" data-node-label="Star Icon3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star2_icon4}}" data-node="star2_icon4" data-node-type="file" data-node-label="Star Icon4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
                 <img src="{{star2_icon5}}" data-node="star2_icon5" data-node-type="file" data-node-label="Star Icon5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-6 h-6" alt="star">
             </div>
             
             <!-- Review Headline -->
             <h3 class="text-2xl md:text-3xl font-bold text-[#003D33] mb-6 leading-tight" data-node="review2_headline" data-node-type="textarea" data-node-label="Review 2 Headline" data-node-default="This Platfrom is so great that it solves my problem under 30 mins.">
               {{review2_headline}}
             </h3>

             <!-- Review Body -->
             <p class="text-[#4A736D] text-lg leading-relaxed mb-10" data-node="review_body2" data-node-type="textarea" data-node-label="Review Body2" data-node-default="As a CEO, I don’t experiment with financial platforms. This one delivers consistency, security, and clarity, exactly what our operations require. We stopped worrying about payments the day we switched.">
               {{review_body2}}
             </p>

             <!-- Reviewer Info -->
             <div class="flex items-center flex-col md:flex-row justify-between">
                <div class="flex items-center gap-4">
                   <img src="{{reviewer2_image}}" data-node="reviewer2_image" data-node-type="file" data-node-label="Reviewer2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956679/seltrix/templates/ss-technology-template/p1.jpg" class="w-14 h-14 rounded-full object-cover" alt="Reviewer">
                   <div>
                      <h4 class="text-[#003D33] font-bold text-lg" data-node="reviewer2_name" data-node-type="text" data-node-label="Reviewer 2 Name" data-node-default="Michael John">
                        {{reviewer2_name}}
                      </h4>
                      <p class="text-[#4A736D] text-sm" data-node="reviewer2_title" data-node-type="text" data-node-label="Reviewer2 Title" data-node-default="Ceo of xyz">
                        {{reviewer_title}}
                      </p>
                   </div>
                </div>
                
                <span class="text-[#003D33] font-medium" data-node="review_date2" data-node-type="text" data-node-label="Review Date2" data-node-default="Dec 2025">
                   {{review_date2}}
                </span>
             </div>
          </div>

        </div>
      </div>
      
    </div>
  </div>
</section>