"use client";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import PartnerOneImgPhoto1 from "../../../public/assets/images/resources/partener-one-img-1.png";
import PartnerOneImgPhoto2 from "../../../public/assets/images/resources/partener-one-img-2.png";
import PartnerOneImgPhoto3 from "../../../public/assets/images/resources/partener-one-img-3.png";
import PartnerOneImgPhoto4 from "../../../public/assets/images/resources/partener-one-img-4.png";
import PartnerOneImgPhoto5 from "../../../public/assets/images/resources/partener-one-img-5.png";
import PartnerOneImgPhoto6 from "../../../public/assets/images/resources/partener-one-img-6.png";
import PartnerOneImgPhoto7 from "../../../public/assets/images/resources/partener-one-img-7.png";
import PartnerOneImgPhoto8 from "../../../public/assets/images/resources/partener-one-img-8.png";

const Partnerone = {
  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 PatnerOne() {
  return (
    <div>
      <section className="partener-one">
        <div className="container-fluid">
          <div
            className="partener-one-title text-center wow fadeInUp animated animated"
            data-wow-duration="1500ms"
            data-wow-delay="100ms"
            style={{
              visibility: "visible",
              animationDuration: "1500ms",
              animationDelay: "100ms",
              animationName: "fadeInUp",
            }}
          >
            <p>
              I’ve <span>1253+</span> Global Clients &amp; lot’s of Project
              Complete
            </p>
          </div>

          <Swiper
            className="partener-one-slider swiper-wrapper"
            {...Partnerone}
            slidesPerView={10}
            spaceBetween={100}
            autoplay={true}
            autoplayspeed={1000}
          >
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto1.src} alt="partener-one-img-1" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto2.src} alt="partener-one-img-2" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto3.src} alt="partener-one-img-3" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto4.src} alt="partener-one-img-4" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto5.src} alt="partener-one-img-5" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto6.src} alt="partener-one-img-6" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto7.src} alt="partener-one-img-7" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto8.src} alt="partener-one-img-8" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto1.src} alt="partener-one-img-1" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto2.src} alt="partener-one-img-2" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto3.src} alt="partener-one-img-3" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto4.src} alt="partener-one-img-4" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto5.src} alt="partener-one-img-5" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto6.src} alt="partener-one-img-6" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto7.src} alt="partener-one-img-7" />
              </div>
            </SwiperSlide>
            <SwiperSlide className="partener-one-single">
              <div className="partener-one-img-box">
                <img src={PartnerOneImgPhoto8.src} alt="partener-one-img-8" />
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </section>
    </div>
  );
}

export default PatnerOne;
