"use client";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import clientFourImg1 from "../../../public/assets/images/resources/client-four-img-1.png";
import clientFourImg2 from "../../../public/assets/images/resources/client-four-img-2.png";
import clientFourImg3 from "../../../public/assets/images/resources/client-four-img-3.png";
import clientFourImg4 from "../../../public/assets/images/resources/client-four-img-4.png";
import clientFourImg5 from "../../../public/assets/images/resources/client-four-img-5.png";
import clientFourImg6 from "../../../public/assets/images/resources/client-four-img-6.png";
import clientFourImg7 from "../../../public/assets/images/resources/client-four-img-7.png";

const settingsPartner = {
  easing: "linear",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
  ],
};

function PartnerFour() {
  return (
    <div>
      <section className="partener-four">
        <div className="container-fluid">
          <div
            className="partener-four-title text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="100ms"
          >
            <p>
              I’ve <span>1253+</span> Global Clients &amp; lot’s of Project
              Complete
            </p>
          </div>
          <Swiper
            className="swiper-wrapper"
            data-wow-duration="1500ms"
            data-wow-delay="300ms"
            {...settingsPartner}
            slidesPerView={7}
            slidestoscroll={1}
            spaceBetween={20}
          >
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg1.src} alt="client-four-img-1" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg2.src} alt="client-four-img-2" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg3.src} alt="client-four-img-3" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg4.src} alt="client-four-img-4" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg5.src} alt="client-four-img-5" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg6.src} alt="client-four-img-6" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg7.src} alt="client-four-img-7" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg1.src} alt="client-four-img-1" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg2.src} alt="client-four-img-2" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg3.src} alt="client-four-img-3" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg4.src} alt="client-four-img-4" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg5.src} alt="client-four-img-5" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg6.src} alt="client-four-img-6" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-four-single">
              <div className="partener-four-img-box">
                <img src={clientFourImg7.src} alt="client-four-img-7" />
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </section>
    </div>
  );
}

export default PartnerFour;
