import { Sparkles } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

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

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

export default function ComingSoonPage({ params: { locale } }: ComingSoonPageProps) {
  const localeKey = resolveLocale(locale);
  const targetLocale = localeKey === "de" ? "en" : "de";
  const languageLabel = targetLocale.toUpperCase();

  const copy =
    localeKey === "de"
      ? {
          badge: "Coming Soon",
          titleStart: "Etwas",
          titleAccent: "Neues",
          titleEnd: "ist auf dem Weg.",
          description:
            "Meine Website ist aktuell im Wartungsmodus. Ich finalisiere Inhalte und den letzten Feinschliff vor dem Launch.",
          note:
            "Danke fuer deine Geduld. Bald geht eine klarere, schnellere und staerkere Version live.",
        }
      : {
          badge: "Coming Soon",
          titleStart: "Something",
          titleAccent: "new",
          titleEnd: "is on the way.",
          description:
            "My website is currently in maintenance mode. I am finalizing content and polish before launch.",
          note:
            "Thank you for your patience. A cleaner, faster, and stronger version is launching soon.",
        };

  return (
    <div className="relative min-h-screen overflow-hidden bg-app">
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(circle at 14% 18%, color-mix(in oklab, var(--color-brand-secondary) 36%, transparent), transparent 48%), radial-gradient(circle at 86% 82%, color-mix(in oklab, var(--color-brand-primary) 32%, transparent), transparent 50%)",
        }}
      />

      <div className="pointer-events-none absolute left-1/2 top-[-120px] h-[340px] w-[340px] -translate-x-1/2 rounded-full bg-[color-mix(in_oklab,var(--color-brand-secondary)_32%,transparent)] blur-[96px]" />

      <div className="relative mx-auto flex min-h-screen w-full max-w-6xl items-center px-4 py-14 sm:px-6 lg:px-8">
        <MotionFade className="w-full">
          <section className="brand-glow relative mx-auto max-w-4xl overflow-hidden rounded-[2.25rem] border border-default bg-surface-elevated p-7 text-center shadow-[0_24px_70px_-26px_rgba(0,0,0,0.35)] sm:p-10 lg:p-14">
            <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-[color-mix(in_oklab,var(--color-brand-secondary)_30%,transparent)] blur-[90px]" />
            <div className="pointer-events-none absolute -bottom-24 -left-24 h-80 w-80 rounded-full bg-[color-mix(in_oklab,var(--color-brand-primary)_28%,transparent)] blur-[110px]" />

            <div className="relative">
              <div className="mx-auto mb-8 flex w-fit items-center gap-2 rounded-xl border border-strong bg-surface px-2 py-2">
                <ThemeToggle />
                <Link
                  href={`/${targetLocale}/coming-soon`}
                  className="inline-flex h-9 min-w-11 items-center justify-center rounded-md border border-strong px-3 text-xs font-semibold tracking-wide text-muted-strong transition hover-surface-soft"
                  aria-label={`Switch language to ${targetLocale}`}
                >
                  {languageLabel}
                </Link>
              </div>

              <p className="inline-flex items-center gap-2 rounded-full border border-default bg-surface px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-muted-strong">
                <Sparkles className="h-3.5 w-3.5" />
                {copy.badge}
              </p>

              <div className="mt-7 flex items-center justify-center">
                <Image
                  src="/logos/light-primary.svg"
                  alt="Logo"
                  width={190}
                  height={44}
                  className="block h-auto w-[150px] dark:hidden sm:w-[190px]"
                  priority
                />
                <Image
                  src="/logos/dark-primary.svg"
                  alt="Logo"
                  width={190}
                  height={44}
                  className="hidden h-auto w-[150px] dark:block sm:w-[190px]"
                  priority
                />
              </div>

              <h1 className="mx-auto mt-7 max-w-3xl text-4xl font-semibold tracking-tight text-fg sm:text-5xl lg:text-6xl">
                {copy.titleStart} <span className="brand-gradient-text">{copy.titleAccent}</span> {copy.titleEnd}
              </h1>

              <p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-muted-strong sm:text-lg">
                {copy.description}
              </p>

              <p className="mx-auto mt-6 max-w-2xl text-sm text-subtle sm:text-base">{copy.note}</p>
            </div>
          </section>
        </MotionFade>
      </div>
    </div>
  );
}