"use client";
import Link from "next/link";
import caseThreeImg1 from "../../../public/assets/images/resources/case-three-1.png";
import caseThreeImg2 from "../../../public/assets/images/resources/case-three-2.png";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";

const Caseslider = {
  loop: true,
  autoplayspeed: 2000,
  slidesPerView: 5,
  slidestoscroll: 5,
  autoplay: true,
  easing: "linear",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
        arrows: true,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
  ],
};

function CaseTwo() {
  return (
    <div>
      <section className="case-two">
        <div className="container">
          <div className="case-two-title-box">
            <div className="section-five-title">
              <div
                className="section-five-title-text text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Case Studies</p>
              </div>
              <div
                className="section-five-title-title text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>Explore Our Latest Case Studies</h2>
              </div>
            </div>
          </div>
          <Swiper
            className="swiper-wrapper"
            {...Caseslider}
            slidesPerView={2}
            slidestoscroll={1}
            spaceBetween={25}
          >
            <SwiperSlide
              className="case-two-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="case-two-single-img-box">
                <img src={caseThreeImg1.src} alt="case-three-1" />
              </div>
              <div className="case-two-single-detail-box">
                <span>Web Traffic</span>
                <h4>How To Increase your Website Traffic</h4>
                <p>Perspiciati unde omnis dolore aperiam eaque quinve</p>
                <Link href="/about" className="thm-btn transparent-btn-two">
                  Get Started
                  <i className="icon-right-arrow" />
                </Link>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-two-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="200ms"
            >
              <div className="case-two-single-img-box">
                <img src={caseThreeImg2.src} alt="case-three-2" />
              </div>
              <div className="case-two-single-detail-box">
                <span>Marketing</span>
                <h4>How To Grow Social Media Marketing</h4>
                <p>Perspiciati unde omnis dolore aperiam eaque quinve</p>
                <Link href="/about" className="thm-btn transparent-btn-two">
                  Get Started
                  <i className="icon-right-arrow" />
                </Link>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-two-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="case-two-single-img-box">
                <img src={caseThreeImg1.src} alt="case-three-1" />
              </div>
              <div className="case-two-single-detail-box">
                <span>Web Traffic</span>
                <h4>How To Increase your Website Traffic</h4>
                <p>Perspiciati unde omnis dolore aperiam eaque quinve</p>
                <Link href="/about" className="thm-btn transparent-btn-two">
                  Get Started
                  <i className="icon-right-arrow" />
                </Link>
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="case-two-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="400ms"
            >
              <div className="case-two-single-img-box">
                <img src={caseThreeImg2.src} alt="case-three-2" />
              </div>
              <div className="case-two-single-detail-box">
                <span>Marketing</span>
                <h4>How To Grow Social Media Marketing</h4>
                <p>Perspiciati unde omnis dolore aperiam eaque quinve</p>
                <Link href="/about" className="thm-btn transparent-btn-two">
                  Get Started
                  <i className="icon-right-arrow" />
                </Link>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </section>
    </div>
  );
}

export default CaseTwo;
