"use client";

import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { IconArrowLeft, IconHome } from "@tabler/icons-react";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";

export default function NotFound() {
  const t = useTranslations("notFound");

  return (
    <div className="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center px-4 py-16">
      <div className="w-full max-w-md">
        <DotLottieReact
          autoplay
          className="w-full"
          loop
          src="/animations/404.lottie"
        />
      </div>

      <div className="mt-6 text-center">
        <h1 className="font-bold text-2xl text-white sm:text-3xl">
          {t("title")}
        </h1>
        <p className="mt-3 max-w-md text-neutral-400 text-sm leading-relaxed">
          {t("description")}
        </p>
      </div>

      <div className="mt-8 flex flex-col gap-3 sm:flex-row">
        <Link
          className="inline-flex items-center justify-center gap-2 rounded-xl bg-[#fd105e] px-6 py-3 font-semibold text-sm text-white shadow-[#fd105e]/20 shadow-lg transition-colors hover:bg-[#e00d54]"
          href="/"
        >
          <IconHome size={18} stroke={1.5} />
          {t("ctaHome")}
        </Link>
        <button
          className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-6 py-3 font-semibold text-neutral-300 text-sm transition-colors hover:bg-white/10"
          onClick={() => window.history.back()}
          type="button"
        >
          <IconArrowLeft size={18} stroke={1.5} />
          {t("ctaBack")}
        </button>
      </div>
    </div>
  );
}