"use client";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

const settingsService = {
  autoplayspeed: 2500,
  autoplay: true,
  easing: "linear",
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 2,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 3,
        slidestoscroll: 3,
      },
    },
  ],
};

function CaseThree() {
  return (
    <div>
      <section className="case-three">
        <div className="container-fluid">
          <div className="case-three-title-box">
            <div
              className="section-three-title wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="section-three-title-title text-center">
                <h2>Popular Case Studies For Our Global Customers</h2>
              </div>
            </div>
            <div
              className="section-three-details text-center wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <p>
                Digital marketing &amp; advertising approach focuses on
                capturing the essential
              </p>
            </div>
          </div>
          <Swiper
            className="swiper-wrapper"
            {...settingsService}
            slidesPerView={2}
            spaceBetween={20}
            autoplay={true}
            autoplayspeed={10000}
          >
            <SwiperSlide
              className="case-three-single wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="case-three-single-img-box">
                <img
                  src={require("../../../public/assets/images/resources/case-one-single-img-1.jpg")}
                  alt="case-one-single-img-1"
                />
              </div>
              <div className="case-three-single-details-box">
                <div className="case-three-single-text">
                  <p>Product Sale</p>
                </div>
                <div className="case-three-single-title">
                  <h5>How To Grow sale and product marketing</h5>
                </div>
                <div className="case-three-single-btn">
                  <Link href="/project-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-three-single wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="200ms"
            >
              <div className="case-three-single-img-box">
                <img
                  src={require("../../../public/assets/images/resources/case-one-single-img-2.jpg")}
                  alt="case-one-single-img-2"
                />
              </div>
              <div className="case-three-single-details-box">
                <div className="case-three-single-text">
                  <p>Marketing</p>
                </div>
                <div className="case-three-single-title">
                  <h5>Increase 2x Faster SEO Strategy Deveopment</h5>
                </div>
                <div className="case-three-single-btn">
                  <Link href="/project-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-three-single wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="case-three-single-img-box">
                <img
                  src={require("../../../public/assets/images/resources/case-one-single-img-3.jpg")}
                  alt="case-one-single-img-3"
                />
              </div>
              <div className="case-three-single-details-box">
                <div className="case-three-single-text">
                  <p>Product Sale</p>
                </div>
                <div className="case-three-single-title">
                  <h5>How To Grow sale and product marketing</h5>
                </div>
                <div className="case-three-single-btn">
                  <Link href="/project-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-three-single wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="case-three-single-img-box">
                <img
                  src={require("../../../public/assets/images/resources/case-one-single-img-1.jpg")}
                  alt="case-one-single-img-1"
                />
              </div>
              <div className="case-three-single-details-box">
                <div className="case-three-single-text">
                  <p>Product Sale</p>
                </div>
                <div className="case-three-single-title">
                  <h5>How To Grow sale and product marketing</h5>
                </div>
                <div className="case-three-single-btn">
                  <Link href="/project-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-three-single wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="200ms"
            >
              <div className="case-three-single-img-box">
                <img
                  src={require("../../../public/assets/images/resources/case-one-single-img-2.jpg")}
                  alt="case-one-single-img-2"
                />
              </div>
              <div className="case-three-single-details-box">
                <div className="case-three-single-text">
                  <p>Product Sale</p>
                </div>
                <div className="case-three-single-title">
                  <h5>How To Grow sale and product marketing</h5>
                </div>
                <div className="case-three-single-btn">
                  <Link href="/project-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-three-single wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="case-three-single-img-box">
                <img
                  src={require("../../../public/assets/images/resources/case-one-single-img-3.jpg")}
                  alt="case-one-single-img-3"
                />
              </div>
              <div className="case-three-single-details-box">
                <div className="case-three-single-text">
                  <p>Product Sale</p>
                </div>
                <div className="case-three-single-title">
                  <h5>How To Grow sale and product marketing</h5>
                </div>
                <div className="case-three-single-btn">
                  <Link href="/project-details" className="read-more-btn">
                    Read More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </section>
    </div>
  );
}

export default CaseThree;
