"use client";

import Link from "next/link";
import { ArrowLeft, Home } from "lucide-react";
import { Container } from "@/components/common/Container";
import { ButtonLink } from "@/components/common/Button";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";

export default function NotFound() {
  const { t, dir } = useTranslation();

  return (
    <section className="relative isolate flex min-h-[70vh] items-center overflow-hidden bg-mesh py-20">
      <div aria-hidden className="absolute inset-0 -z-10 grid-pattern opacity-60 dark:opacity-30" />
      <Container>
        <div className="mx-auto max-w-2xl text-center">
          <Reveal>
            <p
              className="text-display-2xl gradient-text-animated leading-none"
              aria-hidden
            >
              404
            </p>
          </Reveal>
          <Reveal delay={0.05} className="mt-4">
            <h1 className="text-balance text-display-md tracking-tight text-slate-900 dark:text-white sm:text-display-lg">
              Page not found
            </h1>
          </Reveal>
          <Reveal delay={0.1} className="mt-4">
            <p className="text-balance text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
              The page you&apos;re looking for doesn&apos;t exist or has been moved.
            </p>
          </Reveal>
          <Reveal delay={0.15} className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <ButtonLink href="/" size="lg">
              <Home className="h-4 w-4" />
              {t("common.backHome")}
            </ButtonLink>
            <Link
              href="/contact"
              className="group inline-flex items-center gap-2 text-sm font-semibold text-slate-700 transition-colors hover:text-brand-700 dark:text-slate-200 dark:hover:text-brand-300"
            >
              <ArrowLeft
                className="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
                style={{ transform: dir === "rtl" ? "scaleX(-1)" : undefined }}
              />
              Contact support
            </Link>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}