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

import type { Metadata } from "next";
import {
  ArrowRight,
  BriefcaseBusiness,
  Boxes,
  Mail,
  Sparkles,
} from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { MotionFade } from "@/components/motion-fade";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { pickText, portfolioItems, productItems } from "@/lib/site-data";

type HomePageProps = {
  params: {
    locale: string;
  };
};

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

  return buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/",
    title: t("heroTitle"),
    description: t("heroText"),
  });
}

export default async function HomePage({ params: { locale } }: HomePageProps) {
  const localeKey = resolveLocale(locale);
  const featuredProjects = portfolioItems.slice(0, 3);
  const featuredProducts = productItems.slice(0, 3);
  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });

  return (
    <Container className="flex flex-col gap-section py-10 lg:py-14">
      <MotionFade>
        <AppCard level={3}>
          <CardContent className="grid gap-6 p-6 lg:grid-cols-[1.35fr_0.65fr] lg:p-10">
            <div className="space-y-5">
              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
                <Sparkles className="h-4 w-4 text-brand-secondary" />
                {t("heroKicker")}
              </p>
              <h1 className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-5xl">
                {t("heroTitle")}
              </h1>
              <p className="max-w-2xl text-base text-muted-foreground sm:text-lg">
                {t("heroText")}
              </p>
              <div className="flex flex-wrap gap-3">
                <Button asChild>
                  <Link href={getLocalizedPath(localeKey, "/portfolio")}>
                    {t("toPortfolio")}
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
                <Button asChild variant="outline">
                  <Link href={getLocalizedPath(localeKey, "/products")}>{t("toProducts")}</Link>
                </Button>
              </div>
            </div>

            <AppCard level={2} padding="md" className="self-start">
              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
                <BriefcaseBusiness className="h-4 w-4 text-brand-primary" />
                {t("heroCardTitle")}
              </p>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                {t("heroCardText")}
              </p>
            </AppCard>
          </CardContent>
        </AppCard>
      </MotionFade>

      <MotionFade delay={0.05}>
        <AppCard>
          <CardContent className="p-6 lg:p-8">
            <div className="mb-6 flex items-center justify-between gap-4">
              <div>
                <h2 className="text-2xl font-semibold text-foreground">
                  {t("portfolioTitle")}
                </h2>
                <p className="mt-2 text-sm text-muted-foreground">
                  {t("portfolioText")}
                </p>
              </div>
              <BriefcaseBusiness className="h-5 w-5 text-muted-foreground" />
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              {featuredProjects.map((item) => (
                <AppCard key={item.slug} interactive>
                  <CardContent className="p-5">
                    <Link
                      href={getLocalizedPath(localeKey, `/portfolio/${item.slug}`)}
                      className="group block"
                    >
                      <p className="text-sm text-muted-foreground/80">
                        {pickText(item.category, localeKey)} - {item.year}
                      </p>
                      <h3 className="mt-2 text-lg font-semibold text-foreground">
                        {pickText(item.title, localeKey)}
                      </h3>
                      <p className="mt-2 text-sm text-muted-foreground">
                        {pickText(item.summary, localeKey)}
                      </p>
                      <span className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
                        {t("toPortfolio")}
                        <ArrowRight className="h-4 w-4" />
                      </span>
                    </Link>
                  </CardContent>
                </AppCard>
              ))}
            </div>
          </CardContent>
        </AppCard>
      </MotionFade>

      <MotionFade delay={0.1}>
        <AppCard>
          <CardContent className="p-6 lg:p-8">
            <div className="mb-6 flex items-center justify-between gap-4">
              <div>
                <h2 className="text-2xl font-semibold text-foreground">
                  {t("productsTitle")}
                </h2>
                <p className="mt-2 text-sm text-muted-foreground">
                  {t("productsText")}
                </p>
              </div>
              <Boxes className="h-5 w-5 text-muted-foreground" />
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              {featuredProducts.map((item) => (
                <AppCard key={item.slug} interactive>
                  <CardContent className="p-5">
                    <Link
                      href={getLocalizedPath(localeKey, `/products/${item.slug}`)}
                      className="group block"
                    >
                      <p className="text-sm text-muted-foreground/80">
                        {pickText(item.segment, localeKey)}
                      </p>
                      <h3 className="mt-2 text-lg font-semibold text-foreground">
                        {pickText(item.name, localeKey)}
                      </h3>
                      <p className="mt-2 text-sm text-muted-foreground">
                        {pickText(item.summary, localeKey)}
                      </p>
                      <p className="mt-3 text-sm font-medium text-foreground/80">
                        {pickText(item.price, localeKey)}
                      </p>
                    </Link>
                  </CardContent>
                </AppCard>
              ))}
            </div>
          </CardContent>
        </AppCard>
      </MotionFade>

      <MotionFade delay={0.15}>
        <AppCard level="inverse">
          <CardContent className="p-6 lg:p-8">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
              <div>
                <p className="inline-flex items-center gap-2 text-sm font-medium text-surface-inverse-foreground/80">
                  <Mail className="h-4 w-4" />
                  {t("ctaTitle")}
                </p>
                <p className="mt-2 max-w-2xl text-sm text-surface-inverse-foreground/88 sm:text-base">
                  {t("ctaText")}
                </p>
              </div>
              <Button asChild variant="secondary">
                <Link href={getLocalizedPath(localeKey, "/contact")}>
                  {t("toContact")}
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </div>
          </CardContent>
        </AppCard>
      </MotionFade>
    </Container>
  );
}