import { LiveDemosDemoCarousel } from "@/components/live-demos/demo-carousel";
import LiveDemosBannerBackdrop from "@/components/live-demos/banner-backdrop";
import CTASection from "@/components/pages/home/cta-section";
import { SiteFooter } from "@/components/site-footer";
import { assertIsPathLocale, getLocaleFromLangString } from "@/lib/locale";
import { getAlternateUrls } from "@/lib/seo";
import { cachedDecideLocale } from "@/lib/server-locale";
import { t } from "@/locales";
import type { Metadata } from "next";

export default async function LiveDemosPage(props: {
  params: Promise<{ lang?: string }>;
}) {
  const params = await props.params;
  assertIsPathLocale(params.lang);
  const locale = await cachedDecideLocale(params.lang);

  return (
    <>
      <main>
        <LiveDemosBannerBackdrop>
          <LiveDemosDemoCarousel />
        </LiveDemosBannerBackdrop>
        <CTASection locale={locale} />
      </main>
      <SiteFooter locale={locale} />
    </>
  );
}

export async function generateMetadata(props: {
  params: Promise<{ lang?: string }>;
}): Promise<Metadata> {
  const { lang } = await props.params;
  const locale = getLocaleFromLangString(lang);

  return {
    title: `${t(locale, "live-demos.seo.title")} | ${t(locale, "home.seo.title")}`,
    description: t(locale, "live-demos.seo.description"),
    keywords: t(locale, "live-demos.seo.keywords"),
    openGraph: {
      title: `${t(locale, "live-demos.seo.title")} | ${t(locale, "home.seo.title")}`,
      description: t(locale, "live-demos.seo.description"),
      tags: t(locale, "live-demos.seo.keywords"),
    },
    alternates: getAlternateUrls(locale, "/live-demos"),
  };
}

export { generateStaticParams } from "@/components/pages/localed-pages";