'use client'

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

const plans = [
  {
    icon: Cloud,
    name: 'Cloud Hébergé',
    subtitle: 'Hébergement sécurisé chez nous',
    price: '20',
    period: '/ mois par utilisateur',
    badge: null,
    features: [
      '5 à 100 utilisateurs',
      'Stockage 10 à 100 Go',
      'Sauvegardes quotidiennes',
      'SSL/TLS inclus',
      'Support email',
      'Mises à jour automatiques',
    ],
    cta: 'Demander un devis',
    gradient: 'from-blue-500 to-cyan-500',
  },
  {
    icon: HardDrive,
    name: 'Installation Mini PC',
    subtitle: 'Solution clé en main',
    price: '500',
    period: ' installation',
    badge: 'Recommandé',
    features: [
      'Matériel inclus',
      'Installation complète',
      'Configuration réseau',
      'Formation sur site',
      'Support 60 jours inclus',
      'Garantie matériel 1 an',
    ],
    cta: 'Demander un devis',
    gradient: 'from-security-accent to-green-500',
  },
  {
    icon: Server,
    name: 'Installation NAS',
    subtitle: 'Sur votre infrastructure',
    price: '350',
    period: ' installation',
    badge: null,
    features: [
      'Configuration complète',
      'Formation personnalisée',
      'Documentation détaillée',
      'Certificat SSL',
      'Support 30 jours inclus',
      'Support optionnel dispo',
    ],
    cta: 'Demander un devis',
    gradient: 'from-purple-500 to-pink-500',
  },
]

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

  return (
    <section id="tarifs" className="section-padding bg-security-darker relative overflow-hidden">
      <BackgroundAnimations variant="default" />
      <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 Offres</span>
          </div>
          <h2 className="text-5xl md:text-6xl font-black mb-6 text-white">
            Nos <span className="gradient-text">Tarifs</span>
          </h2>
          <p className="text-xl text-gray-400 leading-relaxed max-w-2xl mx-auto">
            Des offres transparentes pour tous les budgets, de l'hébergement cloud aux installations sur site
          </p>
        </motion.div>

        {/* Pricing Cards - Centered Grid Layout */}
        <div ref={ref} className="flex justify-center">
          <div className="grid md:grid-cols-3 gap-8 max-w-7xl">
            {plans.map((plan, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                className={`relative ${plan.badge ? 'neon-border' : 'card-dark'} p-10 rounded-3xl card-hover flex flex-col`}
              >
                {plan.badge && (
                  <div className="absolute -top-3 left-8 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 flex items-center space-x-1">
                      <Star className="w-3 h-3" />
                      <span>{plan.badge}</span>
                    </span>
                  </div>
                )}

                {/* Icon and Price */}
                <div className="text-center mb-8">
                  <div className={`w-24 h-24 bg-gradient-to-br ${plan.gradient} rounded-2xl flex items-center justify-center mb-6 shadow-2xl mx-auto`}>
                    <plan.icon className="w-12 h-12 text-white" />
                  </div>
                  <div className="mb-3">
                    <div className="text-sm text-gray-400 mb-2">À partir de</div>
                    <div className="flex items-baseline justify-center">
                      <span className="text-5xl font-black gradient-text">{plan.price}€</span>
                      <span className="text-gray-400 ml-2 text-base">{plan.period}</span>
                    </div>
                  </div>
                </div>

                {/* Title and Description */}
                <div className="text-center mb-8 flex-grow">
                  <h3 className="text-2xl font-bold text-white mb-3">{plan.name}</h3>
                  <p className="text-gray-400 text-base mb-8">{plan.subtitle}</p>
                  
                  {/* Features */}
                  <ul className="space-y-4 text-left">
                    {plan.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center space-x-3 text-gray-300">
                        <CheckCircle className="w-5 h-5 text-security-accent flex-shrink-0" />
                        <span className="text-base">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                {/* CTA Button */}
                <motion.a
                  href="#contact"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  className={`w-full py-4 px-6 rounded-xl font-bold text-center transition-all duration-300 flex items-center justify-center space-x-2 ${
                    plan.badge
                      ? 'bg-gradient-to-r from-security-accent to-green-500 text-black shadow-lg shadow-security-accent/50 hover:shadow-xl'
                      : 'bg-security-card border-2 border-security-border text-white hover:border-security-accent'
                  }`}
                >
                  <span>{plan.cta}</span>
                  <ArrowRight className="w-5 h-5" />
                </motion.a>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}