"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, FreeMode, Thumbs, EffectFade, Autoplay } from "swiper";
import Link from "next/link";
const Sponsors = () => {
  return (
    <div className="service-area-2 space-bottom position-relative">
      <div className="blog-shape-img1 shape-mockup d-lg-block d-none">
        <img
          className="about1-shape-img-1 spin"
          src="/assets/img/home/shape-flower.svg"
          alt="Fixturbo"
        />
      </div>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="title-area text-center mb-0">
              {/* <span className="sub-title">Our Services</span> */}
              <h2 className="sec-title mb-0">
                Our sponsors
              </h2>
            </div>
          </div>
        </div>
        <div className="row ">
          <div className="col-12">
            <div className="row global-carousel service-client-slider">
              <Swiper
                loop={true}
                autoplay={{ delay: 3000, disableOnInteraction: false }}
                spaceBetween={20}
                slidesPerGroup={1}
                speed={1000}
                pagination={{ clickable: true }}
                className="mySwiper"
                modules={[FreeMode, Navigation, Thumbs, EffectFade, Autoplay]}
                breakpoints={{
                  0: {
                    slidesPerView: 1,
                  },
                  768: {
                    slidesPerView: 2,
                  },
                  992: {
                    slidesPerView: 3,
                  },
                  1200: {
                    slidesPerView: 3,
                  },
                  1400: {
                    slidesPerView: 3,
                  },
                }}
              >
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-1.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-2.png" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-3.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-4.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-5.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>                
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-1.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-2.png" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-3.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-4.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                    <div className="client-logo">
                      <Link href="#">
                        <img src="/assets/img/home/sponsor-5.jpg" alt="Our Sponsors" />
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
              </Swiper>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sponsors;
