'use client'

import { motion } from 'framer-motion'
import { useInView } from 'framer-motion'
import { useRef } from 'react'
import { Clock, Database, Key, Shield, Bug, FileText } from 'lucide-react'

const timelineItems = [
  {
    time: '24/7',
    title: 'Surveillance Continue',
    status: 'Actif',
    description: 'Surveillance 24/7 avec détection automatique des menaces',
    metrics: ['99.9% Uptime', '0 Incidents'],
    icon: Clock,
    gradient: 'from-security-accent to-green-500',
  },
  {
    time: 'T+2min',
    title: 'Sauvegarde Automatique',
    status: 'À jour',
    description: 'Sauvegarde incrémentielle toutes les 2 minutes',
    metrics: ['100% Intégrité', '3x Redondance'],
    icon: Database,
    gradient: 'from-blue-500 to-cyan-500',
  },
  {
    time: 'T+5min',
    title: 'Rotation des Clés',
    status: 'Renouvelé',
    description: 'Rotation automatique des clés de chiffrement',
    metrics: ['AES-256', '4096 Bits RSA'],
    icon: Key,
    gradient: 'from-purple-500 to-pink-500',
  },
  {
    time: 'T+10min',
    title: 'Audit de Sécurité',
    status: 'Validé',
    description: 'Vérification automatique des permissions',
    metrics: ['100% Conformité', '0 Anomalies'],
    icon: Shield,
    gradient: 'from-yellow-500 to-orange-500',
  },
  {
    time: 'T+15min',
    title: 'Test de Pénétration',
    status: 'Réussi',
    description: 'Test automatique des vulnérabilités',
    metrics: ['0 Vulnérabilités', '100% Protection'],
    icon: Bug,
    gradient: 'from-red-500 to-pink-500',
  },
  {
    time: 'T+30min',
    title: 'Rapport de Sécurité',
    status: 'Généré',
    description: 'Rapport détaillé des activités de sécurité',
    metrics: ['ISO 27001', 'RGPD Conformité'],
    icon: FileText,
    gradient: 'from-teal-500 to-cyan-500',
  },
]

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

  return (
    <section className="section-padding bg-security-darker relative overflow-hidden">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Centered Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-5xl md:text-6xl font-black mb-4 text-white">
            Timeline de <span className="gradient-text">Sécurité</span>
          </h2>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            Protection continue de votre infrastructure
          </p>
        </motion.div>

        {/* Horizontal Timeline - Cards in a Row */}
        <div ref={ref} className="relative">
          <div className="grid md:grid-cols-3 lg:grid-cols-6 gap-4">
            {timelineItems.map((item, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="card-dark p-6 rounded-2xl card-hover relative"
              >
                {/* Time Badge */}
                <div className={`w-12 h-12 bg-gradient-to-br ${item.gradient} rounded-xl flex items-center justify-center mb-4 shadow-lg`}>
                  <item.icon className="w-6 h-6 text-white" />
                </div>
                
                <div className="text-xs font-bold text-security-accent mb-2">{item.time}</div>
                <h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
                <p className="text-xs text-gray-400 mb-4">{item.description}</p>
                
                <div className="space-y-1">
                  {item.metrics.map((metric, idx) => (
                    <div key={idx} className="text-xs text-gray-500">
                      • {metric}
                    </div>
                  ))}
                </div>

                {/* Status Badge */}
                <div className="absolute top-4 right-4">
                  <span className="px-2 py-1 bg-security-accent/20 text-security-accent text-xs font-semibold rounded-full">
                    {item.status}
                  </span>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}