sass-mohfarawati/app/[locale]/(site)/page.tsx

import type { Metadata } from "next";
import { getLocale, getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { HomeHero } from "@/components/layout/home-hero";
import { MotionFade } from "@/components/motion-fade";
import { MagicBentoSection } from "@/components/home/magic-bento-section";
import { ContactCtaSection } from "@/components/home/contact-cta-section";
import { MarqueeSection } from "@/components/home/marquee-section";
import type {
  ContactCtaSectionCopy,
  MarqueeSectionCopy,
} from "@/components/home/types";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import {
  getMarqueeSettings,
  getSiteSettings,
  splitMarqueeRowItems,
} from "@/lib/app-config";
import { type MarqueeRow } from "@/components/layout/stacked-marquee-section";

type HomePageProps = {
  params: Promise<{
    locale: string;
  }>;
};

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: HomePageProps): Promise<Metadata> {
  await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(
    await getLocale().catch(() => siteSettings.defaultLocale),
    siteSettings.defaultLocale,
  );
  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/",
    title: t("meta.title"),
    description: t("meta.description"),
    applyTitleTemplate: false,
  });
}

export default async function HomePage({ params }: HomePageProps) {
  await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(
    await getLocale().catch(() => siteSettings.defaultLocale),
    siteSettings.defaultLocale,
  );

  const [t, marqueeSettings] = await Promise.all([
    getTranslations({ locale: localeKey, namespace: "homepage" }),
    getMarqueeSettings(),
  ]);

  const bentoCards = [
    {
      label: t("bento.about.eyebrow"),
      title: t("bento.about.title"),
      description: t("bento.about.description"),
    },
    {
      label: t("bento.coreStack.eyebrow"),
      title: t("bento.coreStack.title"),
      description: (t.raw("bento.coreStack.items") as string[]).join(" · "),
    },
    {
      label: t("bento.availability.eyebrow"),
      title: t("bento.availability.title"),
      description: t("bento.availability.description"),
    },
    {
      label: t("bento.currentFocus.eyebrow"),
      title: t("bento.currentFocus.title"),
      description: (t.raw("bento.currentFocus.items") as string[]).join(" · "),
    },
    {
      label: t("bento.contact.eyebrow"),
      title: t("bento.contact.title"),
      description: t("bento.contact.description"),
    },
    {
      label: t("bento.highlights.eyebrow"),
      title: t("bento.highlights.title"),
      description: (t.raw("bento.highlights.items") as Array<{ value: string; label: string }>)
        .map((i) => `${i.value} ${i.label}`)
        .join(" · "),
    },
  ];

  const marqueeCopy: MarqueeSectionCopy = {
    eyebrow: t("marquee.eyebrow"),
    title: t("marquee.title"),
    description: t("marquee.description"),
  };

  const contactCtaCopy: ContactCtaSectionCopy = {
    eyebrow: t("contactCta.eyebrow"),
    title: t("contactCta.title"),
    description: t("contactCta.description"),
    contactCta: t("contactCta.contactCta"),
    githubCta: t("contactCta.githubCta"),
    emailLabel: t("contactCta.emailLabel"),
    emailValue: t("contactCta.emailValue"),
    availabilityLabel: t("contactCta.availabilityLabel"),
    availabilityValue: t("contactCta.availabilityValue"),
    githubHref: t("contactCta.githubHref"),
  };

  const marqueeLocale = marqueeSettings.locales[localeKey];
  const marqueeRows = [
    { direction: "left", duration: 126, items: splitMarqueeRowItems(marqueeLocale.row1) },
    { direction: "right", duration: 220, items: splitMarqueeRowItems(marqueeLocale.row2) },
    { direction: "left", duration: 168, items: splitMarqueeRowItems(marqueeLocale.row3) },
    { direction: "right", duration: 144, items: splitMarqueeRowItems(marqueeLocale.row4) },
  ] satisfies MarqueeRow[];

  const portfolioHref = getLocalizedPath(localeKey, "/portfolio", siteSettings.defaultLocale);
  const contactHref = getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale);

  return (
    <>
      <HomeHero
        locale={localeKey}
        kicker={t("heroVisual.kicker")}
        title={t("heroVisual.title")}
        description={t("heroVisual.description")}
        availability={contactCtaCopy.availabilityValue}
        primaryCta={{ label: t("heroVisual.primaryCta"), href: portfolioHref }}
        secondaryCta={{ label: t("heroVisual.secondaryCta"), href: contactHref }}
      />

      <Container
        id="home-content"
        className="relative z-10 flex max-w-7xl flex-col gap-16 pb-14 pt-6 sm:gap-20 sm:pb-16 sm:pt-8 lg:gap-24 lg:pb-20 lg:pt-10"
      >
        <MotionFade>
          <MagicBentoSection
            eyebrow={t("bento.eyebrow")}
            heading={t("bento.title")}
            description={t("bento.description")}
            cards={bentoCards}
          />
        </MotionFade>

        <MotionFade delay={0.06}>
          <MarqueeSection copy={marqueeCopy} rows={marqueeRows} />
        </MotionFade>

        <MotionFade delay={0.1}>
          <ContactCtaSection copy={contactCtaCopy} contactHref={contactHref} />
        </MotionFade>
      </Container>
    </>
  );
}