import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay, Navigation } from "swiper/modules";
import Image from "next/image";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import Heading from "@/components/reuseables/Heading";
import { Container } from "react-bootstrap";
import SwiperNav from "@/components/reuseables/SwiperNav";

const services = [
  {
    id: 1,
    image: "/images/home/service/virtual_services.webp",
    altText: "Service Image",
    title: "Virtual FC & CFO Services",
    description:
      "With Our Virtual FC & CFO Services we connect you with virtual finance experts who work behind the scenes, synchronizing your financial operations and elevating your success.",
    linkText: "Read More",
    detailsUrl: "/client-servicing/cfo",
  },
  {
    id: 2,
    image: "/images/home/service/transaction_advisory.webp",
    altText: "Service Image",
    title: "Transaction Advisory",
    description:
      "At Advith Consulting, our all-encompassing approach to Transaction Advisory covers everything from strategy and execution to post-transaction support, giving you a comprehensive, dynamic solution.",
    linkText: "Read More",
    detailsUrl: "/client-servicing/ta",
  },
  {
    id: 3,
    image: "/images/home/service/risk_advisory.webp",
    altText: "Service Image",
    title: "Risk Advisory",
    description:
      "Our Risk Advisory services follows a 4-step ‘EASE’ Approach: E – Understand existing processes  A – Analyze the gaps S – Set up SOP’s  E – Effective Implementation",
    linkText: "Read More",
    detailsUrl: "/client-servicing/ra",
  },
  {
    id: 4,
    image: "/images/home/service/business_advisory.webp",
    altText: "Service Image",
    title: "Business Advisory",
    description:
      "From inception to maturity, we are your financial guide for navigating each critical stage of business growth. Our tailored Business Advisory Services blend strategic foresight with financial know-how, to take the journey to financial excellence.",
    linkText: "Read More",
    detailsUrl: "/client-servicing/ba",
  },
];

const ClientService = () => {
  return (
    <>
      <div className="services-area  pt-100 pb-5">
      <Container>
          <div className="section-title">
            <span className="sub-title">ADVITH CONSULTING</span>
            <Heading el="h2" heading="What we do?" />
         
          </div>
          <p className="text-center mb-4 mb-lg-5">
              At Advith Consulting, we harness our wealth of Knowledge and
              expertise, leveraging our People to deliver exceptional Client
              satisfaction.
            </p>
          <div className="position-relative px-md-4 mt-md-5 mt-2">
            <Swiper
              spaceBetween={30}
              centeredSlides={true}
              navigation={{
                nextEl: ".custom-swiper-button-next",
                prevEl: ".custom-swiper-button-prev",
              }}
              pagination={{
                clickable: true,
              }}
              breakpoints={{
                0: {
                  slidesPerView: 1,
                },
                768: {
                  slidesPerView: 2,
                },
                1200: {
                  slidesPerView: 3,
                },
              }}
              autoplay={{
                delay: 5000,
                // disableOnInteraction: true,
                // pauseOnMouseEnter: true,
              }}
              loop={true}
              modules={[Autoplay, Navigation]}
              className="services-slides position-relative"
            >
              {services &&
                services.map((service, index) => (
                  <SwiperSlide className="single-services-box" key={service.id}>
                    <motion.div
                      variants={slideFromLeft(0.5)}
                      initial={"hidden"}
                      whileInView={"show"}
                      viewport={{ once: false, amount: 0.4 }}
                    >
                      <div className="image">
                        <Link href={service.detailsUrl}>
                          <Image
                            src={service.image}
                            fill
                            alt={service.altText}
                            className="img-fluid image"
                          />
                        </Link>
                      </div>
                      <div className="content">
                        <h3>
                          <Link href={service.detailsUrl}>{service.title}</Link>
                        </h3>

                        <p>{service.description}</p>

                        <Link href={service.detailsUrl} className="default-btn">
                          {service.linkText}
                          <i className="ri-arrow-right-line"></i>
                        </Link>
                      </div>
                    </motion.div>
                  </SwiperSlide>
                ))}
                <Swiper pagination={{ clickable: true }} />
            </Swiper>
            <div className="cust_nav swiper-nav text-center mt-md-4 mt-0 ">
                <SwiperNav />
            </div>
            </div>
        </Container>
      </div>
    </>
  );
};

export default ClientService;