"use client";
import ClientOneImg1 from "../../../public/assets/images/resources/client-one-img-1.png";
import ClientOneImg2 from "../../../public/assets/images/resources/client-one-img-2.png";
import ClientOneImg3 from "../../../public/assets/images/resources/client-one-img-3.png";
import ClientOneImg4 from "../../../public/assets/images/resources/client-one-img-4.png";
import ClientOneImg5 from "../../../public/assets/images/resources/client-one-img-5.png";
import ClientOneImg6 from "../../../public/assets/images/resources/client-one-img-6.png";
import ClientOneImg7 from "../../../public/assets/images/resources/client-one-img-7.png";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

const Clientslider = {
  loop: true,
  autoplay: {
    delay: 1000,
  },
  slidesPerView: 7,
  speed: 1000,
  breakpoints: {
    0: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    992: {
      slidesPerView: 1,
      spaceBetween: 50,
    },
    1119: {
      slidesPerView: 7,
      spaceBetween: 50,
    },
  },
};

function PartnerFive() {
  return (
    <div>
      <section className="partener-five">
        <div className="container-fluid">
          <div
            className="partener-five-title text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="100ms"
          >
            <p>Ive 1253+ Global Clients &amp; lots of Project Complete</p>
          </div>
          <Swiper
            className="swiper-wrapper"
            data-wow-duration="1500ms"
            data-wow-delay="300ms"
            autoplay={true}
            autoplayspeed={1000}
            {...Clientslider}
            slidesperview={7}
            slidestoscroll={1}
            spaceBetween={20}
          >
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg1.src} alt="client-one-img-1" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg2.src} alt="client-one-img-2" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg3.src} alt="client-one-img-3" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg4.src} alt="client-one-img-4" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg5.src} alt="client-one-img-5" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg6.src} alt="client-one-img-6" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg7.src} alt="client-one-img-7" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg1.src} alt="client-one-img-1" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg2.src} alt="client-one-img-2" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg3.src} alt="client-one-img-3" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg4.src} alt="client-one-img-4" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg5.src} alt="client-one-img-5" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg6.src} alt="client-one-img-6" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-five-single">
              <div className="partener-five-img-box">
                <img src={ClientOneImg7.src} alt="client-one-img-7" />
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </section>
    </div>
  );
}

export default PartnerFive;
