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

import type { Metadata } from "next";
import { Mail, MapPin, Phone } from "lucide-react";
import { getLocale, getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { PageHero } from "@/components/layout/page-hero";
import { MotionFade } from "@/components/motion-fade";
import { ContactForm } from "@/components/site/contact-form";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getSiteSettings } from "@/lib/app-config";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { AppCard } from "@/components/ui/app-card";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { submitContactFormAction } from "./actions";

type ContactPageProps = {
  params: Promise<{
    locale: string;
  }>;
  searchParams?: Promise<{
    error?: string;
  }>;
};

export async function generateMetadata({ params }: ContactPageProps): 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: "contactPage" });

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/contact",
    title: t("title"),
    description: t("intro"),
  });
}

export default async function ContactPage({ params, searchParams }: ContactPageProps) {
  await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
  const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
  const contactError = (await searchParams)?.error;

  return (
    <>
      <PageHero
        locale={localeKey}
        badge={t("heroBadge")}
        title={t("heroTitle")}
        description={t("intro")}
      />

      {contactError ? (
        <Container className="pb-6">
          <p
            role="alert"
            className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm font-medium text-destructive"
          >
            {contactError}
          </p>
        </Container>
      ) : null}

      <Container className="grid gap-6 pb-12 lg:grid-cols-2 lg:pb-16">
        <MotionFade>
        <AppCard level={3}>
          <CardHeader>
            <CardTitle className="text-3xl sm:text-4xl">{t("title")}</CardTitle>
            <p className="text-base text-muted-foreground sm:text-lg">{t("intro")}</p>
          </CardHeader>
          <CardContent>
            <ul className="space-y-3 text-sm text-foreground/85">
              <li className="inline-flex items-center gap-2">
                <Phone className="h-4 w-4 text-brand-primary" />
                +49 30 123456
              </li>
              <li className="inline-flex items-center gap-2">
                <Mail className="h-4 w-4 text-brand-primary" />
                hello@moh-sass.dev
              </li>
              <li className="inline-flex items-center gap-2">
                <MapPin className="h-4 w-4 text-brand-primary" />
                {t("city")}
              </li>
            </ul>
          </CardContent>
        </AppCard>
        </MotionFade>

        <MotionFade delay={0.05}>
        <AppCard>
          <CardContent className="pt-6">
            <ContactForm
              action={submitContactFormAction}
              locale={localeKey}
              previewHref={getLocalizedPath(localeKey, "/success", siteSettings.defaultLocale)}
              copy={{
                name: t("name"),
                email: t("email"),
                phone: t("phone"),
                company: t("company"),
                message: t("message"),
                note: t("note"),
                submit: t("submit"),
                preview: t("preview"),
              }}
            />
          </CardContent>
        </AppCard>
        </MotionFade>
      </Container>
    </>
  );
}