"use client";

import Link from "next/link";
import { Home, Search } from "lucide-react";
import Container from "@/components/ui/Container";
import { LinkButton } from "@/components/ui/Button";
import { useLanguage } from "@/lib/i18n/LanguageContext";

export default function NotFound() {
  const { lang } = useLanguage();
  const isAr = lang === "ar";

  return (
    <section className="relative flex min-h-[80vh] items-center overflow-hidden bg-[var(--bg)]">
      <div className="pointer-events-none absolute inset-y-0 end-0 w-1/2 opacity-40">
        <div className="shutter-lines h-full w-full [mask-image:linear-gradient(to_left,black,transparent)]" />
      </div>
      <div className="pointer-events-none absolute -top-40 end-[-10%] h-[480px] w-[480px] rounded-full bg-[var(--gold)]/10 blur-3xl" />
      <div className="grain-overlay" />

      <Container className="relative flex flex-col items-center py-24 text-center">
        <span className="font-display text-gold-gradient text-8xl font-black leading-none sm:text-9xl">
          404
        </span>
        <div className="shutter-lines-faint mt-6 h-10 w-40 rounded-full" />
        <h1 className="font-display balance mt-8 max-w-md text-2xl font-extrabold text-[var(--ink)] sm:text-3xl">
          {isAr ? "يبدو أن هذا الباب مغلق .. الصفحة غير موجودة" : "Looks like this door is closed .. page not found"}
        </h1>
        <p className="mt-4 max-w-sm text-[15px] leading-7 text-[var(--ink-soft)]">
          {isAr
            ? "الرابط الذي تحاول الوصول إليه غير متاح أو تم نقله. يمكنك العودة للرئيسية أو تصفح منتجاتنا مباشرة."
            : "The link you're trying to reach is unavailable or has moved. You can return home or browse our products directly."}
        </p>
        <div className="mt-9 flex flex-wrap items-center justify-center gap-4">
          <LinkButton href="/" icon={<Home size={17} />}>
            {isAr ? "العودة للرئيسية" : "Back to Home"}
          </LinkButton>
          <LinkButton href="/products" variant="outline" icon={<Search size={17} />}>
            {isAr ? "تصفح المنتجات" : "Browse Products"}
          </LinkButton>
        </div>
        <Link
          href="/contact"
          className="mt-8 text-sm text-[var(--ink-faint)] underline-offset-4 transition hover:text-[var(--gold)] hover:underline"
        >
          {isAr ? "أو تواصل معنا مباشرة" : "Or contact us directly"}
        </Link>
      </Container>
    </section>
  );
}