import { headers } from "next/headers";
import { ArrowRight } from "lucide-react";
import GlowButton from "@/components/ui/GlowButton";
import { isValidLocale, defaultLocale } from "@/lib/dictionaries";

export default async function NotFound() {
  const headerList = await headers();
  const segment = headerList.get("x-locale") ?? "";
  const locale = isValidLocale(segment) ? segment : defaultLocale;
  const isSR = locale === "sr";

  return (
    <section className="relative isolate flex min-h-[80svh] items-center overflow-hidden pt-24">
      <div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_30%,transparent_70%)] opacity-30" />

      <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <div className="font-display text-display-2xl font-medium tracking-tight text-gradient-purple">
            404
          </div>
          <h1 className="mt-4 font-display text-2xl font-medium text-gradient-fade sm:text-3xl">
            {isSR ? "Stranica nije pronađena." : "Page not found."}
          </h1>
          <p className="mx-auto mt-4 max-w-md text-base leading-relaxed text-text-secondary">
            {isSR
              ? "Stranica koju tražite ne postoji ili je premještena."
              : "The page you're looking for doesn't exist or has been moved."}
          </p>
          <div className="mt-10 flex justify-center">
            <GlowButton
              href={`/${locale}`}
              variant="primary"
              size="lg"
              icon={<ArrowRight className="h-4 w-4" />}
            >
              {isSR ? "Nazad na početnu" : "Back to home"}
            </GlowButton>
          </div>
        </div>
      </div>
    </section>
  );
}