import { Button } from '@/components/ui/button';
import { Link } from '@tanstack/react-router';
import { Compass, Home, Sparkles } from 'lucide-react';

export function NotFoundPage() {
  return (
    <main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-3 py-10 sm:px-6">
      <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.14),transparent_45%),radial-gradient(circle_at_80%_10%,rgba(244,114,182,0.12),transparent_40%),radial-gradient(circle_at_50%_90%,rgba(59,130,246,0.10),transparent_40%)]" />

      <section className="w-full max-w-2xl rounded-2xl border bg-card/80 p-8 text-card-foreground shadow-xl backdrop-blur">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs text-muted-foreground">
          <Sparkles className="size-3.5" />
          Error de navegación
        </div>

        <p className="text-sm font-medium tracking-wide text-muted-foreground">404</p>
        <h1 className="mt-2 text-4xl font-semibold tracking-tight">Página no encontrada</h1>
        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
          La ruta que intentaste abrir no existe o fue movida. Volvé al inicio o andá al onboarding
          para continuar.
        </p>

        <div className="mt-8 flex flex-wrap gap-3">
          <Button asChild>
            <Link to="/" preload="intent">
              <Home className="size-4" />
              Ir al inicio
            </Link>
          </Button>

          <Button asChild variant="outline">
            <Link to="/onboard" preload="intent">
              <Compass className="size-4" />
              Ir a onboard
            </Link>
          </Button>
        </div>
      </section>
    </main>
  );
}
