'use client';

import { motion } from 'framer-motion';
import { ChevronLeft, Home } from 'lucide-react';
import { UILink } from '@/components/ui';
import { buttonVariants } from '@/components/ui/button-variants';

export default function NotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="text-center">
        {/* Animación del número 404 */}
        <motion.div
          initial={{ opacity: 0, y: -50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="relative"
        >
          <h1 className="from-text-primary to-text-secondary bg-linear-to-r bg-clip-text text-8xl font-bold text-transparent md:text-9xl">
            404
          </h1>
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
            className="bg-foreground absolute -top-10 -right-10 h-20 w-20 rounded-full opacity-50 blur-2xl"
          />
        </motion.div>

        {/* Mensaje principal */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3, duration: 0.8 }}
          className="mt-8"
        >
          <h2 className="mb-4 text-2xl font-semibold text-gray-800 md:text-3xl">
            ¡Página no encontrada!
          </h2>
          <p className="mx-auto mb-8 max-w-md text-gray-600">
            Lo sentimos, la página que estás buscando no existe o ha sido movida.
          </p>
        </motion.div>

        {/* Botones de acción */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6, duration: 0.8 }}
          className="flex flex-col justify-center gap-4 sm:flex-row"
        >
          <UILink href="/" className={buttonVariants({ variant: 'primary' })}>
            <Home className="mr-2 h-5 w-5" />
            Ir al inicio
          </UILink>

          <UILink href="/modelos" className={buttonVariants({ variant: 'terciary' })}>
            <ChevronLeft className="mr-2 h-5 w-5" />
            Ir a modelos
          </UILink>
        </motion.div>

        {/* Sugerencia adicional */}
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.9, duration: 0.8 }}
          className="mt-12 text-sm text-gray-500"
        >
          Error 404 · Página no encontrada
        </motion.p>
      </div>
    </div>
  );
}