"use client"
import { useSelectTheme } from '@/hooks/useSelectTheme';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useEffect, useState } from 'react';

export default function NotFoundContent() {
  const [isDarkMode, setIsDarkMode] = useState<boolean | null>(null);
  const t=useTranslations()
  useEffect(() => {
    const init = () => {
      const saved = localStorage.getItem('theme') === 'dark';
      setIsDarkMode(saved);
      if (saved) document.documentElement.classList.add('dark');
    }
    init();
  }, [])
  return (
    <div className="text-center px-4 py-8">
      <div className="mb-8">
        <img src={isDarkMode ? '/dark-404-img.svg' : '/404-img.svg'} className='mx-auto' alt="404" />
      </div>

      <h2 className="text-3xl font-bold text-neutrals800 mb-4 dark:text-neutrals100">
        {t("something_went_wrong")}
      </h2>

      <p className="text-gray-500 mb-8 max-w-md mx-auto dark:text-neutrals300">
        {t("page_not_found")}
      </p>

      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <Link href="/"
          className="relative flex items-center gap-2 px-4 py-2.5 text-base rounded-lg transition-all duration-300 cursor-pointer max-md:text-sm overflow-hidden group text-white bg-primary500 hover:bg-primary600 hover:shadow-lg hover:shadow-primary500/30 hover:-translate-y-[1px] active:translate-y-0 active:shadow-md dark:bg-primary400 dark:hover:bg-primary300 dark:hover:shadow-primary400/30 focus:ring-2 focus:ring-primary500 focus:ring-offset-2 dark:focus:ring-primary400 dark:focus:ring-offset-gray-900 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700"
        >
          {t("back_to_home")}
        </Link>
      </div>
    </div>
  );
}