import { Link } from 'react-router-dom';
import { useLanguage } from '../contexts/LanguageContext';
import { Ghost, ArrowLeft, Home } from 'lucide-react';

export default function NotFound() {
  const { t } = useLanguage();

  return (
    <div className="min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
      {/* Animated background */}
      <div className="absolute inset-0 bg-th-bg">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-1/3 left-1/3 w-96 h-96 bg-th-accent rounded-full blur-[128px] animate-pulse" />
          <div className="absolute bottom-1/3 right-1/3 w-72 h-72 bg-purple-500 rounded-full blur-[128px] animate-pulse" style={{ animationDelay: '3s' }} />
        </div>
      </div>

      <div className="relative w-full max-w-md text-center">
        <div className="card p-10 backdrop-blur-xl bg-th-card/80 border border-th-border shadow-2xl rounded-2xl">
          {/* Ghost icon with subtle animation */}
          <div className="flex justify-center mb-6">
            <div className="w-20 h-20 bg-th-accent/10 rounded-full flex items-center justify-center animate-bounce" style={{ animationDuration: '2s' }}>
              <Ghost size={40} className="text-th-accent" />
            </div>
          </div>

          {/* 404 number */}
          <h1 className="text-7xl font-extrabold text-th-text mb-2 tracking-tight">404</h1>

          <h2 className="text-xl font-semibold text-th-text mb-2">
            {t('notFound.title')}
          </h2>

          <p className="text-th-text-s mb-8">
            {t('notFound.description')}
          </p>

          {/* Action buttons */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
            <button
              onClick={() => window.history.back()}
              className="btn-secondary w-full sm:w-auto px-5 py-2.5 flex items-center justify-center gap-2"
            >
              <ArrowLeft size={16} />
              {t('notFound.goBack')}
            </button>
            <Link
              to="/"
              className="btn-primary w-full sm:w-auto px-5 py-2.5 flex items-center justify-center gap-2"
            >
              <Home size={16} />
              {t('notFound.goHome')}
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}