import React from "react";
import AosComponent from "@/components/aos.component";
import BlogPostsComponent from "@/components/blog.posts.component";
import FooterComponent from "@/components/footer.component";
import SubscribeComponent from "@/components/subscribe.component";
import SubHeaderComponent from "@/components/subHeader.component";
import BootstrapComponent from "@/components/bootstrap.component";
import webApi from "@/api/web-client/web-api";
import AboutUsWithBoxesComponent from "@/components/about.us.with.boxes.component";
import YogaDiscountComponent from "@/components/yogaDiscountComponent";
import TextWithImageComponent from "@/components/text.with.image.component";
import AchievementsComponent from "@/components/achievements.component";

export default async function About() {
    const pageData = await webApi.getAboutPage();

    const {header,
        aboutUs,
        discount,
        ourMission,
        ourVision,
        achievements,

        blogs,
        subscribeNow,
        footer,
    } = pageData;


    console.info("about us", JSON.stringify(aboutUs))
    return (
        <>
            { header && <SubHeaderComponent header1={header?.header1} header2={header?.header2} description={header?.description}/> }

            { aboutUs && <AboutUsWithBoxesComponent config={aboutUs}/>}
            { discount && <YogaDiscountComponent config={discount}/>}
            { ourMission && <TextWithImageComponent config={ourMission} />}
            { ourVision && <TextWithImageComponent config={ourVision} />}
            { achievements && <AchievementsComponent config={achievements}/>}

            { blogs && <BlogPostsComponent  config={blogs} />}
            { subscribeNow && <SubscribeComponent config={subscribeNow}  /> }
            { footer && <FooterComponent config={footer} />}
            <AosComponent />
            <BootstrapComponent />

        </>

    );
}


export const dynamic = 'force-dynamic'