import dynamic from "next/dynamic";
import { fetchPageData } from "@/services/api";
import { HomepageProps } from "@/types/homepage";
import { Metadata } from "next";
import Banner from "@/components/Homepage/Banner";
import KeyStrength from "@/components/CommonComponent/KeyStrength";
import LayserSurgeryVision from "@/components/Homepage/LayserSurgeryVision";
import OurClinicalServices from "@/components/Homepage/OurServices";
import { createSeo } from "@/seo/MetaSeo";

const BannerBelowSwiper = dynamic(() => import("@/components/Homepage/BannerBelowSwiper"));
const OurSpecialist = dynamic(() => import("@/components/CommonComponent/OurSpecialist"));
const ClinicShowcase = dynamic(() => import("@/components/CommonComponent/ClinicShowcase"));
const MedicalPartners = dynamic(() => import("@/components/CommonComponent/MedicalPartners"));
const ActionCards = dynamic(() => import("@/components/Homepage/ActionCards"));
const CommonTestimonials = dynamic(() => import("@/components/ReviewsAndTestimonials/CommonTestimonials"));
const OurLocations = dynamic(() => import("@/components/CommonComponent/OurLocations"));
const Faqs = dynamic(() => import("@/components/CommonComponent/Faqs"));
const LiveBooking = dynamic(() => import("@/components/CommonComponent/LiveBooking"));

// Next.js SEO Metadata Generator for the Homepage
export async function generateMetadata(): Promise<Metadata> {
  return createSeo("pages/home", "/");
}

export default async function Home() {
  const homepagedata = await fetchPageData<HomepageProps>("pages/home");

  return (
    <>
      <Banner {...homepagedata?.data?.homepage_hero_banner} />
      <BannerBelowSwiper bannerEnquiry={homepagedata?.data?.homepage_hero_banner_enquery} />
      <div className="relative pt-16 md:pt-30  mb-16 md:mb-30 z-1
        after:content-['']  
        after:absolute
        after:top-0
        after:left-0
        after:right-0
        after:w-full
        after:h-[80%] md:after:h-[730px]
        after:bg-[#F2F4F6]
        after:z-[-1]"
      >
        <KeyStrength {...homepagedata?.data?.homepage_card_content__left_heading} />
        <LayserSurgeryVision {...homepagedata?.data?.homepage_left_content_with_right_image} />
      </div>
      <OurClinicalServices {...homepagedata?.data?.homepage_services} />
      <ClinicShowcase {...homepagedata?.data?.homepage_left_content_with_number_button_and_right_image} />
      <OurSpecialist className="xl:!mb-26" {...homepagedata?.data?.homepage_meet_team} />
      <MedicalPartners
        className="border-t border-[#E5E9ED] pt-12 md:pt-20 mb-16 md:mb-30"
        {...homepagedata?.data?.homepage_medical_logos_with_cta}
      />
      <ActionCards two_cards={homepagedata?.data?.homepage_two_cards_with_content_cta_image?.two_cards} />
      <section className="mb-16 md:mb-24 xl:mb-30">
        <div className="container">
          <CommonTestimonials />
        </div>
      </section>
      <OurLocations {...homepagedata?.data?.homepage_locations} />
      <Faqs {...homepagedata?.data?.homepage_faqs} />
      <LiveBooking {...homepagedata?.data?.live_booking} />
    </>
  );
}