import Heading from "@/components/reuseables/Heading";
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image";
import { motion } from "framer-motion";
import { fadeIn, slideFromLeft } from "@/components/reuseables/variants";

const CFOData = [
  {
    id: 1,
    subtitle: "Client Servicing",
    title: "Client Servicing - CFO ",
    paragraphs: [
      "FC & CFO Services at Advith Consulting LLP brings together specialists at different functional layers enabling finance operations in your organisation to function in an efficient manner. Depending upon the requirement of the business, our areas of focus range from streamling routine finance operations to ensuring compliances including taxation and corporate law and even to strategic, business finance & assurance, to provide a holistic approach to financial management. ",
    ],

    imageSrc: "/images/about/people.jpg",
    imageAlt: "image",
  },
  // Add more objects here if you have more content sections
];

const aboutcfo = [
  {
    title: "About FC & CFO Services",
    subtitle: "lorem",
    description:
      "The significance and role of a finance function in an organisation depends on multiple factors including the vision of the management, nature of business, scale of operations & status of funding among others.  At Advith Consulting, we offer FC & CFO Services upon careful evaluation of the requirement of your business. Our role as FC's and CFO's will be to act as enablers in moving from data entry and reporting merely as a compliance to a mechanism wherein we bring together insightful data analysis and financial expertise to offer actionable insights to the leadership team",
  },
];
const Cfoservice = () => {
  return (
    <>
      <div className="what-we-do-area ptb-100">
        <Container>
          {CFOData.map((item) => (
            <Row className="align-items-center" key={item.id}>
              <Col lg={6} md={12}>
                <div className="what-we-do-text">
                  <span className="sub-title">{item.subtitle}</span>
                  <Heading el="h2" heading={item.title} className="h2" />
                  {item.paragraphs.map((paragraph, index) => (
                    <p key={index}>{paragraph}</p>
                  ))}
                </div>
              </Col>

              <Col lg={6} md={12}>
                <div className="what-we-do-img">
                  <motion.div
                    variants={fadeIn(0.4)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.2 }}
                  >
                    <Image
                      src={item.imageSrc}
                      alt={item.imageAlt}
                      layout="fill"
                      className="img-fluid image"
                    />
                  </motion.div>
                </div>
              </Col>
            </Row>
          ))}
        </Container>
      </div>

      <div className="about-cfo pb-100">
        <Container>
          <Row className="align-items-center">
            <Col lg={6} md={12}>
              <div className="call-back-request-img">
                <motion.div
                  variants={slideFromLeft(0.5)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <Image
                    src="/images/home/knowledge.png"
                    layout="fill"
                    className="img-fluid image"
                    alt="image"
                  />
                </motion.div>
              </div>
            </Col>

            <Col lg={6} md={12}>
              <div className="call-back-request-text">
                <span className="sub-title">{aboutcfo[0].subtitle}</span>
                <Heading el="h2" heading={aboutcfo[0].title} />
                <p>{aboutcfo[0].description}</p>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default Cfoservice;