import Clientele from "@/components/reuseables/Clientele";
import PageBanner from "@/components/reuseables/PageBanner";
import qs from "qs";
import axios from "axios";

import React from "react";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Seo from "@/components/reuseables/Seo/Seo";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";

const banners = [
  {
    imageSrc: "/images/banner/risk_advisory.webp",
    pageTitle: " Risk Advisory",
    homePageUrl: "/client-servicing",
    homePageText: "Client Servicing",
    activePageText: "Risk Advisory",
  },
  // Add more banners as needed
];

const RAData = [
  {
    subtitle: "Client Servicing",
    title: "Risk Advisory",
    paragraphs: [
      "As businesses grow and expand their footprint, an area that is often neglected is the requirement to bring in discipline in areas of finance, human resource management operations. At Advith Consulting, we follow a 4-step EASE Approach. E – Understand existing processes , A – Analyze the gaps S – Set up SOP’s , E – Effective Implementation ",
    ],
    imageSrc: "/images/client-service/Risk Advisory.webp",
    imageAlt: "Client Servicing Image",
  },
  {
    subtitle: "Client Servicing",
    title: " About Risk Advisory",
    paragraphs: [
      "Often, it is not until something goes wrong that an organisation realises that it is has ineffective internal controls. Further, there is also a misconception among organisations that internal controls are needed only to satisy the statutory auditor.  Strong internal controls play a crucial role in the success of any organisation. They enhance efficiency, ensure compliance, streamline operations & facilitate growth. Irrespective of the size of your organisation,  defining processes, identifying risks & establishing controls are essential. At Advith, we understand the business of the entity and build strong yet agile processes to ensure that they stand the test of time. ",
    ],
    imageSrc: "/images/client-service/About-Risk-Advisory.png",
    imageAlt: "FC & CFO Services Image",
  },
];
const sliderConfig = {
  spaceBetween: 20,
  slidesPerView: 4,
  breakpoints: {
    320: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1200: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
  },
};
const MethodOneData = [
  {
    stepNumber: "01",
    img: "/images/shape/icon/discovery.png",
    title: "E – Understand existing processes",
    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: "A – Analyze the gaps ",
    descr: " Analyze past financial data to uncover trends and obtain insights",
    altText: "analysis-icon",
  },
  {
    stepNumber: "03",
    img: "/images/shape/icon/setup.png",
    title: "S – Set up SOP’s ",
    descr: " Establishing the Modus Operandi of the finance function",
    altText: "setup-icon",
  },
  {
    stepNumber: "04",
    img: "/images/shape/icon/execution.png",
    title: "E – Effective Implementation",
    descr: " Implement financial strategies and manage day-to-day operations ",
    altText: "execution-icon",
  },
];

const methodTwoData = [
  {
    img: "/images/services/cfo/activity/recurring.png",
    title: "Understanding Common Terms",
    descr:
      "By establishing a common vocabulary, it promotes consistency, minimizes ambiguity, and enhances communication, thereby facilitating accurate interpretation and execution of the procedures outlined in the SOP.",
  },
  {
    img: "/images/services/cfo/activity/monthly.png",
    title: "Organisation Structure",
    descr:
      "This matrix outlines reporting relationships, hierarchical structures, and communication channels among different departments or personnel involved in the SOP processes.",
  },
  {
    img: "/images/services/cfo/activity/quarterly.png",
    title: "Process Flow Chart & Detailed Process Notes:",
    descr:
      "A flow  provides a visual representation of the sequential steps in the process. The detailed process notes that accompany the flow chart provide a more in-depth explanation of each step in the process",
  },
  {
    img: "/images/services/cfo/activity/annual.png",
    title: "Risk Control Matrix:",
    descr:
      "Risks associated with each step in the process are Controls may be categorized as System (automated), Manual (human intervention), or Hybrid (combination of both). ",
  },
  {
    img: "/images/services/cfo/activity/need.png",
    title: "Version Control",
    descr:
      "With identifiable version numbers, dates, and authorship details, it enhances accountability and transparency during audits. Effective version control streamlines collaboration, allowing multiple contributors to work simultaneously.",
  },
];
const partners = [
  {
    image: "/images/clientel/adsyndicate.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/APISERO.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/Bighaat.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/CRESTA.svg",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/clientel/Encee.svg",
    altText: "partner",
    link: "#",
  },
];

const RaPage = ({ rapage }) => {
  const dynamicdata = rapage?.RiskDetails;
  // console.log("dynamicdata", dynamicdata);

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

  return (
    <>
      <Seo seo={seo} />
      <PageBanner banners={banners} />
      <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 className="cfo-services-area ptb-100">
        <Container>
          {RAData.map((item, index) => (
            <ContentSection
              key={item.id}
              subtitle={item.subtitle}
              title={item.title}
              paragraphs={item.paragraphs}
              imageSrc={item.imageSrc}
              imageAlt={item.imageAlt}
              reverse={index % 2 !== 0}
            />
          ))}
        </Container>
      </div>
      <MethodOne
        data={MethodOneData}
        sectionTitle=" Methodology 1  "
        heading="How we do it?  "
        descrption="Here are some key activities we focus on in our CFO services."
        sliderConfig={sliderConfig} // Pass the slider configuration here
      />

      <MethodTwoSection
        sectionTitle="Components of Our Deliverable "
        subTitle="Methodology 2 "
        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 RaPage;

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

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

    const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/risk-page?${query1String}`;
    // console.log(`Final url: ${endpoint1}`);

    const response1 = await axios.get(endpoint1);
    const rapage = response1.data.data;

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