'use client'

import { motion } from 'framer-motion'
import { useInView } from 'framer-motion'
import { useRef } from 'react'
import { Cloud, Server, HardDrive, CheckCircle, ArrowRight } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'

const services = [
  {
    icon: Cloud,
    title: 'Hébergement Cloud Vaultwarden Réunion',
    description: 'Hébergement sécurisé de votre Vaultwarden à la Réunion avec sauvegardes automatiques quotidiennes.',
    features: ['Sauvegardes automatiques', 'SSL/TLS inclus', 'Mise à jour gérée', 'Support technique'],
    gradient: 'from-blue-500 to-cyan-500',
  },
  {
    icon: HardDrive,
    title: 'Installation Vaultwarden Mini PC Réunion',
    description: 'Solution compacte clé en main pour entreprises de la Réunion sans NAS.',
    features: ['Matériel fourni', 'Installation complète', 'Configuration réseau', 'Support 60 jours'],
    gradient: 'from-security-accent to-green-500',
    popular: true,
  },
  {
    icon: Server,
    title: 'Installation Vaultwarden NAS Réunion',
    description: 'Installation complète de Vaultwarden sur votre NAS. Formation incluse.',
    features: ['Configuration complète', 'Formation personnalisée', 'Documentation détaillée', 'Support 30 jours'],
    gradient: 'from-purple-500 to-pink-500',
  },
]

export default function Services() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-100px' })

  return (
    <section id="services" className="section-padding bg-security-dark relative overflow-hidden">
      <BackgroundAnimations variant="particles" />
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Section Header - Centered */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <div className="inline-block px-4 py-2 bg-security-accent/10 border border-security-accent/30 rounded-full mb-6">
            <span className="text-security-accent text-sm font-semibold">Nos Services</span>
          </div>
          <h2 className="text-5xl md:text-6xl font-black mb-6 text-white">
            Des solutions <span className="gradient-text">adaptées</span>
          </h2>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed">
            Des solutions adaptées à vos besoins pour sécuriser vos mots de passe d'entreprise
          </p>
        </motion.div>

        {/* Services - Centered Grid Layout */}
        <div ref={ref} className="flex justify-center">
          <div className="grid md:grid-cols-3 gap-6 max-w-7xl">
            {services.map((service, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: index * 0.15 }}
                className={`relative ${service.popular ? 'neon-border' : 'card-dark'} p-8 rounded-3xl card-hover flex flex-col`}
              >
                {service.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
                    <span className="px-4 py-1 bg-gradient-to-r from-security-accent to-green-500 text-black text-sm font-bold rounded-full shadow-lg">
                      POPULAIRE
                    </span>
                  </div>
                )}

                {/* Icon */}
                <div className="flex-shrink-0 mb-6">
                  <div className={`w-20 h-20 bg-gradient-to-br ${service.gradient} rounded-2xl flex items-center justify-center shadow-2xl`}>
                    <service.icon className="w-10 h-10 text-white" />
                  </div>
                </div>

                {/* Content */}
                <div className="flex-grow">
                  <h3 className="text-2xl font-bold text-white mb-3">{service.title}</h3>
                  <p className="text-gray-400 leading-relaxed mb-6 text-sm">{service.description}</p>
                  
                  {/* Features - Vertical List */}
                  <ul className="space-y-3 mb-6">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center space-x-2 text-gray-300">
                        <CheckCircle className="w-4 h-4 text-security-accent flex-shrink-0" />
                        <span className="text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>

                  <motion.a
                    href="#contact"
                    whileHover={{ x: 5 }}
                    className="inline-flex items-center space-x-2 text-security-accent font-semibold hover:text-green-400 transition-colors"
                  >
                    <span>Découvrir</span>
                    <ArrowRight className="w-4 h-4" />
                  </motion.a>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}