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

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 OurService = () => {
  return (
    <>
      <div className="services-area pt-100 pb-70">
        <Container>
          <div className="section-title">
          <span className="sub-title">ADVITH CONSULTING</span>
                      <Heading el="h2" heading="What we do?" className="h2" />
            <p>
            At Advith Consulting, we harness our wealth of Knowledge and expertise, leveraging our People to deliver exceptional Client satisfaction.
            </p>
          </div>

          <Swiper
            spaceBetween={30}
            pagination={{
              clickable: true,
            }}
            breakpoints={{
              0: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
              },
              1200: {
                slidesPerView: 3,
              },
            }}
            autoplay={{
              delay: 5000,
              disableOnInteraction: true,
              pauseOnMouseEnter: true,
            }}
            modules={[Pagination, Autoplay]}
            className="services-slides"
          >
            {services &&
              services.map((service) => (
                <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}
                          alt={service.altText}
                          layout="fill"
                          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>
        </Container>
      </div>
    </>
  );
};

export default OurService;