import { CalendarClock, Rocket, ShieldCheck, Sparkles } from "lucide-react";
import Link from "next/link";

import { MotionFade } from "@/components/motion-fade";
import { resolveLocale } from "@/lib/site-data";

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

export default function ComingSoonPage({ params: { locale } }: ComingSoonPageProps) {
  const localeKey = resolveLocale(locale);

  const copy =
    localeKey === "de"
      ? {
          badge: "In Vorbereitung",
          title: "Wir bauen gerade etwas Grosses.",
          description:
            "Die Website ist aktuell im Wartungsmodus. Wir finalisieren Inhalte, Feinschliff und Integrationen fuer den Launch.",
          cardOneTitle: "Launch Fokus",
          cardOneText: "Performance, UX und klare Conversion-Flows.",
          cardTwoTitle: "Naechster Schritt",
          cardTwoText: "Deployment-Checks und finale Inhalte.",
          cardThreeTitle: "Status",
          cardThreeText: "Systeme sind online und werden vorbereitet.",
          adminLink: "Zum Root Bereich",
          footer: "Danke fuer deine Geduld.",
        }
      : {
          badge: "Preparing",
          title: "We are building something big.",
          description:
            "The website is currently in maintenance mode. We are finalizing content, polish and integrations before launch.",
          cardOneTitle: "Launch focus",
          cardOneText: "Performance, UX and clear conversion flows.",
          cardTwoTitle: "Next step",
          cardTwoText: "Deployment checks and final content updates.",
          cardThreeTitle: "Status",
          cardThreeText: "Systems are online and being prepared.",
          adminLink: "Open root area",
          footer: "Thank you for your patience.",
        };

  return (
    <div className="relative overflow-hidden">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(24,24,27,0.1),transparent_55%)] dark:bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.18),transparent_55%)]" />
      <div className="relative mx-auto flex min-h-[70vh] w-full max-w-6xl flex-col justify-center gap-8 px-4 py-14 sm:px-6 lg:px-8 lg:py-20">
        <MotionFade>
          <section className="rounded-3xl border border-zinc-200 bg-white/95 p-8 shadow-sm backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/95 lg:p-12">
            <p className="inline-flex items-center gap-2 rounded-full border border-zinc-300 bg-zinc-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
              <Sparkles className="h-3.5 w-3.5" />
              {copy.badge}
            </p>

            <h1 className="mt-5 max-w-3xl text-4xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl lg:text-6xl">
              {copy.title}
            </h1>

            <p className="mt-5 max-w-2xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
              {copy.description}
            </p>

            <div className="mt-8">
              <Link
                href={`/${localeKey}/root`}
                className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
              >
                <ShieldCheck className="h-4 w-4" />
                {copy.adminLink}
              </Link>
            </div>
          </section>
        </MotionFade>

        <section className="grid gap-4 md:grid-cols-3">
          <MotionFade delay={0.05}>
            <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
                <Rocket className="h-4 w-4" />
                {copy.cardOneTitle}
              </p>
              <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{copy.cardOneText}</p>
            </article>
          </MotionFade>

          <MotionFade delay={0.1}>
            <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
                <CalendarClock className="h-4 w-4" />
                {copy.cardTwoTitle}
              </p>
              <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{copy.cardTwoText}</p>
            </article>
          </MotionFade>

          <MotionFade delay={0.15}>
            <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
                <ShieldCheck className="h-4 w-4" />
                {copy.cardThreeTitle}
              </p>
              <p className="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{copy.cardThreeText}</p>
            </article>
          </MotionFade>
        </section>

        <MotionFade delay={0.2}>
          <p className="text-sm text-zinc-500 dark:text-zinc-400">{copy.footer}</p>
        </MotionFade>
      </div>
    </div>
  );
}