"use client";
import { caseStudies5 } from "@/data/caseStudies";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Navigation } from "swiper/modules";
export default function CaseStudies() {
  return (
    <div className="section-case-studies style-1 tf-spacing-36 pb-0">
      <div className="tf-container">
        <div className="heading-section gap_12 text-center">
          <div className="heading-tag d-flex gap_12 mx-auto mb_20 text_mono-dark-8 fw-5">
            <div className="icon">
              <i className="icon-book-bookmark-02" />
            </div>
            <p className="text-body-3">Case studies</p>
          </div>
          <h2 className="title text_mono-dark-9 fw-5 split-text effect-right">
            Our <span className="text-gradient">case</span> studies reveal
          </h2>
          <p
            className="text-body-1 text_mono-gray-7 mt_28 wow animate__fadeInUp animate__animated"
            data-wow-delay="0s"
          >
            Helping you streamline operations, reduce costs, and achieve
            measurable <br />
            success with proven methodologies.
          </p>
        </div>
      </div>
      <div className="wrap">
        <Swiper
          className="swiper sw-layout"
          breakpoints={{
            0: { slidesPerView: 1.3 },
            575: {
              slidesPerView: 1.3,
            },
            768: {
              slidesPerView: 2.5,
              spaceBetween: 20,
            },
            992: {
              slidesPerView: 3.6,
              spaceBetween: 48,
            },
            1200: {
              slidesPerView: 4.9,
              spaceBetween: 48,
            },
          }}
          loop
          centeredSlides
          spaceBetween={15}
          modules={[Navigation]}
          navigation={{
            prevEl: ".snbp10",
            nextEl: ".snbn10",
          }}
        >
          {caseStudies5.map((study) => (
            <SwiperSlide
              className="swiper-slide"
              key={`case-study-${study.id}`}
            >
              <div className="case-studies-item style-3 hover-image">
                <div className="img-style">
                  <Image
                    className="lazyload"
                    data-src={study.imgSrc}
                    alt="case-studies"
                    src={study.imgSrc}
                    width={study.width}
                    height={study.height}
                  />
                </div>
                <h6 className="title text_white">
                  <Link href={`/single-project/${study.id}`} className="link">
                    {study.title}
                  </Link>
                </h6>
                <Link
                  href={`/single-project/${study.id}`}
                  className="tf-btn btn-white"
                >
                  <span>
                    <svg
                      width={18}
                      height={18}
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12.75 5.25009L4.5 13.5001"
                        stroke="#121416"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                      />
                      <path
                        d="M8.25 4.59864C8.25 4.59864 12.4752 4.24246 13.1164 4.88365C13.7575 5.52483 13.4013 9.75 13.4013 9.75"
                        stroke="#121416"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </span>
                  <span className="bg-effect" />
                </Link>
              </div>
            </SwiperSlide>
          ))}
          <div className="wrap-sw-button d-flex gap_16 justify-content-center">
            <div className="sw-button style-default has-bg nav-prev-layout snbp10">
              <i className="icon-arrow-left-02-sharp" />
            </div>
            <div className="sw-button style-default has-bg nav-next-layout snbn10">
              <i className="icon-arrow-right-02-sharp" />
            </div>
          </div>
        </Swiper>
        <div className="shape scroll-tranform">
          <Image
            alt="shape"
            src="/images/item/shape-10.png"
            width={1280}
            height={624}
          />
        </div>
      </div>
      <div className="shape-1">
        <Image
          alt="shape"
          src="/images/item/shape-11.png"
          width={1920}
          height={483}
        />
      </div>
    </div>
  );
}