import Heading from "@/components/reuseables/Heading";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import Image from "next/image";
const MethodOne = [
  {
    title: "FC & CFO Services",
    subtitle: "Methodology 1 - How we do it? ",
    description:
      "A typical finance function in an organization is structured in the manner of a pyramid with the executors at the base and strategic decision making at the pinnacle. Each layer has incremental responsibilities which are all aligned to the organization’s vision. The pyramid of finance operations is a testament to structured efficiency.  Each layer signifies a distinct function, essential to the integrity of the whole. ",
  },
];
const MethodTwo = [
  {
    number: "01",
    icon: "ri-briefcase-line",
    title: "Discovery",
    descr:
      "Understand the business of the entity & identify the requirements of the entity with ",
  },
  {
    number: "02",
    icon: "ri-money-dollar-box-line",
    title: "Analysis of Historical Data ",
    descr: "Analyze past financial data to uncover trends and obtain insights",
  },
  {
    number: "03",
    icon: "ri-briefcase-line",
    title: " Set Up",
    descr: "Establishing the Modus Operandi of the finance function",
  },
  {
    number: "04",
    icon: "ri-money-dollar-box-line",
    title: "Execution",
    descr: "Implement financial strategies and manage day-to-day operations",
  },
  {
    number: "05",
    icon: "ri-briefcase-line",
    title: "Review & Reporting",
    descr:
      "Reporting to the Management, Board of Directors, Investors as the case may be",
  },
  {
    number: "06",
    icon: "ri-money-dollar-box-line",
    title: "Continuous Evaluation",
    descr: "Continuous evaluation to make the process & reporting better",
  },
];

const MethodThree = [
  {
    number: "01",
    img: "/images/shape/calendar.png",
    title: "01. Recurring Activities",
    descr:
      " Review of books of accounts, on call advisory, co-ordination with Bankers, Employees, Vendors on finance related matters",
  },
  {
    number: "02",
    img: "/images/shape/calendar2.png",
    title: "2. Monthly Activities",
    descr:
      "Monthly book closures, payroll processing, compliance management, tracking of budget vs actuals, cash & fund flow management",
  },
  {
    number: "03",
    img: "/images/shape/calendar.png",
    title: "3. Quarterly Activities",
    descr:
      " Presentation to the Board, Investment Evaluation, Evaluation of Processes",
  },
  {
    number: "04",
    img: "/images/shape/calendar2.png",
    title: "4. Annual Activities",
    descr: "Audit Assistance, Budgeting, Reporting to Investors",
  },
  {
    number: "05",
    img: "/images/shape/calendar.png",
    title: "5. Need Based",
    descr: "As per requirement of the Management",
  },
];

const Methods = () => {
  return (
    <>
      <section className="methodone pb-100">
        <Container fluid>
          <Row className="align-items-center">
            <Col lg={5} md={12}>
              <div className="call-back-request-text">
                <span className="sub-title">{MethodOne[0].subtitle}</span>
                <Heading el="h2" heading={MethodOne[0].title} />
                <p>{MethodOne[0].description}</p>
              </div>
            </Col>
            <Col lg={7} 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>
          </Row>
        </Container>
      </section>
      <section className="methodtwo ptb-100">
        <Container>
          <div className="section-title">
            <span className="sub-title"> Methodology 2 - How we do it? </span>
            <h2></h2>
            <Heading el="h2" heading="Elements in CFO Services - Option 1" />
          </div>
          <Row>
            {MethodTwo.map((card, index) => (
              <Col md={6} lg={3} xl={4} key={index}>
                <motion.div
                  variants={slideFromLeft(0.5 * index)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <div className="method-card">
                    <div className="card-number">{card.number}</div>
                    <div className="icon">
                      <i className={`fa-light ${card.icon}`}></i>
                    </div>
                    <div className="method-title">{card.title}</div>
                    <div className="method-descr">{card.descr}</div>
                  </div>
                </motion.div>
              </Col>
            ))}
          </Row>
        </Container>
      </section>

      <section className="methodthree ptb-100">
        <Container fluid>
          <div className="section-title">
            <span className="sub-title">Methodology 2 - How we do it? </span>
            <h2></h2>
            <Heading el="h2" heading="Elements in CFO Services - Option 2" />
          </div>
          <Row className="justify-content-center">
            {MethodThree.map((card, index) => (
              <Col lg={2} md={3} sm={4} xs={6} key={index}>
                <motion.div
                  variants={slideFromLeft(0.5 * index)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <div className="activity-card g-5">
                    {index % 2 === 0 ? (
                      // Image above, content below
                      <>
                        <div className="image-container mb-2">
                          <Image
                            aria-hidden="true"
                            alt="calendar-icon"
                            src={card.img}
                            layout="responsive"
                            width={100}
                            height={100}
                            className="img-fluid"
                          />
                        </div>
                        <div className="method-title">{card.title}</div>
                        <div className="method-descr">{card.descr}</div>
                      </>
                    ) : (
                      // Content above, image below
                      <>
                        <div className="method-title">{card.title}</div>
                        <div className="method-descr">{card.descr}</div>
                        <div className="image-container mt-2">
                          <Image
                            aria-hidden="true"
                            alt="calendar-icon"
                            src={card.img}
                            layout="responsive"
                            width={100}
                            height={100}
                            className="img-fluid"
                          />
                        </div>
                      </>
                    )}
                  </div>
                </motion.div>
              </Col>
            ))}
          </Row>
        </Container>
      </section>
    </>
  );
};

export default Methods;