<section data-component-type="Content" class="testimonials-section">
  <style>
    .testimonials-section {
      width: 100%;
      padding: 0px 100px 100px;
      background: #ffffff;
      overflow: hidden;
    }

    .testimonials-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 80px;
      align-items: center;
    }

    .testimonial-left h2 {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 64px;
      line-height: 111%;
      margin-bottom: 24px;
    }

    .testimonial-left p {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      line-height: 100%;
      margin-bottom: 36px;
      max-width: 520px;
    }

    .testimonial-btn {
      width: 323px;
      height: 64px;
      background: #010609;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      text-decoration: none;
    }

    .testimonial-slider {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .testimonial-track {
      display: flex;
      gap: 32px;
      animation: scrollLoop 30s linear infinite;
      width: max-content;
    }

    @keyframes scrollLoop {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    .testimonial-card {
      width: 708px;
      min-width: 708px;
      height: 328px;
      background: #e7e8e2;
      border-radius: 12px;
      padding: 40px 39px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .testimonial-user {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .testimonial-user img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-name {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 36px;
      line-height: 111%;
    }

    .testimonial-text {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      max-width: 565px;
    }

    @media (max-width: 1024px) {
      .testimonials-layout {
        grid-template-columns: 1fr;
      }

      .testimonial-track {
        animation-duration: 40s;
      }
    }

    @media (max-width: 768px) {
      .testimonials-section {
        padding: 80px 20px;
      }

      .testimonial-card {
        width: 90vw;
        min-width: 90vw;
      }

      .testimonial-left h2 {
        font-size: 44px;
      }
    }
  </style>

  <div class="testimonials-layout">
    <div class="testimonial-left">
      <h2
        data-node="testimonial_title"
        data-node-type="text"
        data-node-default="Real fits. Real stories."
      >
        {{testimonial_title}}
      </h2>

      <p
        data-node="testimonial_description"
        data-node-type="text"
        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="testimonial-btn"
        data-node="testimonial_cta_text"
        data-node-type="text"
        data-node-default="Hear Their Stories"
      >
        {{testimonial_cta_text}}
      </a>
    </div>

    <div class="testimonial-slider">
      <div class="testimonial-track">
        <div class="testimonial-card">
          <div class="testimonial-user">
            <img
              src="{{testimonial_1_image}}"
              data-node="testimonial_1_image"
              data-node-type="file"
              data-node-default="../assets/maya trent.png"
            />
            <div
              class="testimonial-name"
              data-node="testimonial_1_name"
              data-node-type="text"
              data-node-default="Maya Trent"
            >
              {{testimonial_1_name}}
            </div>
          </div>

          <div
            class="testimonial-text"
            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>

        <div class="testimonial-card">
          <div class="testimonial-user">
            <img
              src="{{testimonial_2_image}}"
              data-node="testimonial_2_image"
              data-node-type="file"
              data-node-default="../assets/maya trent.png"
            />
            <div
              class="testimonial-name"
              data-node="testimonial_2_name"
              data-node-type="text"
              data-node-default="Jordan Blake"
            >
              {{testimonial_2_name}}
            </div>
          </div>

          <div
            class="testimonial-text"
            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>

        <div class="testimonial-card">
          <div class="testimonial-user">
            <img
              src="{{testimonial_3_image}}"
              data-node="testimonial_3_image"
              data-node-type="file"
              data-node-default="../assets/maya trent.png"
            />
            <div
              class="testimonial-name"
              data-node="testimonial_3_name"
              data-node-type="text"
              data-node-default="Alex Rivera"
            >
              {{testimonial_3_name}}
            </div>
          </div>

          <div
            class="testimonial-text"
            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>

        <div class="testimonial-card">
          <div class="testimonial-user">
            <img src="{{testimonial_1_image}}" />
            <div class="testimonial-name">{{testimonial_1_name}}</div>
          </div>
          <div class="testimonial-text">{{testimonial_1_text}}</div>
        </div>
      </div>
    </div>
  </div>
</section>
