'use client';

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import {
  Shield,
  Lock,
  Server,
  Eye,
  AlertTriangle,
  CheckCircle,
  Key,
  FileCheck,
  Mail,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';

export default function SecurityPage() {
  const heroRef = useRef(null);
  const contentRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isContentInView = useInView(contentRef, { once: true });

  const securityFeatures = [
    {
      icon: Lock,
      title: 'Chiffrement de bout en bout',
      description:
        'Toutes les communications sont chiffrées avec TLS 1.3. Vos données sensibles sont chiffrées au repos avec AES-256.',
    },
    {
      icon: Key,
      title: 'Authentification sécurisée',
      description:
        'Authentification à deux facteurs (2FA) disponible. Mots de passe hashés avec Argon2id, le standard le plus robuste.',
    },
    {
      icon: Server,
      title: 'Infrastructure certifiée',
      description:
        'Hébergement sur AWS avec certifications ISO 27001, SOC 2 Type II et conformité RGPD.',
    },
    {
      icon: Eye,
      title: 'Surveillance 24/7',
      description:
        'Monitoring continu de notre infrastructure. Détection et réponse aux incidents en temps réel.',
    },
    {
      icon: FileCheck,
      title: 'Audits réguliers',
      description:
        'Tests de pénétration annuels par des experts indépendants. Programme de bug bounty actif.',
    },
    {
      icon: AlertTriangle,
      title: 'Plan de continuité',
      description:
        'Sauvegardes automatiques quotidiennes. Plan de reprise d\'activité testé régulièrement.',
    },
  ];

  const certifications = [
    { name: 'ISO 27001', description: 'Système de management de la sécurité de l\'information' },
    { name: 'SOC 2 Type II', description: 'Contrôles de sécurité, disponibilité et confidentialité' },
    { name: 'RGPD', description: 'Conformité au Règlement Général sur la Protection des Données' },
    { name: 'PCI DSS', description: 'Norme de sécurité des données de paiement' },
  ];

  const practices = [
    {
      title: 'Développement sécurisé',
      items: [
        'Revue de code systématique',
        'Analyse statique du code (SAST)',
        'Tests de sécurité automatisés',
        'Gestion des dépendances',
      ],
    },
    {
      title: 'Protection des données',
      items: [
        'Minimisation des données collectées',
        'Pseudonymisation des données',
        'Contrôle d\'accès granulaire',
        'Journalisation des accès',
      ],
    },
    {
      title: 'Réponse aux incidents',
      items: [
        'Équipe de sécurité dédiée',
        'Procédures de notification',
        'Analyse post-incident',
        'Amélioration continue',
      ],
    },
  ];

  const containerVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <div className="min-h-screen bg-white">
      <LandingHeader />

      {/* Hero Section */}
      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
            >
              <Shield className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">Sécurité maximale</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              Votre sécurité,
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                Notre priorité
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
              Chez Xpeditis, nous mettons en œuvre les meilleures pratiques de sécurité
              pour protéger vos données et garantir la continuité de vos opérations.
            </p>
          </motion.div>
        </div>

        {/* Wave */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
            <path
              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
              fill="white"
            />
          </svg>
        </div>
      </section>

      {/* Security Features */}
      <section ref={contentRef} className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
              Mesures de sécurité
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Une infrastructure robuste pour protéger vos données
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isContentInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {securityFeatures.map((feature, index) => {
              const IconComponent = feature.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  whileHover={{ y: -5 }}
                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
                >
                  <div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
                    <IconComponent className="w-7 h-7 text-brand-turquoise" />
                  </div>
                  <h3 className="text-xl font-bold text-brand-navy mb-3">{feature.title}</h3>
                  <p className="text-gray-600">{feature.description}</p>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>

      {/* Certifications */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
              Certifications & Conformité
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Nos engagements validés par des organismes indépendants
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {certifications.map((cert, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 text-center"
              >
                <div className="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <CheckCircle className="w-8 h-8 text-brand-green" />
                </div>
                <h3 className="text-xl font-bold text-brand-navy mb-2">{cert.name}</h3>
                <p className="text-gray-600 text-sm">{cert.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Security Practices */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
              Nos pratiques de sécurité
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Une approche proactive de la sécurité à chaque étape
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {practices.map((practice, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-8 rounded-2xl"
              >
                <h3 className="text-xl font-bold text-white mb-6">{practice.title}</h3>
                <ul className="space-y-4">
                  {practice.items.map((item, i) => (
                    <li key={i} className="flex items-center space-x-3 text-white/80">
                      <CheckCircle className="w-5 h-5 text-brand-turquoise flex-shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Report Vulnerability */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
          >
            <AlertTriangle className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
            <h3 className="text-2xl font-bold text-white mb-4">
              Signaler une vulnérabilité
            </h3>
            <p className="text-white/80 mb-6 max-w-2xl mx-auto">
              Vous avez découvert une faille de sécurité ? Nous prenons très au sérieux
              la sécurité de notre plateforme. Contactez notre équipe de sécurité pour
              un signalement responsable.
            </p>
            <a
              href="mailto:security@xpeditis.com"
              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
            >
              <Mail className="w-5 h-5" />
              <span>security@xpeditis.com</span>
            </a>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}