<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- 
  Trusted Agencies Section Component
  Logo carousel with heading
-->
<section class="flex justify-center pt-5 relative bg-white" data-component-type="Content">
  <div class="w-full lg:max-w-[90%] max-w-full relative">
    <div class="text-center">
      <h1
        data-node="trusted_heading"
        data-node-type="text"
        data-node-label="Trusted Agencies Heading"
        data-node-default="Trusted by 1,000+ Agencies"
        class="text-dark text-[40px] text-center mt-3 mb-3 font-bold py-2 rounded-md"
      >
        {{trusted_heading}}
      </h1>

      <h1
        data-node="trusted_subheading"
        data-node-type="textarea"
        data-node-label="Trusted Agencies Subheading"
        data-node-default="Built to simplify operations, communications, and unlock productivity for teams of every size."
        class="text-[#4A6673] text-[20px] font-bold py-1 rounded-md"
      >
        {{trusted_subheading}}
      </h1>
    </div>

    <!-- LEFT FADE -->
    <div
      class="absolute left-0 top-0 h-full w-[300px] z-20 pointer-events-none bg-gradient-to-r from-white/100 to-transparent"
    ></div>

    <div
      class="absolute right-0 top-0 h-full w-[300px] z-20 pointer-events-none bg-gradient-to-l from-white/100 to-transparent"
    ></div>

    <div class="swiper multiple-slide-carousel swiper-container relative mt-[50px]">
      <div class="swiper-wrapper mb-16">
        <div class="swiper-slide">
          <div class="rounded-3xl flex justify-center items-center">
            <div class="relative w-full max-w-[200px] overflow-hidden transition-all duration-500 hover:scale-105">
              <img
                data-node="trusted_logo_1"
                data-node-type="file"
                data-node-label="Trusted Logo 1"
                data-node-default="../assets/TrustedAgen/agent1.png"
                src="{{trusted_logo_1}}"
                alt="Agency logo"
                class="w-full object-cover"
              />
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="rounded-3xl flex justify-center items-center">
            <div class="relative w-full max-w-[200px] overflow-hidden transition-all duration-500 hover:scale-105">
              <img
                data-node="trusted_logo_2"
                data-node-type="file"
                data-node-label="Trusted Logo 2"
                data-node-default="../assets/TrustedAgen/agent2.png"
                src="{{trusted_logo_2}}"
                alt="Agency logo"
                class="w-full object-cover"
              />
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="rounded-3xl flex justify-center items-center">
            <div class="relative w-full max-w-[200px] overflow-hidden transition-all duration-500 hover:scale-105">
              <img
                data-node="trusted_logo_3"
                data-node-type="file"
                data-node-label="Trusted Logo 3"
                data-node-default="../assets/TrustedAgen/agent3.png"
                src="{{trusted_logo_3}}"
                alt="Agency logo"
                class="w-full object-cover"
              />
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="rounded-3xl flex justify-center items-center">
            <div class="relative w-full max-w-[200px] overflow-hidden transition-all duration-500 hover:scale-105">
              <img
                data-node="trusted_logo_4"
                data-node-type="file"
                data-node-label="Trusted Logo 4"
                data-node-default="../assets/TrustedAgen/agent4.png"
                src="{{trusted_logo_4}}"
                alt="Agency logo"
                class="w-full object-cover"
              />
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="rounded-3xl flex justify-center items-center">
            <div class="relative w-full max-w-[200px] overflow-hidden transition-all duration-500 hover:scale-105">
              <img
                data-node="trusted_logo_5"
                data-node-type="file"
                data-node-label="Trusted Logo 5"
                data-node-default="../assets/TrustedAgen/agent4.png"
                src="{{trusted_logo_5}}"
                alt="Agency logo"
                class="w-full object-cover"
              />
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="rounded-3xl flex justify-center items-center">
            <div class="relative w-full max-w-[200px] overflow-hidden transition-all duration-500 hover:scale-105">
              <img
                data-node="trusted_logo_6"
                data-node-type="file"
                data-node-label="Trusted Logo 6"
                data-node-default="../assets/TrustedAgen/agent3.png"
                src="{{trusted_logo_6}}"
                alt="Agency logo"
                class="w-full object-cover"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  const swiper = new Swiper(".multiple-slide-carousel", {
    slidesPerView: 4,
    spaceBetween: 20,
    loop: true,
    autoplay: {
      delay: 3800,
      disableOnInteraction: false,
    },

    breakpoints: {
      640: { slidesPerView: 2 },
      768: { slidesPerView: 3 },
      1000: { slidesPerView: 4 },
      1250: { slidesPerView: 6 },
    },
    navigation: {
      nextEl: "#slider-button-right",
      prevEl: "#slider-button-left",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>
