'use client';

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

export default function Restricted() {
  // animation cadenas
  const lockVariants = {
    locked: {
      rotate: [0, -10, 10, -10, 10, 0],
      transition: {
        duration: 0.5,
        repeat: 1,
        repeatDelay: 3
      }
    }
  };

  // animation contenu
  const contentVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: {
        delay: 0.3,
        duration: 0.6
      }
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center">
      <motion.div
        className="mb-8"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ 
          type: "spring",
          damping: 10,
          stiffness: 100
        }}
      >
        <motion.div 
          className="w-32 h-32 mx-auto relative"
          animate="locked"
          variants={lockVariants}
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full text-red-500">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
          </svg>
          
          <motion.div 
            className="absolute w-full h-full top-0 left-0 flex items-center justify-center text-white"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 }}
          >
          </motion.div>
        </motion.div>
      </motion.div>
      
      <motion.div
        variants={contentVariants}
        initial="hidden"
        animate="visible"
      >
        <h1 className="text-3xl font-bold mb-4">Accès Restreint</h1>
        
        <p className="text-lg text-muted-foreground mb-8 max-w-md mx-auto">
          Cette zone nécessite une méthode d'accès spéciale. Utilisez le raccourci clavier pour y accéder.
        </p>
        
        <Link 
          href="/"
          className="mt-4 px-6 py-3 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors inline-block"
        >
          Retour à l'accueil
        </Link>
      </motion.div>
    </div>
  );
}