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";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";

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 RaPage = ({ rapage, conversionData }) => {
  const dynamicdata = rapage?.RiskDetails;
  // console.log("dynamicdata", dynamicdata);

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


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

      <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 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/risk-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 rapage = response1.data.data;
    const conversionData = response2.data.data;

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