<section class="py-16 md:py-24 bg-white" data-component-type="Content" data-component-slug="home-appliances-template-trusted-partnership-testimonial">
  <div class="max-w-[90%] mx-auto px-4">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      <!-- Left Content -->
      <div class="flex flex-col space-y-8">
        <!-- Badge -->
        <div>
          <span class="inline-block bg-[#3B41E3] text-white text-xs font-bold px-4 py-2 rounded-full uppercase tracking-wider" data-node="badge_text" data-node-type="text" data-node-default="Trusted Partnerships">{{badge_text}}</span>
        </div>

        <!-- Heading -->
        <h2 class="text-3xl md:text-5xl font-bold text-gray-900 leading-tight" data-node="heading" data-node-type="text" data-node-default="Powered by People Who Care">
          {{heading}}
        </h2>

        <section data-component-type="Gallery" class="relative w-full overflow-hidden" data-carousel>
          <!-- Slides Container -->
          <div class="relative h-[600px] md:h-[400px] lg:h-[400px]" data-slides>
            <!-- Slide 1 -->
            <div class="absolute inset-0 transition-opacity duration-500" data-slide="0">
              <div class="absolute inset-0 flex items-center justify-center">
                <div>
                  <!-- Testimonial Card -->
                  <div class="bg-[#FBEF56] p-8 rounded-lg shadow-sm">
                    <div class="flex items-center gap-4 mb-2">
                      <img src="{{testimonial_avatar}}" alt="Avatar" class="w-12 h-12 rounded-full object-cover" data-node="testimonial_avatar" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046124/seltrix/templates/home-appliances-template/avatar_fomra.jpg">
                      <div>
                        <h4 class="font-bold text-gray-900 text-lg" data-node="testimonial_name" data-node-type="text" data-node-default="Fomra Electricals">
                          {{testimonial_name}}
                        </h4>
                        <p class="text-sm text-gray-700" data-node="testimonial_role" data-node-type="text" data-node-default="Ullamcorper">
                          {{testimonial_role}}
                        </p>
                      </div>
                    </div>
                  </div>

                  <!-- Description -->
                  <p class="text-gray-600 leading-relaxed text-lg mt-[40px]" data-node="main_desc" data-node-type="textarea" data-node-default="Our team works closely with leading brands to ensure every product we offer meets quality, safety, & performance standards. Through continuous collaboration, we bring you appliances that combine advanced technology, long-life reliability, excellent value, making home living easier & smarter.">
                    {{main_desc}}
                  </p>
                </div>
              </div>
            </div>

            <!-- Slide 2 -->
            <div class="absolute inset-0 transition-opacity duration-500 opacity-0" data-slide="1">
              <div class="absolute inset-0 flex items-center justify-center">
                <div>
                  <!-- Testimonial Card -->
                  <div class="bg-[#FBEF56] p-8 rounded-lg shadow-sm">
                    <div class="flex items-center gap-4 mb-2">
                      <img src="{{testimonial2_avatar}}" alt="Avatar" class="w-12 h-12 rounded-full object-cover" data-node="testimonial2_avatar" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046124/seltrix/templates/home-appliances-template/avatar_fomra.jpg">
                      <div>
                        <h4 class="font-bold text-gray-900 text-lg" data-node="testimonial2_name" data-node-type="text" data-node-default="Fomra Electricals">
                          {{testimonial2_name}}
                        </h4>
                        <p class="text-sm text-gray-700" data-node="testimonial2_role" data-node-type="text" data-node-default="Ullamcorper">
                          {{testimonial2_role}}
                        </p>
                      </div>
                    </div>
                  </div>

                  <!-- Description -->
                  <p class="text-gray-600 leading-relaxed text-lg mt-[40px]" data-node="main_desc2" data-node-type="textarea" data-node-default="Our team works closely with leading brands to ensure every product we offer meets quality, safety, & performance standards. Through continuous collaboration, we bring you appliances that combine advanced technology, long-life reliability, excellent value, making home living easier & smarter.">
                    {{main_desc2}}
                  </p>
                </div>
              </div>
            </div>

            <!-- Slide 3 -->
            <div class="absolute inset-0 transition-opacity duration-500 opacity-0" data-slide="2">
              <div class="absolute inset-0 flex items-center justify-center">
                <div>
                  <!-- Testimonial Card -->
                  <div class="bg-[#FBEF56] p-8 rounded-lg shadow-sm">
                    <div class="flex items-center gap-4 mb-2">
                      <img src="{{testimonial3_avatar}}" alt="Avatar" class="w-12 h-12 rounded-full object-cover" data-node="testimonial3_avatar" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046124/seltrix/templates/home-appliances-template/avatar_fomra.jpg">
                      <div>
                        <h4 class="font-bold text-gray-900 text-lg" data-node="testimonial3_name" data-node-type="text" data-node-default="Fomra Electricals">
                          {{testimonial3_name}}
                        </h4>
                        <p class="text-sm text-gray-700" data-node="testimonial3_role" data-node-type="text" data-node-default="Ullamcorper">
                          {{testimonial3_role}}
                        </p>
                      </div>
                    </div>
                  </div>

                  <!-- Description -->
                  <p class="text-gray-600 leading-relaxed text-lg mt-[40px]" data-node="main_desc3" data-node-type="textarea" data-node-default="Our team works closely with leading brands to ensure every product we offer meets quality, safety, & performance standards. Through continuous collaboration, we bring you appliances that combine advanced technology, long-life reliability, excellent value, making home living easier & smarter.">
                    {{main_desc3}}
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- Dot Indicators -->
          <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex space-x-2" data-dots>
            <button type="button" class="w-3 h-3 rounded-full bg-[#1D398D]" data-dot="0" data-carousel-dot aria-label="Go to slide 1"></button>
            <button type="button" class="w-3 h-3 rounded-full bg-[#73748C]" data-dot="1" data-carousel-dot aria-label="Go to slide 2"></button>
            <button type="button" class="w-3 h-3 rounded-full bg-[#73748C]" data-dot="2" data-carousel-dot aria-label="Go to slide 3"></button>
          </div>
        </section>
      </div>

      <!-- Right Image -->
      <div class="relative">
        <div class="rounded-lg overflow-hidden shadow-2xl">
          <img src="{{hero_image}}" alt="Partnership" class="w-full h-auto object-cover" data-node="hero_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768048807/seltrix/templates/home-appliances-template/partnership_hero.png">
        </div>

        <!-- Overlay Stat Badge -->
        <div class="absolute bottom-8 right-8 bg-white p-6 rounded-lg shadow-lg text-center min-w-[180px]">
          <h3 class="text-3xl font-extrabold text-[#3B41E3]">
            <span data-counter="1" class="font-bold">0</span>
            <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" data-suffix="1" class="font-bold">{{counter_1_suffix}}</span>
          </h3>
          <p class="text-sm text-gray-800 font-medium" data-node="stat_label" data-node-type="text" data-node-default="Satisfied Customers">
            {{stat_label}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>