import { Metadata } from "next";
import { createSeo } from "@/seo/MetaSeo";
import { fetchPageData } from "@/services/api";
import Breadcrumbs from "@/components/CommonComponent/BreadCrumbs";
import { AboutAestheticPageProps } from "@/types/about-aesthetic";
import ServicesBanner from "@/components/CommonComponent/ServicesBanner";
import AestheticSkinConcerns from "@/components/Aesthetic/AestheticSkinConcern";
import OurSpecialist from "@/components/CommonComponent/OurSpecialist";
import ClinicalMachineSwiper from "@/components/clinics-and-doctors/ClinicalMachineSwiper";
import AestheticsTestimonials from "@/components/ReviewsAndTestimonials/AestheticsTestimonials";
import Faqs from "@/components/CommonComponent/Faqs";
import LiveBooking from "@/components/CommonComponent/LiveBooking";
import AestheticSupport from "@/components/Aesthetic/AestheticSupport";
import AestheticHesitations from "@/components/Aesthetic/AestheticHesitations";
import AestheticServices from "@/components/Aesthetic/AestheticServices";
import AestheticEligibility from "@/components/Aesthetic/AestheticEligibility";
import TreatmentJourney from "@/components/CommonComponent/TreatmentJourney";
import AestheticSafety from "@/components/Aesthetic/AestheticSafety";
import AestheticSatisfaction from "@/components/Aesthetic/AestheticSatisfaction";
import AestheticPricing from "@/components/Aesthetic/AestheticPricing";
import AestheticClinics from "@/components/Aesthetic/AestheticClinics";

export async function generateMetadata(): Promise<Metadata> {
    return createSeo("pages/aesthetic", "/aesthetic");
}

export default async function AboutAesthetic() {
    const aestheticpagedata = await fetchPageData<AboutAestheticPageProps>("pages/aesthetic");

    return (
        <>
            <Breadcrumbs items={aestheticpagedata.data.breadcrumbs} />
            <ServicesBanner
                // pricing_link="#pricing"
                // showPricingButton={true}
                className="mb-16 md:mb-30"
                maxWidthClasses="md:max-w-[600px]"
                maxWidthDescriptionClasses="md:max-w-[550px] xl:max-w-[630px]"
                {...aestheticpagedata.data.about_banner}
            />
            <AestheticSkinConcerns {...aestheticpagedata.data.monitor_and_prevention} />
            <AestheticHesitations {...aestheticpagedata.data.accordion} />
            <AestheticSupport {...aestheticpagedata.data.homepage_card_content__left_heading} />
            <AestheticServices {...aestheticpagedata.data.clinicpage_specialist_details} />
            <AestheticEligibility {...aestheticpagedata.data.eligibility_surgical_procedure} />
            <TreatmentJourney
                showCTA={true} className="mb-16 md:mb-30 xl:mb-40"
                {...aestheticpagedata.data.surgery_steps}
            />
            <ClinicalMachineSwiper {...aestheticpagedata.data.clinicpage_image_slider} />
            <AestheticSafety {...aestheticpagedata.data.recovery_steps} />
            <AestheticSatisfaction {...aestheticpagedata.data.homepage_left_content_with_right_image} />
            <section className="mb-16 md:mb-24 xl:mb-30">
                <div className="container">
                    <AestheticsTestimonials />
                </div>
            </section>
            <OurSpecialist {...aestheticpagedata.data.homepage_meet_team} />
            <AestheticPricing {...aestheticpagedata.data.our_pricing} />
            <AestheticClinics {...aestheticpagedata.data.homepage_locations} />
            <Faqs {...aestheticpagedata.data.homepage_faqs} />
            <LiveBooking {...aestheticpagedata.data.live_booking} />
        </>
    )
}