import HomeClient from "./HomeClient";
import type { Metadata } from "next";
import JsonLd from "./components/JsonLd";
import { absoluteSiteUrl } from "./lib/seo";
import { getHomePortfolioTopics, getSiteBanners } from "./lib/portfolio";

export const dynamic = "force-dynamic";

const homeTitle = "Thiết kế đồ họa cho thương hiệu | JUNX DESIGN";
const homeDescription = "Portfolio JUNX DESIGN với ảnh bìa, banner website và thiết kế quảng cáo chỉn chu, giúp thương hiệu tạo ấn tượng.";
const homeUrl = absoluteSiteUrl("/");
const brandImage = absoluteSiteUrl("/og");

export const metadata: Metadata = {
  title: { absolute: homeTitle },
  description: homeDescription,
  ...(homeUrl ? { alternates: { canonical: homeUrl } } : {}),
  openGraph: { type: "website", locale: "vi_VN", siteName: "JUNX DESIGN", title: homeTitle, description: homeDescription, ...(homeUrl ? { url: homeUrl } : {}), images: brandImage ? [{ url: brandImage, width: 1200, height: 630, alt: "JUNX DESIGN — Thiết kế hình ảnh nổi bật" }] : [] },
  twitter: { card: "summary_large_image", title: homeTitle, description: homeDescription, images: brandImage ? [brandImage] : [] },
};

export default async function HomePage() {
  const [portfolioTopics, banners] = await Promise.all([getHomePortfolioTopics(), getSiteBanners()]);
  const siteUrl = absoluteSiteUrl("/");
  const schema = {
    "@context": "https://schema.org",
    "@graph": [
      { "@type": "WebSite", name: "JUNX DESIGN", inLanguage: "vi-VN", ...(siteUrl ? { url: siteUrl } : {}) },
      { "@type": "Organization", name: "JUNX DESIGN", ...(siteUrl ? { url: siteUrl, logo: absoluteSiteUrl("/og") } : {}), sameAs: ["https://www.facebook.com/miyamura.izumi0311/"] },
    ],
  };
  return <><JsonLd data={schema} /><HomeClient portfolioTopics={portfolioTopics} banners={banners} /></>;
}