import { NavLink } from 'react-router';

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center text-white">
      <div className="w-full max-w-lg bg-gradient-to-br from-gray-100 to-gray-300/20 shadow-2xl shadow-gray-400/20 flex flex-col items-center justify-center p-10 gap-8 rounded-2xl backdrop-blur-lg border border-gray-200/30">
        <h1 className="text-6xl font-extrabold text-red-500 drop-shadow-lg font-display">404</h1>
        <p className="text-lg text-gray-700 text-center">La página que estás buscando no existe.</p>
        
        <NavLink 
          to="/" 
          className="px-6 py-3 text-lg font-semibold text-white bg-blue-600 rounded-lg shadow-lg shadow-blue-600/30 transition-transform duration-200 hover:scale-105 hover:bg-blue-700"
        >
          Regresar
        </NavLink>
      </div>
    </div>
  );
}