'use client'

import { motion } from 'framer-motion'
import { Lock, Shield, ArrowRight, Sparkles, Zap, Globe } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'

export default function Hero() {
  return (
    <section id="accueil" className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 gradient-bg">
      {/* Animated Grid Background */}
      <BackgroundAnimations variant="gradient" />

      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="max-w-6xl mx-auto">
          {/* Top Badge */}
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="flex justify-center mb-8"
          >
            <div className="inline-flex items-center space-x-2 px-6 py-3 bg-security-card border border-security-border rounded-full">
              <Zap className="w-4 h-4 text-security-accent" />
              <span className="text-sm font-semibold text-gray-300">Expert Vaultwarden à la Réunion</span>
            </div>
          </motion.div>

          {/* Main Content - Centered Layout */}
          <div className="text-center mb-16">
            <motion.h1
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="text-6xl md:text-8xl font-black mb-8 leading-tight"
            >
              <span className="block text-white mb-4">Sécurisez vos</span>
              <span className="gradient-text block text-7xl md:text-9xl">mots de passe</span>
              <span className="block text-4xl md:text-5xl mt-4 text-gray-400 font-light">
                d'entreprise
              </span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed"
            >
              Hébergement sécurisé, installation NAS et Mini PC. Solutions de gestion de mots de passe 
              pour entreprises <span className="text-security-accent font-bold">974</span>.
            </motion.p>

            {/* CTA Buttons - Horizontal */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
            >
              <motion.a
                href="#contact"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="group px-10 py-5 bg-gradient-to-r from-security-accent to-green-500 text-black rounded-2xl font-bold text-lg shadow-2xl shadow-security-accent/50 flex items-center space-x-3 hover:shadow-security-accent/70 transition-all duration-300"
              >
                <span>Voir nos offres</span>
                <ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" />
              </motion.a>
              <motion.a
                href="#services"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="px-10 py-5 border-2 border-security-accent text-security-accent rounded-2xl font-bold text-lg hover:bg-security-accent/10 transition-all duration-300"
              >
                En savoir plus
              </motion.a>
            </motion.div>
          </div>

          {/* Stats Grid - 3 Columns */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.8 }}
            className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto"
          >
            {[
              { icon: Shield, label: 'AES-256', value: 'Chiffrement', color: 'text-security-accent' },
              { icon: Lock, label: 'Zero-Knowledge', value: 'Architecture', color: 'text-green-400' },
              { icon: Globe, label: 'RGPD', value: 'Conformité 100%', color: 'text-emerald-400' },
            ].map((stat, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 1 + index * 0.2 }}
                className="p-6 card-dark security-glow card-hover"
              >
                <stat.icon className={`w-10 h-10 ${stat.color} mb-4 mx-auto`} />
                <div className="text-2xl font-bold text-white mb-2">{stat.label}</div>
                <div className="text-sm text-gray-400">{stat.value}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </div>

      {/* Bottom Wave */}
      <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-security-dark to-transparent" />
    </section>
  )
}