<section data-component-type="Content" class="w-full pt-0 pb-[100px] px-[24px] lg:px-10 md:py-20 md:px-5 sm:px-4 bg-white overflow-hidden" data-component-slug="clothing-template-testimonial">
  

  <div class="grid grid-cols-[1fr_1.4fr] lg:grid-cols-1 gap-20 items-center">
    <!-- Left Content -->
    <div>
      <h2 class="title-stroke font-black text-[64px] md:text-[44px] leading-[111%] mb-6" data-node="testimonial_title" data-node-type="text" data-node-label="Testimonial Title" data-node-default="Real fits. Real stories.">
        {{testimonial_title}}
      </h2>
      <p class="text-2xl leading-none mb-9 max-w-[520px]" data-node="testimonial_description" data-node-type="text" data-node-label="Testimonial Description" data-node-default="Every piece is tried, tested, and trusted by the people who wear the culture. Style that feels personal because it's made with you in mind.">
        {{testimonial_description}}
      </p>
      <a href="{{testimonial_cta_link}}" class="w-[323px] h-16 bg-[#010609] rounded-xl flex items-center justify-center text-white text-xl no-underline" data-node="testimonial_cta_link" data-node-type="text" data-node-label="Testimonial CTA Link" data-node-default="Hear Their Stories">
        <span data-node="testimonial_cta_text" data-node-type="text" data-node-default="Hear Their Stories" data-node-label="Testimonial CTA Text">
          {{testimonial_cta_text}}
        </span>
      </a>
    </div>

    <!-- Slider -->
    <div class="relative w-full overflow-hidden">
      <div class="testimonial-track flex gap-8 w-max">
        <!-- Card 1 -->
        <div class="w-[708px] md:w-[90vw] min-w-[708px] md:min-w-[90vw] h-[328px] bg-[#e7e8e2] rounded-xl p-10 flex flex-col gap-6">
          <div class="flex items-center gap-4">
            <img src="{{testimonial_1_image}}" data-node="testimonial_1_image" data-node-type="file" data-node-label="User Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744616/seltrix/templates/clothing-template/maya%20trent.png" class="w-14 h-14 rounded-full object-cover">
            <div class="title-stroke font-black text-[36px] leading-[111%]" data-node="testimonial_1_name" data-node-type="text" data-node-default="Maya Trent">
              {{testimonial_1_name}}
            </div>
          </div>
          <div class="text-2xl max-w-[565px]" data-node="testimonial_1_text" data-node-type="text" data-node-default="Every drop hits different. The fits last, the fabric feels premium, and the vibe is always on point. I've switched half my wardrobe to their pieces.">
            {{testimonial_1_text}}
          </div>
        </div>

        <!-- Card 2 -->
        <div class="w-[708px] md:w-[90vw] min-w-[708px] md:min-w-[90vw] h-[328px] bg-[#e7e8e2] rounded-xl p-10 flex flex-col gap-6">
          <div class="flex items-center gap-4">
            <img src="{{testimonial_2_image}}" data-node="testimonial_2_image" data-node-type="file" data-node-label="User Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744616/seltrix/templates/clothing-template/maya%20trent.png" class="w-14 h-14 rounded-full object-cover">
            <div class="title-stroke font-black text-[36px] leading-[111%]" data-node="testimonial_2_name" data-node-type="text" data-node-default="Jordan Blake">
              {{testimonial_2_name}}
            </div>
          </div>
          <div class="text-2xl max-w-[565px]" data-node="testimonial_2_text" data-node-type="text" data-node-default="The quality surprised me. Clean fits, solid fabric, and it actually feels built to last. Easily my go-to brand now.">
            {{testimonial_2_text}}
          </div>
        </div>

        <!-- Card 3 -->
        <div class="w-[708px] md:w-[90vw] min-w-[708px] md:min-w-[90vw] h-[328px] bg-[#e7e8e2] rounded-xl p-10 flex flex-col gap-6">
          <div class="flex items-center gap-4">
            <img src="{{testimonial_3_image}}" data-node="testimonial_3_image" data-node-type="file" data-node-label="User Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744616/seltrix/templates/clothing-template/maya%20trent.png" class="w-14 h-14 rounded-full object-cover">
            <div class="title-stroke font-black text-[36px] leading-[111%]" data-node="testimonial_3_name" data-node-type="text" data-node-default="Alex Rivera">
              {{testimonial_3_name}}
            </div>
          </div>
          <div class="text-2xl max-w-[565px]" data-node="testimonial_3_text" data-node-type="text" data-node-default="From the first wear, you can feel the difference. The style, the comfort, the confidence—it just works.">
            {{testimonial_3_text}}
          </div>
        </div>

        <!-- Duplicate Card 1 for infinite scroll -->
        <div class="w-[708px] md:w-[90vw] min-w-[708px] md:min-w-[90vw] h-[328px] bg-[#e7e8e2] rounded-xl p-10 flex flex-col gap-6">
          <div class="flex items-center gap-4">
            <img src="{{testimonial_1_image}}" class="w-14 h-14 rounded-full object-cover">
            <div class="title-stroke font-black text-[36px] leading-[111%]">{{testimonial_1_name}}</div>
          </div>
          <div class="text-2xl max-w-[565px]">{{testimonial_1_text}}</div>
        </div>
      </div>
    </div>
  </div>
</section>