'use client'

import { motion } from 'framer-motion'
import { Calendar, User, Clock, Share2, ArrowLeft, Tag, Shield } from 'lucide-react'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'

const CybersecurityArticle = () => {
  const article = {
    title: "Cybersécurité en Afrique de l'Ouest : Comment protéger votre entreprise",
    excerpt: "Les meilleures pratiques de sécurité informatique adaptées aux PME sénégalaises et ouest-africaines.",
    date: "10 mars 2026",
    author: "fsociety",
    readTime: "8 min",
    category: "Cybersécurité",
    tags: ["Cybersécurité", "PME", "Afrique de l'Ouest", "Protection"]
  }

  return (
    <div className="min-h-screen">
      <Navbar />
      
      <article className="pt-24 pb-16">
        {/* Breadcrumb */}
        <div className="px-4 sm:px-6 lg:px-8 mb-8">
          <div className="max-w-4xl mx-auto">
            <Link href="/blog" className="flex items-center text-primary-400 hover:text-primary-300 transition-colors">
              <ArrowLeft size={16} className="mr-2" />
              Retour au blog
            </Link>
          </div>
        </div>

        {/* Article Header */}
        <header className="px-4 sm:px-6 lg:px-8 mb-12">
          <div className="max-w-4xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center"
            >
              <div className="mb-4">
                <span className="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center justify-center w-fit mx-auto">
                  <Shield size={14} className="mr-1" />
                  {article.category}
                </span>
              </div>
              
              <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
                {article.title}
              </h1>
              
              <p className="text-xl text-white/80 mb-8 max-w-3xl mx-auto">
                {article.excerpt}
              </p>
              
              <div className="flex items-center justify-center space-x-6 text-white/60">
                <div className="flex items-center space-x-2">
                  <User size={16} />
                  <span>{article.author}</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Calendar size={16} />
                  <span>{article.date}</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Clock size={16} />
                  <span>{article.readTime}</span>
                </div>
              </div>
            </motion.div>
          </div>
        </header>

        {/* Article Content */}
        <div className="px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="prose prose-lg prose-invert max-w-none"
            >
              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 mb-8">
                <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-6 mb-8">
                  <h3 className="text-red-400 font-semibold mb-3 flex items-center">
                    <Shield size={20} className="mr-2" />
                    Alerte sécurité : Les cybermenaces en augmentation
                  </h3>
                  <p className="text-white/90">
                    Les attaques cybernétiques contre les PME africaines ont augmenté de <strong>+40%</strong> en 2025. 
                    Il est crucial de renforcer la sécurité informatique de votre entreprise.
                  </p>
                </div>

                <h2 className="text-2xl font-bold text-white mb-6">État des lieux de la cybersécurité en Afrique de l'Ouest</h2>
                
                <p className="text-white/90 mb-6">
                  L'Afrique de l'Ouest fait face à une recrudescence d'attaques cybernétiques ciblant principalement 
                  les PME moins préparées. Au Sénégal, plus de 60% des entreprises ont subi au moins une tentative 
                  d'attaque en 2025.
                </p>

                <h3 className="text-xl font-semibold text-white mb-4">Principales menaces identifiées</h3>
                
                <div className="grid md:grid-cols-2 gap-6 mb-8">
                  <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-6">
                    <h4 className="font-semibold text-red-400 mb-3">1. Ransomware</h4>
                    <ul className="text-white/90 text-sm space-y-1">
                      <li>• Chiffrement des données critiques</li>
                      <li>• Demandes de rançon en cryptomonnaies</li>
                      <li>• Impact moyen : 15 jours d'arrêt</li>
                    </ul>
                  </div>

                  <div className="bg-orange-500/10 border border-orange-500/20 rounded-lg p-6">
                    <h4 className="font-semibold text-orange-400 mb-3">2. Phishing</h4>
                    <ul className="text-white/90 text-sm space-y-1">
                      <li>• Emails frauduleux ciblés</li>
                      <li>• Vol d'identifiants bancaires</li>
                      <li>• 85% des attaques réussies</li>
                    </ul>
                  </div>

                  <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-6">
                    <h4 className="font-semibold text-yellow-400 mb-3">3. Malware mobile</h4>
                    <ul className="text-white/90 text-sm space-y-1">
                      <li>• Applications malveillantes</li>
                      <li>• Vol de données personnelles</li>
                      <li>• Accès aux comptes bancaires</li>
                    </ul>
                  </div>

                  <div className="bg-purple-500/10 border border-purple-500/20 rounded-lg p-6">
                    <h4 className="font-semibold text-purple-400 mb-3">4. Attaques DDoS</h4>
                    <ul className="text-white/90 text-sm space-y-1">
                      <li>• Surcharge des serveurs</li>
                      <li>• Indisponibilité des services</li>
                      <li>• Perte de revenus directe</li>
                    </ul>
                  </div>
                </div>

                <h3 className="text-xl font-semibold text-white mb-4">Solutions de protection adaptées aux PME africaines</h3>
                
                <div className="bg-primary-500/10 border border-primary-500/20 rounded-lg p-6 mb-6">
                  <h4 className="font-semibold text-primary-400 mb-3">1. Protection de base (Budget : 50 000 - 200 000 FCFA/mois)</h4>
                  <ul className="text-white/90 space-y-2">
                    <li>✓ <strong>Antivirus professionnel</strong> sur tous les postes</li>
                    <li>✓ <strong>Firewall</strong> configuré correctement</li>
                    <li>✓ <strong>Mises à jour automatiques</strong> du système</li>
                    <li>✓ <strong>Sauvegarde quotidienne</strong> des données</li>
                    <li>✓ <strong>Formation du personnel</strong> aux bonnes pratiques</li>
                  </ul>
                </div>

                <div className="bg-primary-500/10 border border-primary-500/20 rounded-lg p-6 mb-6">
                  <h4 className="font-semibold text-primary-400 mb-3">2. Protection avancée (Budget : 200 000 - 500 000 FCFA/mois)</h4>
                  <ul className="text-white/90 space-y-2">
                    <li>✓ <strong>EDR (Endpoint Detection Response)</strong></li>
                    <li>✓ <strong>Authentification à deux facteurs</strong></li>
                    <li>✓ <strong>VPN sécurisé</strong> pour le télétravail</li>
                    <li>✓ <strong>Surveillance 24/7</strong> du réseau</li>
                    <li>✓ <strong>Audit de sécurité</strong> trimestriel</li>
                  </ul>
                </div>

                <div className="bg-primary-500/10 border border-primary-500/20 rounded-lg p-6 mb-6">
                  <h4 className="font-semibold text-primary-400 mb-3">3. Protection enterprise (Budget : 500 000+ FCFA/mois)</h4>
                  <ul className="text-white/90 space-y-2">
                    <li>✓ <strong>SIEM (Security Information Management)</strong></li>
                    <li>✓ <strong>SOC (Security Operations Center)</strong> dédié</li>
                    <li>✓ <strong>Tests de pénétration</strong> réguliers</li>
                    <li>✓ <strong>Chiffrement des données</strong> sensibles</li>
                    <li>✓ <strong>Plan de continuité</strong> d'activité</li>
                  </ul>
                </div>

                <h3 className="text-xl font-semibold text-white mb-4">10 actions immédiates à mettre en place</h3>
                
                <div className="bg-white/5 rounded-lg p-6 mb-6">
                  <ol className="text-white/90 space-y-3">
                    <li><strong>1. Inventaire :</strong> Listez tous vos équipements connectés</li>
                    <li><strong>2. Mots de passe :</strong> Utilisez un gestionnaire de mots de passe</li>
                    <li><strong>3. Sauvegardes :</strong> Testez vos sauvegardes chaque semaine</li>
                    <li><strong>4. Formation :</strong> Sensibilisez vos employés au phishing</li>
                    <li><strong>5. Mises à jour :</strong> Activez les mises à jour automatiques</li>
                    <li><strong>6. Accès :</strong> Limitez les droits d'administration</li>
                    <li><strong>7. WiFi :</strong> Sécurisez votre réseau sans fil</li>
                    <li><strong>8. Mobile :</strong> Configurez un MDM pour les smartphones</li>
                    <li><strong>9. Audit :</strong> Vérifiez vos logs de connexion</li>
                    <li><strong>10. Plan :</strong> Préparez une procédure d'incident</li>
                  </ol>
                </div>

                <h3 className="text-xl font-semibold text-white mb-4">Spécificités de la cybersécurité au Sénégal</h3>
                
                <p className="text-white/90 mb-4">
                  Le contexte sénégalais présente des particularités qu'il faut prendre en compte :
                </p>

                <ul className="text-white/90 mb-6 space-y-2">
                  <li>• <strong>Connectivité variable :</strong> Prévoir des solutions offline</li>
                  <li>• <strong>Budget limité :</strong> Prioriser les protections essentielles</li>
                  <li>• <strong>Français/Wolof :</strong> Former en langues locales</li>
                  <li>• <strong>Mobile-first :</strong> Sécuriser prioritairement les smartphones</li>
                  <li>• <strong>Payment mobile :</strong> Protéger Orange Money/Wave</li>
                </ul>

                <h3 className="text-xl font-semibold text-white mb-4">L'accompagnement fsociety en cybersécurité</h3>
                
                <p className="text-white/90 mb-6">
                  fsociety propose des solutions de cybersécurité adaptées au marché sénégalais avec :
                </p>

                <div className="grid md:grid-cols-2 gap-6 mb-8">
                  <div className="bg-white/5 rounded-lg p-4">
                    <h4 className="font-semibold text-primary-400 mb-2">Audit de sécurité</h4>
                    <p className="text-white/80 text-sm">Évaluation complète de vos vulnérabilités</p>
                  </div>
                  
                  <div className="bg-white/5 rounded-lg p-4">
                    <h4 className="font-semibold text-primary-400 mb-2">Solutions sur mesure</h4>
                    <p className="text-white/80 text-sm">Protection adaptée à votre budget et activité</p>
                  </div>
                  
                  <div className="bg-white/5 rounded-lg p-4">
                    <h4 className="font-semibold text-primary-400 mb-2">Formation équipe</h4>
                    <p className="text-white/80 text-sm">Sensibilisation en français et wolof</p>
                  </div>
                  
                  <div className="bg-white/5 rounded-lg p-4">
                    <h4 className="font-semibold text-primary-400 mb-2">Support 24/7</h4>
                    <p className="text-white/80 text-sm">Assistance technique en cas d'incident</p>
                  </div>
                </div>

                <h3 className="text-xl font-semibold text-white mb-4">Conclusion</h3>
                
                <p className="text-white/90 mb-6">
                  La cybersécurité n'est plus une option pour les entreprises sénégalaises. Face à l'augmentation 
                  des menaces, il est essentiel de mettre en place des protections adaptées à votre contexte et budget. 
                  Une approche progressive et pragmatique permet de sécuriser efficacement votre activité.
                </p>

                <div className="bg-gradient-to-r from-red-500/20 to-orange-500/20 rounded-lg p-6">
                  <p className="text-white/90 font-medium">
                    🔒 <strong>Action immédiate :</strong> Contactez fsociety pour un audit gratuit de votre 
                    infrastructure et recevez un plan de sécurisation personnalisé sous 48h.
                  </p>
                </div>
              </div>

              {/* Tags */}
              <div className="mb-8">
                <h4 className="text-white font-semibold mb-4 flex items-center">
                  <Tag size={16} className="mr-2" />
                  Tags
                </h4>
                <div className="flex flex-wrap gap-2">
                  {article.tags.map((tag) => (
                    <span key={tag} className="bg-white/10 text-white px-3 py-1 rounded-full text-sm">
                      #{tag}
                    </span>
                  ))}
                </div>
              </div>

              {/* CTA Contact */}
              <div className="bg-gradient-to-r from-primary-500/20 to-red-500/20 rounded-lg p-8 text-center mb-8">
                <h4 className="text-xl font-bold text-white mb-4">
                  Besoin d'une évaluation de sécurité ?
                </h4>
                <p className="text-white/90 mb-6">
                  Audit gratuit de votre infrastructure par nos experts en cybersécurité
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <a 
                    href="https://wa.me/221752212146?text=Bonjour%20fsociety%2C%20je%20souhaite%20un%20audit%20de%20s%C3%A9curit%C3%A9%20gratuit%20pour%20mon%20entreprise"
                    className="bg-green-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-600 transition-colors"
                  >
                    WhatsApp : +221 75 221 21 46
                  </a>
                  <a 
                    href="mailto:contact@fsociety.sn?subject=Demande%20audit%20cybersécurité"
                    className="bg-primary-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-primary-600 transition-colors"
                  >
                    Email : contact@fsociety.sn
                  </a>
                </div>
              </div>
            </motion.div>
          </div>
        </div>

        {/* Related Articles */}
        <section className="mt-16 px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <h3 className="text-2xl font-bold text-white mb-8 text-center">Articles similaires</h3>
            
            <div className="grid md:grid-cols-2 gap-6">
              <Link href="/blog/informatique-senegal-enjeux-opportunites-2026" className="card group">
                <h4 className="text-lg font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
                  L'informatique au Sénégal : Enjeux 2026
                </h4>
                <p className="text-white/80 text-sm mb-3">
                  Analyse complète du secteur informatique sénégalais et ses perspectives d'avenir...
                </p>
                <span className="text-primary-400 text-sm">Lire la suite →</span>
              </Link>
              
              <Link href="/blog/cloud-computing-solutions-entreprises-africaines" className="card group">
                <h4 className="text-lg font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
                  Cloud Computing pour entreprises africaines
                </h4>
                <p className="text-white/80 text-sm mb-3">
                  Solutions cloud adaptées au contexte et budget des entreprises africaines...
                </p>
                <span className="text-primary-400 text-sm">Lire la suite →</span>
              </Link>
            </div>
          </div>
        </section>
      </article>

      <Footer />
    </div>
  )
}

export default CybersecurityArticle