sass-mohfarawati/app/[locale]/coming-soon/page.tsx

import type { Metadata } from "next";
import { unstable_noStore as noStore } from "next/cache";
import Link from "next/link";
import { ArrowLeft, ArrowRight, Mail } from "lucide-react";
import { getLocale, getTranslations } from "next-intl/server";

import { FloatingPreferences } from "@/components/layout/floating-preferences";
import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
import { LaunchCountdown } from "@/components/site/launch-countdown";
import { Button } from "@/components/ui/button";
import { getSiteSettings } from "@/lib/app-config";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";

// Target launch date for the countdown. Edit this single line to change it.
const LAUNCH_DATE_ISO = "2026-08-28T12:00:00Z";

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

export const dynamic = "force-dynamic";
export const revalidate = 0;

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

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/coming-soon",
    title: siteSettings.locales[localeKey].siteName,
    description: t("description"),
    applyTitleTemplate: false,
  });
}

export default async function ComingSoonPage({ params }: ComingSoonPageProps) {
  noStore();
  await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
  const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
  const isArabic = localeKey === "ar";
  const DirectionIcon = isArabic ? ArrowLeft : ArrowRight;

  const lines = [
    {
      text: t("titleLineOne"),
      tone: "soft" as const,
      align: isArabic ? ("center" as const) : ("start" as const),
    },
    {
      text: t("titleLineTwo"),
      tone: "default" as const,
      align: isArabic ? ("center" as const) : ("end" as const),
    },
    {
      text: t("titleLineThree"),
      tone: "accent" as const,
      align: isArabic ? ("center" as const) : ("start" as const),
    },
  ];

  const trackedEyebrow = isArabic ? "tracking-normal" : "uppercase tracking-[0.28em]";
  const trackedLabel = isArabic ? "tracking-normal" : "uppercase tracking-[0.24em]";
  const trackedPill = isArabic ? "tracking-normal" : "uppercase tracking-[0.12em]";

  return (
    <div className="relative min-h-screen overflow-hidden">
      <FloatingPreferences locale={localeKey} defaultLocale={siteSettings.defaultLocale} />

      <HeroShell className="min-h-screen" showBridges>
        <HeroContentMotion className="relative z-10 w-full">
          <div className="mx-auto w-full max-w-[60rem]">
            <div className="relative overflow-hidden rounded-[calc(var(--radius-surface)+10px)] border border-foreground/10 bg-background/45 px-6 py-12 shadow-panel backdrop-blur-[26px] dark:border-foreground/12 dark:bg-background/25 sm:px-14 sm:py-16">
              {/* top hairline highlight */}
              <span
                aria-hidden
                className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
              />
              {/* soft brand glow */}
              <span
                aria-hidden
                className="pointer-events-none absolute -top-28 left-1/2 h-64 w-[38rem] max-w-[120%] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,hsl(var(--brand-primary)/0.18),transparent)] blur-2xl"
              />

              <div className="relative flex flex-col items-center text-center">
                <HeroMotionItem>
                  <span
                    className={cn(
                      "inline-flex items-center gap-2.5 rounded-pill border border-foreground/10 bg-background/55 px-4 py-2 text-xs font-medium text-[hsl(var(--hero-ink)/0.82)] shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/12 dark:bg-background/20 dark:text-foreground/82",
                      trackedPill,
                    )}
                  >
                    <span className="relative flex h-2 w-2">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-secondary opacity-70" />
                      <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-secondary" />
                    </span>
                    {t("status")}
                  </span>
                </HeroMotionItem>

                <HeroMotionItem>
                  <p className={cn("mt-7 text-xs font-medium text-foreground/45", trackedEyebrow)}>
                    {t("kicker")}
                  </p>
                </HeroMotionItem>

                <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-4 tracking-normal" />

                <HeroMotionItem>
                  <p className="mx-auto mt-8 max-w-[36rem] text-sm leading-7 text-foreground/68 sm:text-base">
                    {t("description")}
                  </p>
                </HeroMotionItem>

                <HeroMotionItem className="mt-11 flex flex-col items-center gap-4">
                  <span className={cn("text-xs font-medium text-foreground/45", trackedLabel)}>
                    {t("countdownLabel")}
                  </span>
                  <LaunchCountdown
                    targetIso={LAUNCH_DATE_ISO}
                    arabic={isArabic}
                    launchedLabel={t("launched")}
                    labels={{
                      days: t("unitDays"),
                      hours: t("unitHours"),
                      minutes: t("unitMinutes"),
                      seconds: t("unitSeconds"),
                    }}
                  />
                </HeroMotionItem>

                <HeroMotionItem className="mt-12 flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row">
                  <Button asChild size="lg" className="w-full sm:w-auto">
                    <Link href={getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale)}>
                      <Mail className="h-4 w-4" />
                      {t("primaryCta")}
                    </Link>
                  </Button>
                  <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
                    <Link href={getLocalizedPath(localeKey, "/", siteSettings.defaultLocale)}>
                      {t("secondaryCta")}
                      <DirectionIcon className="h-4 w-4" />
                    </Link>
                  </Button>
                </HeroMotionItem>
              </div>
            </div>
          </div>
        </HeroContentMotion>
      </HeroShell>
    </div>
  );
}