"use client";
import Image from "next/image";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import "swiper/swiper-bundle.css";
import Counter from "../../common/Counter";
import one from "@/public/images/study/one.png";
import two from "@/public/images/study/two.png";
import three from "@/public/images/study/three.png";
import four from "@/public/images/study/four.png";
import five from "@/public/images/study/five.png";

const AboutCase = () => {
  return (
    <section className="tp-study pt-120 pb-120 bg-quinary">
      <div className="container">
        <div className="row vertical-column-gap align-items-center">
          <div className="col-12 col-lg-7">
            <div className="tp-lp-title text-center text-lg-start">
              <div className="enterprise-badge mb-20">
                <span className="badge enterprise-badge-content">
                  <i className="fa-solid fa-chart-line"></i>
                  Success Stories
                </span>
              </div>
              <h2 className="mt-8 fw-7 text-secondary title-anim">
                Enterprise Success Stories
              </h2>
              <p className="cur-lg mt-20">
                Discover how we&apos;ve helped Fortune 500 companies and innovative startups 
                achieve their digital transformation goals through cutting-edge technology solutions.
              </p>
            </div>
          </div>
          <div className="col-12 col-lg-5">
            <div className="tp-study-arrows d-flex justify-content-center justify-content-lg-end">
              <button className="prev-study" aria-label="previous study">
                <span className="material-symbols-outlined">west</span>
              </button>
              <button className="next-study" aria-label="next study">
                <span className="material-symbols-outlined">east</span>
              </button>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="tp-study-slider-wrapper">
              <div className="tp-study-slider-wrap">
                <Swiper
                  slidesPerView={"auto"}
                  spaceBetween={24}
                  slidesPerGroup={1}
                  freeMode={true}
                  speed={1200}
                  loop={true}
                  roundLengths={true}
                  modules={[Autoplay, Navigation]}
                  autoplay={{
                    delay: 5000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                  }}
                  className="tp-study-slider"
                  navigation={{
                    nextEl: ".prev-study",
                    prevEl: ".next-study",
                  }}
                >
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={one}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={two}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={three}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={four}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={five}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={one}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={two}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={three}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={four}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="tp-study-slider__single">
                      <div className="thumb">
                        <Link href="case-study-single">
                          <Image
                            src={five}
                            className="w-100 mh-400"
                            alt="Image"
                            width={400}
                            height={400}
                          />
                        </Link>
                      </div>
                      <div className="content text-center">
                        <h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
                          <Link href="case-study-single">ENTERPRISE CRM</Link>
                        </h5>
                        <Link href="case-study-single" className="btn-angle">
                          View
                          <span></span>
                        </Link>
                      </div>
                    </div>
                  </SwiperSlide>
                </Swiper>
              </div>
            </div>
          </div>
        </div>
        <div className="row pt-120 vertical-column-gap-lg">
          <div className="col-12 col-sm-6 col-xl-3">
            <div className="counter__single text-center">
              <h2 className="fw-5 text-secondary mt-8 mb-16">
                <span className="odometer">
                  <Counter value={500} />
                </span>
                <span>+</span>
              </h2>
              <p className="text-tertiary">Enterprise Projects</p>
            </div>
          </div>
          <div className="col-12 col-sm-6 col-xl-3">
            <div className="counter__single text-center">
              <h2 className="fw-5 text-secondary mt-8 mb-16">
                <span className="odometer">
                  <Counter value={99} />
                </span>
                <span>.9%</span>
              </h2>
              <p className="text-tertiary">Uptime SLA</p>
            </div>
          </div>
          <div className="col-12 col-sm-6 col-xl-3">
            <div className="counter__single text-center">
              <h2 className="fw-5 text-secondary mt-8 mb-16">
                <span className="odometer">
                  <Counter value={15} />
                </span>
                <span>+</span>
              </h2>
              <p className="text-tertiary">Years Experience</p>
            </div>
          </div>
          <div className="col-12 col-sm-6 col-xl-3">
            <div className="counter__single text-center border-0">
              <h2 className="fw-5 text-secondary mt-8 mb-16">
                <span className="odometer">
                  <Counter value={200} />
                </span>
                <span>+</span>
              </h2>
              <p className="text-tertiary">Expert Engineers</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutCase;