'use client';
import { useRouter } from 'next/navigation';

export default function NotFound() {

  const router = useRouter();

  return (
    <main className="h-screen w-full flex flex-col justify-center items-center bg-gray-900">
      <h1 className="text-9xl font-extrabold text-white-500 tracking-widest">404</h1>
      <div className="bg-primary-500 px-2 text-sm rounded rotate-12 absolute text-white-500 font-medium">
        صفحه پیدا نشد
      </div>
      <button 
        onClick={() => router.push('/')}
        className="mt-5 relative inline-block rounded-full text-sm font-medium text-primary-500 group active:text-primary-600 focus:outline-none focus:ring focus:ring-primary-400 transition-all"
      >
        <span
          className="absolute inset-0 transition-transform rounded-full translate-x-0.5 translate-y-0.5 bg-primary-500 group-hover:translate-y-0 group-hover:translate-x-0"
        ></span>

        <span className="relative text-white font-bold text-lg rounded-full block px-8 py-3 bg-gray-900 border-2 border-primary-500 group-hover:bg-primary-500 transition-colors">
          بازگشت
        </span>
      </button>
    </main>
  );
}