<section class="bg-[#F6FBFF] py-24" data-component-type="Content" data-component-slug="real-estate-template-we_love">
  <div class="max-w-[90%] mx-auto">

    <div class="bg-[#1b1b1b] rounded-2xl px-6 sm:px-10 lg:px-16 lg:py-16 py-[100px] overflow-hidden relative">

     
      <div class="flex flex-col lg:flex-row lg:items-center gap-6">

        <h2 class="text-white text-3xl sm:text-4xl lg:text-5xl font-semibold lg:leading-[48px] max-w-xl" data-node="testimonial_section_title" data-node-type="text" data-node-label="Section Title" data-node-default="We love hearing from our Customers">
          {{testimonial_section_title}}
        </h2>

        <!-- CENTER DIVIDER -->
        <div class="hidden lg:block flex-1 h-px bg-white/20"></div>

        <!-- BUTTON -->
        <a href="{{testimonial_cta_link}}" data-node="testimonial_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" class="bg-white text-black px-6 py-3 rounded-full text-sm font-medium whitespace-nowrap">
          <span data-node="testimonial_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="READ ALL STORIES">
            {{testimonial_cta_text}}
          </span>
        </a>

      </div>

      <!-- SLIDER WRAPPER -->
      <div class="mt-14 overflow-hidden">

        <!-- SLIDER TRACK -->
        <div id="testimonialTrack" class="flex transition-transform duration-500 ease-in-out">

          <!-- SLIDE 1 -->
          <div class="testimonial-slide min-w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">

            <!-- IMAGE -->
            <div class="overflow-hidden rounded-xl max-w-[500px] mx-auto lg:mx-0">
              <img src="{{testimonial_1_image}}" data-node="testimonial_1_image" data-node-type="file" data-node-label="Testimonial 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359404/seltrix/templates/real-estate-template/we1.png" class="w-full h-[360px] object-cover">
            </div>

            <!-- CONTENT -->
            <div class="text-white space-y-6">

              <span class="text-sm text-white/60" data-node="testimonial_1_tag" data-node-type="text" data-node-label="Testimonial 1 Tag" data-node-default="Exceptional Experience">
                {{testimonial_1_tag}}
              </span>

              <h3 class="text-xl sm:text-2xl font-semibold leading-relaxed" data-node="testimonial_1_title" data-node-type="text" data-node-label="Testimonial 1 Title" data-node-default="These homes truly redefine comfort and convenience.">
                “{{testimonial_1_title}}”
              </h3>

              <p class="text-white/60 text-sm sm:text-base leading-relaxed max-w-xl" data-node="testimonial_1_desc" data-node-type="text" data-node-label="Testimonial 1 Description" data-node-default="From the moment we stepped into the property, we knew it felt different.">
                {{testimonial_1_desc}}
              </p>

              <div class="border-t border-white/20 pt-6">

                <p class="font-semibold" data-node="testimonial_1_name" data-node-type="text" data-node-label="Customer Name" data-node-default="Ananya Rao">
                  {{testimonial_1_name}}
                </p>

                <p class="text-white/50 text-sm" data-node="testimonial_1_role" data-node-type="text" data-node-label="Customer Role" data-node-default="Marketing Executive, Chennai">
                  {{testimonial_1_role}}
                </p>

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

          <!-- SLIDE 2 -->
          <div class="testimonial-slide min-w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">

            <div class="overflow-hidden rounded-xl max-w-[500px] mx-auto lg:mx-0">
              <img src="{{testimonial_2_image}}" data-node="testimonial_2_image" data-node-type="file" data-node-label="Testimonial 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358815/seltrix/templates/real-estate-template/heroimg1.png" class="w-full h-[360px] object-cover">
            </div>

            <div class="text-white space-y-6">

              <span class="text-sm text-white/60" data-node="testimonial_2_tag" data-node-type="text" data-node-label="Testimonial 2 Tag" data-node-default="Trusted Living">
                {{testimonial_2_tag}}
              </span>

              <h3 class="text-xl sm:text-2xl font-semibold leading-relaxed" data-node="testimonial_2_title" data-node-type="text" data-node-label="Testimonial 2 Title" data-node-default="Thoughtful design and peaceful surroundings.">
                “{{testimonial_2_title}}”
              </h3>

              <p class="text-white/60 text-sm sm:text-base leading-relaxed max-w-xl" data-node="testimonial_2_desc" data-node-type="text" data-node-label="Testimonial 2 Description" data-node-default="Everything from layout to location was well planned.">
                {{testimonial_2_desc}}
              </p>

              <div class="border-t border-white/20 pt-6">

                <p class="font-semibold" data-node="testimonial_2_name" data-node-type="text" data-node-label="Customer Name" data-node-default="Rahul Mehta">
                  {{testimonial_2_name}}
                </p>

                <p class="text-white/50 text-sm" data-node="testimonial_2_role" data-node-type="text" data-node-label="Customer Role" data-node-default="Product Manager, Bengaluru">
                  {{testimonial_2_role}}
                </p>

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

        </div>
      </div>

      <!-- ARROWS -->
      <div class="absolute xl:bottom-[120px] lg:bottom-[110px] md:bottom-[80px] bottom-[30px] md:right-[100px] right-1/2 translate-x-1/2">
        <div class="flex gap-3">

          <button id="prevBtn" class="w-10 h-10 rounded-full border border-white/30 flex items-center justify-center text-white/70 hover:bg-white hover:text-black transition">
            ←
          </button>

          <button id="nextBtn" class="w-10 h-10 rounded-full border border-white/30 flex items-center justify-center text-white/70 hover:bg-white hover:text-black transition">
            →
          </button>

        </div>
      </div>

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