import { Link } from 'react-router-dom';
import { Home, AlertCircle } from 'lucide-react';

const NotFound = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6">
      <div className="bg-muted p-6 rounded-full">
        <AlertCircle className="w-16 h-16 text-primary" />
      </div>
      <div>
        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
        <h2 className="text-xl text-muted-foreground">Página no encontrada</h2>
        <p className="text-sm text-muted-foreground mt-2 max-w-md">
          La página que estás buscando no existe o ha sido movida. 
          Por favor, verifica la URL o vuelve al inicio.
        </p>
      </div>
      <Link
        to="/"
        className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
      >
        <Home className="w-4 h-4" />
        Volver al inicio
      </Link>
    </div>
  );
};

export default NotFound;