<section class="bg-[#F6F6F6] py-20" data-component-type="Content">
  <div class="max-w-[90%] mx-auto px-6 lg:px-10">

    <!-- Top Label -->
    <div class="flex justify-center">
    <span
        class="px-4 py-2 rounded-full border border-[#E9E9E9] text-sm font-medium"
        data-node="testimonial_label"
        data-node-type="text"
        data-node-label="Section Label"
        data-node-default="What Our Students Say"
      >
        {{testimonial_label}}
      </span>
    </div>

    <!-- Stars -->
    <div class="flex justify-center mt-4 gap-1 text-orange-400">
      <img src="../assets/gold_star.png" class="w-[20px] h-[20px]"/>
     <img src="../assets/gold_star.png" class="w-[20px] h-[20px]"/>
      <img src="../assets/gold_star.png" class="w-[20px] h-[20px]"/>
       <img src="../assets/gold_star.png" class="w-[20px] h-[20px]"/>
        <img src="../assets/gold_star.png" class="w-[20px] h-[20px]"/>
    </div>

 

    <div class="relative w-full max-w-5xl mx-auto overflow-hidden">
  <!-- SLIDES WRAPPER -->
  <div
    id="slider"
    class="flex transition-transform duration-500 ease-in-out"
  >
    <!-- Slide 1 -->
    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6] h-64">
        <p
            class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]"
            data-node="testimonial_1"
            data-node-type="text"
            data-node-label="Testimonial 1"
            data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories."
          >
            {{testimonial_1}}
          </p>

    </div>

    <!-- Slide 2 -->
    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
      <p
            class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]"
            data-node="testimonial_2"
            data-node-type="text"
            data-node-label="Testimonial 2"
            data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories."
          >
            {{testimonial_2}}
          </p>
    </div>

    <!-- Slide 3 -->
    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
         <p
            class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]"
            data-node="testimonial_3"
            data-node-type="text"
            data-node-label="Testimonial 3"
            data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories."
          >
            {{testimonial_3}}
          </p>
    </div>

    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
        <p
            class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]"
            data-node="testimonial_4"
            data-node-type="text"
            data-node-label="Testimonial 4"
            data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories."
          >
            {{testimonial_4}}
          </p>
    </div>


    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
       <p
            class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]"
            data-node="testimonial_5"
            data-node-type="text"
            data-node-label="Testimonial 5"
            data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories."
          >
            {{testimonial_5}}
          </p>
    </div>

    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
      <p
            class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]"
            data-node="testimonial_6"
            data-node-type="text"
            data-node-label="Testimonial 6"
            data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories."
          >
            {{testimonial_6}}
          </p>
    </div>
  </div>

  <!-- PREV BUTTON -->
  <button
    onclick="prevSlide()"
    class="absolute left-4 top-1/2 -translate-y-1/2  text-white px-3 py-3 rounded-full bg-[#E9E9E9] "
  >
      <b>  <img src="../assets/left.png" class="w-[20px] h-[20px] p-[2px]"/></b> 
  </button>

  <!-- NEXT BUTTON -->
  <button
    onclick="nextSlide()"
    class="absolute right-4 top-1/2 -translate-y-1/2 bg-[#E9E9E9] text-white px-3 py-3 rounded-full"
  >
     <b>  <img src="../assets/right.png" class="w-[20px] h-[20px] p-[2px]"/></b> 
  </button>
</div>



    <!-- User Tabs -->
   <div class="mt-12 max-w-[90%] mx-auto">
   <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 lg:grid-cols-3 mx-auto gap-4 justify-center px-4">

  <!-- User 1 -->
  <div data-index="0" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-emerald-600 text-white min-w-[160px]">
    <img
      src="{{user_1_image}}"
      data-node="user_1_image"
      data-node-type="file"
      data-node-label="User 1 Image"
      data-node-default="../assets/w2.png"
      class="w-8 h-8 rounded-full"
    />
    <span
      class="text-sm font-medium"
      data-node="user_1_name"
      data-node-type="text"
      data-node-label="User 1 Name"
      data-node-default="Sarah Thomas"
    >
      {{user_1_name}}
    </span>
  </div>

  <!-- User 2 -->
  <div data-index="1" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img
      src="{{user_2_image}}"
      data-node="user_2_image"
      data-node-type="file"
      data-node-label="User 2 Image"
      data-node-default="../assets/w3.png"
      class="w-8 h-8 rounded-full"
    />
    <span
      class="text-sm font-medium"
      data-node="user_2_name"
      data-node-type="text"
      data-node-label="User 2 Name"
      data-node-default="Meera Patel"
    >
      {{user_2_name}}
    </span>
  </div>

  <!-- User 3 -->
  <div data-index="2" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img
      src="{{user_3_image}}"
      data-node="user_3_image"
      data-node-type="file"
      data-node-label="User 3 Image"
      data-node-default="../assets/w4.png"
      class="w-8 h-8 rounded-full"
    />
    <span
      class="text-sm font-medium"
      data-node="user_3_name"
      data-node-type="text"
      data-node-label="User 3 Name"
      data-node-default="Aarav Mehta"
    >
      {{user_3_name}}
    </span>
  </div>

  <!-- User 4 -->
  <div data-index="3" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img
      src="{{user_4_image}}"
      data-node="user_4_image"
      data-node-type="file"
      data-node-label="User 4 Image"
     data-node-default="../assets/w5.png"
      class="w-8 h-8 rounded-full"
    />
    <span
      class="text-sm font-medium"
      data-node="user_4_name"
      data-node-type="text"
      data-node-label="User 4 Name"
      data-node-default="Rohan Kumar"
    >
      {{user_4_name}}
    </span>
  </div>

  <!-- User 5 -->
  <div data-index="4" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img
      src="{{user_5_image}}"
      data-node="user_5_image"
      data-node-type="file"
      data-node-label="User 5 Image"
      data-node-default="../assets/w6.png"
      class="w-8 h-8 rounded-full"
    />
    <span
      class="text-sm font-medium"
      data-node="user_5_name"
      data-node-type="text"
      data-node-label="User 5 Name"
      data-node-default="Priya Nair"
    >
      {{user_5_name}}
    </span>
  </div>

  <!-- User 6 -->
  <div data-index="5" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img
      src="{{user_6_image}}"
      data-node="user_6_image"
      data-node-type="file"
      data-node-label="User 6 Image"
      data-node-default="../assets/w7.png"
      class="w-8 h-8 rounded-full"
    />
    <span
      class="text-sm font-medium"
      data-node="user_6_name"
      data-node-type="text"
      data-node-label="User 6 Name"
      data-node-default="Aditya Roy"
    >
      {{user_6_name}}
    </span>
  </div>

</div>

</div>


  </div>
</section>


<script>
document.addEventListener("DOMContentLoaded", function () {
  const slider = document.getElementById("slider");
  const slides = slider.children.length;
  const tabs = document.querySelectorAll(".user-tab");

  let currentSlide = 0;

  function updateSlider() {
    slider.style.transform = `translateX(-${currentSlide * 100}%)`;

    tabs.forEach((tab, index) => {
      if (index === currentSlide) {
        tab.classList.remove("bg-white");
        tab.classList.add("bg-emerald-600", "text-white");
      } else {
        tab.classList.remove("bg-emerald-600", "text-white");
        tab.classList.add("bg-white");
      }
    });
  }

  window.nextSlide = function () {
    currentSlide = (currentSlide + 1) % slides;
    updateSlider();
  };

  window.prevSlide = function () {
    currentSlide = (currentSlide - 1 + slides) % slides;
    updateSlider();
  };

  // Initial state
  updateSlider();
});
</script>

