"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/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { Swiper, SwiperSlide } from "swiper/react";

const settingsPartner = {
  autoplay: {
    delay: 1000,
  },
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 3,
        arrows: true,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 1,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        arrows: false,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        arrows: false,
      },
    },
  ],
};

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 h-200px"
            {...settingsPartner}
            slidesPerView={1}
            spaceBetween={10}
            autoplay={true}
            autoplaySpeed={10000}
            breakpoints={{
              480: {
                slidesPerView: 2,
                spaceBetween: 20,
              },
              640: {
                slidesPerView: 3,
                spaceBetween: 30,
              },
              768: {
                slidesPerView: 4,
                spaceBetween: 40,
              },
              1024: {
                slidesPerView: 5,
                spaceBetween: 50,
              },
              1200: {
                slidesPerView: 6,
                spaceBetween: 60,
              },
              // 1400: {
              //   slidesPerView: 7,
              //   spaceBetween: 70,
              // },
            }}
          >
            <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;
