'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';

export default function NotFound() {
  // variante pour les animations
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: { 
      opacity: 1,
      transition: { 
        staggerChildren: 0.2
      }
    }
  };
  
  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 }
  };

  // animation du chiffre 404
  const textVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.8,
        ease: [0.43, 0.13, 0.23, 0.96]
      }
    }
  };

  return (
    <motion.div 
      className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      <motion.div
        className="mb-6 overflow-hidden"
        variants={textVariants}
      >
        <div className="text-9xl font-bold text-primary relative">
          <motion.span 
            className="inline-block"
            animate={{ 
              rotateY: [0, 360],
            }}
            transition={{ 
              duration: 2,
              ease: "easeInOut",
              repeat: Infinity,
              repeatDelay: 5
            }}
          >4</motion.span>
          <motion.span 
            className="inline-block mx-4"
            animate={{ 
              scale: [1, 1.2, 1],
            }}
            transition={{ 
              duration: 1.5,
              ease: "easeInOut",
              repeat: Infinity,
              repeatDelay: 2
            }}
          >0</motion.span>
          <motion.span 
            className="inline-block"
            animate={{ 
              rotateY: [0, -360],
            }}
            transition={{ 
              duration: 2,
              ease: "easeInOut",
              repeat: Infinity,
              repeatDelay: 5
            }}
          >4</motion.span>
        </div>
      </motion.div>
      
      <motion.h1 
        className="text-3xl font-bold mb-6"
        variants={itemVariants}
      >
        Page Non Trouvée
      </motion.h1>
      
      <motion.p 
        className="text-lg text-muted-foreground mb-8 max-w-md"
        variants={itemVariants}
      >
        Oups ! La page que vous recherchez n'existe pas ou a été déplacée.
      </motion.p>
      
      <motion.div variants={itemVariants}>
        <Link 
          href="/"
          className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors hover:scale-105 transform duration-200 inline-block"
        >
          Retour à l'accueil
        </Link>
      </motion.div>
    </motion.div>
  );
}