import type { Metadata } from "next";
import dynamic from "next/dynamic";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import TrustStrip from "@/components/TrustStrip";
import Footer from "@/components/Footer";
import { getHomeContent, getMenu } from "@/lib/wordpress";
import { getCachedMediaSizes } from "@/lib/mediaSizes";

const Promo = dynamic(() => import("@/components/Promo"));
const Packages = dynamic(() => import("@/components/Packages"));
const StatsBand = dynamic(() => import("@/components/StatsBand"));
const Why = dynamic(() => import("@/components/Why"));
const BankPartners = dynamic(() => import("@/components/BankPartners"));
const LeadSection = dynamic(() => import("@/components/LeadSection"));
const Reviews = dynamic(() => import("@/components/Reviews"));
const FaqSection = dynamic(() => import("@/components/FaqSection"));
const FinalCta = dynamic(() => import("@/components/FinalCta"));

export async function generateMetadata(): Promise<Metadata> {
  const content = await getHomeContent();
  const { seo } = content;
  return {
    title: seo.title,
    description: seo.description,
    icons: content.siteIcon ? [{ rel: "icon", url: content.siteIcon }] : undefined,
    robots: seo.robots,
    keywords: seo.keywords || undefined,
    alternates: {
      canonical: seo.canonicalUrl || undefined,
    },
    openGraph: {
      title: seo.ogTitle,
      description: seo.ogDescription,
      type: seo.ogType as "website" | "article",
      url: seo.ogUrl || undefined,
      siteName: seo.ogSiteName,
    },
    twitter: {
      card: seo.twitterCard as "summary" | "summary_large_image" | "app" | "player",
      title: seo.twitterTitle,
      description: seo.twitterDescription,
    },
  };
}

export default async function Home() {
  const [content, menu] = await Promise.all([getHomeContent(), getMenu()]);

  return (
    <main className="v4-bg">
      <Header content={content} menuItems={menu} />
      <Hero content={content} />
      <TrustStrip content={content} />
      <Promo content={content} />
      <Packages content={content} />
      <StatsBand content={content} />
      <Why content={content} />
      <BankPartners content={content} />
      <LeadSection content={content} />
      <Reviews content={content} />
      <FaqSection content={content} />
      <FinalCta content={content} />
      <Footer content={content} />
    </main>
  );
}