import PageBanner from "@/components/reuseables/PageBanner";
import React from "react";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import MethodOne from "@/components/reuseables/services/MethodOne";
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/business_advisory.webp  ",
    pageTitle: "Business Advisory ",
    homePageUrl: "/client-servicing",
    homePageText: "Client Servicing",
    activePageText: "Business Advisory ",
  },
  // Add more banners as needed
];

const sliderConfig = {
  spaceBetween: 20,
  slidesPerView: 5,
  showPagination: true,
  showAutoplay: true,
  autoplayDelay: 4000,
};



const Ba = ({ bapage ,conversionData  }) => {
  const dynamicdata = bapage?.BusinessDetails;
  // console.log("dynamicdata", dynamicdata);

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

  const seo = bapage?.seo;
  // console.log(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 pt-100 ">
        <Container>
          {BAData.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>
      
      <div className="cfo-services-area ptb-100 bg-light">
        <Container>
          {aboutcfo.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 !== 1}
            />
          ))}
        </Container>
      </div>

      <div className="cfo-services-area ptb-100">
        <Container>
          {shareholders.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 2 - Nature of Engagements" 
        heading="Elements in CFO Services"
        descrption="Here are some key activities we focus on in our CFO services."
        sliderConfig={sliderConfig} // Pass the slider configuration here
      /> */}
      <div className="ptb-100">
        <Clientele partners={clientlogo} />
      </div>
    </>
  );
};

export default Ba;

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner.Image",
        "BusinessDetails",
        "BusinessDetails.Image",
        "BusinessDetails.Heading",
        "BusinessDetails.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/business-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 bapage = response1.data.data;
    const conversionData = response2.data.data;

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