"use client";

import { useTranslations, useLocale } from "next-intl";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import Link from "next/link";
import { Home, Search, Package } from "lucide-react";

export default function NotFoundPage() {
  const t = useTranslations("NotFound");
  const locale = useLocale();
  const basePath = `/${locale}`;

  return (
    <>
      <Header locale={locale} />
      <main className="min-h-screen bg-white">
        <div className="pt-[180px] lg:pt-[200px] pb-20 px-4">
          <div className="max-w-2xl mx-auto text-center">
            {/* 404 Code */}
            <div className="text-[120px] lg:text-[180px] font-light text-black/5 leading-none select-none mb-4">
              404
            </div>
            
            <h1 className="text-2xl lg:text-3xl font-medium mb-4">
              {t("title")}
            </h1>
            <p className="text-[#666666] mb-10 max-w-md mx-auto">
              {t("description")}
            </p>

            {/* Quick Links */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
              <Link
                href={`${basePath}/products`}
                className="flex items-center gap-2 px-6 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors w-full sm:w-auto justify-center"
              >
                <Package className="w-4 h-4" />
                {t("browseProducts")}
              </Link>
              <Link
                href={basePath}
                className="flex items-center gap-2 px-6 py-3 border border-black text-black text-sm uppercase tracking-[0.1em] hover:bg-black hover:text-white transition-colors w-full sm:w-auto justify-center"
              >
                <Home className="w-4 h-4" />
                {t("goHome")}
              </Link>
            </div>

            {/* Search Suggestion */}
            <div className="p-6 bg-[#f8f8f8] rounded-sm">
              <div className="flex items-center gap-3 mb-3 text-[#666666]">
                <Search className="w-5 h-5" />
                <span className="text-sm font-medium uppercase tracking-[0.1em]">
                  {t("lookingFor")}
                </span>
              </div>
              <p className="text-sm text-[#666666]">
                {t("searchSuggestion")}
              </p>
            </div>
          </div>
        </div>
      </main>
      <Footer locale={locale} />
    </>
  );
}