import type { Metadata } from "next";
import Header from "@/components/landing-page/headers";
import AboutSection from "@/components/landing-page/about";
import ProductSection from "@/components/landing-page/product";
import ServiceSection from "@/components/landing-page/service";
import Technology from "@/components/landing-page/technology";
import Footer from "@/components/landing-page/footer";
import PopupNewsBanner from "@/components/landing-page/popup-news";
import { publicFetch } from "@/lib/public-api";
import type {
  CmsAboutContent,
  CmsHeroContent,
  CmsPartnerContent,
  CmsPopupContent,
  CmsProductContent,
  CmsServiceContent,
} from "@/types/cms-landing";

const landingDescription =
  "Jelajahi layanan, produk, dan informasi terbaru dari Qudoco — satu portal untuk konten profesional dan komunikasi yang jelas.";

export const metadata: Metadata = {
  title: "Beranda",
  description: landingDescription,
  openGraph: {
    title: "Beranda | Qudoco",
    description: landingDescription,
    url: "/",
  },
  alternates: {
    canonical: "/",
  },
};

export default async function Home() {
  const [hero, aboutList, productList, serviceList, partners, popupList] =
    await Promise.all([
      publicFetch<CmsHeroContent | null>("/hero-contents"),
      publicFetch<CmsAboutContent[]>("/about-us-contents"),
      publicFetch<CmsProductContent[] | CmsProductContent>("/our-product-contents"),
      publicFetch<CmsServiceContent[] | CmsServiceContent>("/our-service-contents"),
      publicFetch<CmsPartnerContent[]>("/partner-contents"),
      publicFetch<CmsPopupContent[]>("/popup-news-contents?page=1&limit=20"),
    ]);

  const about = aboutList?.[0] ?? null;
  const products = Array.isArray(productList)
    ? productList
    : productList
      ? [productList]
      : [];
  const services = Array.isArray(serviceList)
    ? serviceList
    : serviceList
      ? [serviceList]
      : [];
  const popups = Array.isArray(popupList) ? popupList : [];

  return (
    <div className="relative min-h-screen bg-white font-[family-name:var(--font-geist-sans)]">
      <PopupNewsBanner popups={popups} />
      <Header hero={hero} />
      <AboutSection about={about} />
      <ProductSection products={products} />
      <ServiceSection services={services} />
      <Technology partners={partners ?? []} />
      <Footer />
    </div>
  );
}
