import PageBanner from "@/components/reuseables/PageBanner";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
import Card from "@/components/reuseables/services/Card";

// const CFOData = [
//   {
//     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/client-service/Client_Servicing-CFO.webp",
//     imageAlt: "Client Servicing Image",
//   },
//   {
//     subtitle: "About FC & CFO Services",
//     title: "About FC & CFO Services",
//     paragraphs: [
//       "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",
//     ],
//     imageSrc: "/images/client-service/About_FC_&_CFO_Services.webp",
//     imageAlt: "FC & CFO Services Image",
//   },
//   {
//     subtitle: "About FC & CFO Services",
//     title: "Methodology 1 - How we do it? ",
//     paragraphs: [
//       "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. ",
//     ],
//     imageSrc: "/images/client-service/Methodology 1 - How we do it.webp",
//     imageAlt: "FC & CFO Services Image",
//   },
// ];
const sliderConfig = {
  spaceBetween: 20,
  slidesPerView: 5,
  breakpoints: {
    320: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1200: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
  },
};

// method one content
const MethodOneData = [
  {
    stepNumber: "01",
    img: "/images/shape/icon/discovery.png",
    title: "Step 1 - Discovery  ",
    descr:
      "Understand the business of the entity & identify the requirements of the entity with respect to the finance function",
    altText: "discovery-icon",
  },
  {
    stepNumber: "02",
    img: "/images/shape/icon/analysis.png",
    title: "Step 2 - Analysis of Historical Data",
    descr: " Analyze past financial data to uncover trends and obtain insights",
    altText: "analysis-icon",
  },
  {
    stepNumber: "03",
    img: "/images/shape/icon/setup.png",
    title: "Step 3 - Set Up ",
    descr: " Establishing the Modus Operandi of the finance function",
    altText: "setup-icon",
  },
  {
    stepNumber: "04",
    img: "/images/shape/icon/execution.png",
    title: "Step 4 - Execution",
    descr: " Implement financial strategies and manage day-to-day operations ",
    altText: "execution-icon",
  },
  {
    stepNumber: "05",
    img: "/images/shape/icon/setup.png",
    title: "Step 5 - Review & Reporting ",
    descr:
      " Reporting to the Management, Board of Directors, Investors as the case may be",
    altText: "setup-icon",
  },
  {
    stepNumber: "06",
    img: "/images/shape/icon/execution.png",
    title: "Step 6 - Continuous Evaluation",
    descr: "Continuous evaluation to make the process & reporting better",
    altText: "execution-icon",
  },
];
const methodTwoData = [
  {
    img: "/images/shape/iconsvg/recurring.svg",
    title: "1. Recurring Activities ",
    descr:
      "Review of books of accounts, on call advisory, co-ordination with Bankers, Employees, Vendors on finance related matters",
  },
  {
    img: "/images/shape/iconsvg/monthly.svg",
    title: " 2. Monthly Activities",
    descr:
      "Monthly book closures, payroll processing, compliance management, tracking of budget vs actuals, cash & fund flow management ",
  },
  {
    img: "/images/shape/iconsvg/quarterly.svg",
    title: "3. Quarterly Activities ",
    descr:
      "Presentation to the Board, Investment Evaluation, Evaluation of Processes",
  },
  {
    img: "/images/shape/iconsvg/annual.svg",
    title: "4. Annual Activities",
    descr: "Audit Assistance, Budgeting, Reporting to Investors",
  },
  {
    img: "/images/shape/iconsvg/need.svg",
    title: "5. Need Based ",
    descr: "As per requirement of the Management",
  },
];

const partners = [
  {
    image: "/images/clientel/ADALVO.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/Betaflux.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/GLIDER.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/Relicare.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/Relicare-1.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/SURYA.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/Trisha.svg",
    altText: "partner",
    link: "#",
  },
];
const clientservicecfo = ({ cfopage, conversionData }) => {
  // console.log(cfopage ,"cfopage")
  const banners = [
    {
      imageSrc: cleanImage(cfopage?.Banner?.Image?.url),
      pageTitle: cfopage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: cfopage?.Banner?.Heading,
    },
  ];

  const dynamicdata = cfopage?.CfoDeatils;
  console.log("dynamicdata", dynamicdata);

  const clientlogo = cfopage?.Clientel;
  // console.log("clientlogo", clientlogo);

  const seo = cfopage?.seo;
  // console.log(seo)

  const code = conversionData?.conversion;

  return (
    <>
      <Seo seo={seo} />
      <ConversionCode code={code} />

      <PageBanner banners={banners} />
      <div className="cfo-services-area ptb-100">
        <section className="cfo-page">
          {dynamicdata &&
            dynamicdata?.map((section, index) => {
              // console.log("section", section);
              switch (section.__component) {
                case "dynamic-zone.about":
                  return (
                    <LeftSideImage
                      title={section?.Title}
                      subtitle={section?.Subtitle}
                      image={section?.Image}
                      content={section?.Content}
                    />
                  );
                case "dynamic-zone.background":
                  return (
                    <RightSideImage
                      title={section?.Title}
                      subtitle={section?.Subtitle}
                      image={section?.Image}
                      content={section?.Content}
                    />
                  );
                case "dynamic-zone.element-one":
                  return (
                    <MethodOne
                      heading={section?.Heading}
                      data={section?.ElementList}
                    />
                  );
                case "dynamic-zone.element-two":
                  return (
                    <MethodTwoSection
                      heading={section?.Heading}
                      data={section?.ElementList}
                    />
                  );

              

                default:
                  return null;
              }
            })}
        </section>
      </div>
      {/* <MethodOne
        data={MethodOneData}
        sectionTitle="Methodology 2 - How we do it? "
        heading="Elements in CFO Services"
        descrption="Here are some key activities we focus on in our CFO services."
      /> */}

      {/* <MethodTwoSection
        sectionTitle="Elements in CFO Services - Option 2"
        subTitle="Methodology 2 - How we do it?"
        methodData={methodTwoData}
        slidesPerView={sliderConfig.slidesPerView}
        breakpoints={sliderConfig.breakpoints} // Pass breakpoints here
        spaceBetween={sliderConfig.spaceBetween}
        autoplayDelay={sliderConfig.autoplayDelay}
        showPagination={sliderConfig.showPagination}
        showAutoplay={sliderConfig.showAutoplay}
      /> */}

      <div className="ptb-100">
        <Clientele partners={clientlogo} />
      </div>
    </>
  );
};

export default clientservicecfo;

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner",
        "Banner.Image",
        "CfoDeatils",
        "CfoDeatils.Image",
        "CfoDeatils.Heading",
     
        "CfoDeatils.ElementList.StepImg",
        "Clientel.logos",
        "seo",
        "seo.metaImage",
        "seo.schema",
      ],
    };

    const query2 = {
      populate: ["conversion"],
    };

    const query1String = qs.stringify(query1, {
      encodeValuesOnly: true,
    });

    const query12String = qs.stringify(query2, {
      encodeValuesOnly: true,
    });

    const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/cfo-page?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;

    console.log(`Final url: ${endpoint1}`);

    const [response1, response2] = await Promise.all([
      axios.get(endpoint1),
      axios.get(endpoint2),
    ]);

    const cfopage = response1.data.data;
    const conversionData = response2.data.data;

    return {
      props: { cfopage, conversionData },
    };
  } catch (error) {
    console.log("Error", error);
  }
}