import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Shield, Monitor, Code, ArrowLeft, Clock, Users, Award, BookOpen } from 'lucide-react'

export default function FormationPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <Link href="/" className="flex items-center space-x-2">
            <Shield className="h-8 w-8 text-blue-600" />
            <span className="text-2xl font-bold text-gray-900">DocV</span>
            <Badge variant="secondary" className="ml-2">By 4NK</Badge>
          </Link>
          <Link href="/" className="flex items-center text-blue-600 hover:text-blue-700">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Retour à l'accueil
          </Link>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto text-center">
          <h1 className="text-5xl font-bold text-gray-900 mb-6">
            Formations <span className="text-blue-600">Souveraineté Numérique</span>
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            Développez vos compétences en cybersécurité, hygiène numérique et développement d'applications souveraines 
            avec nos formations expertes dispensées par 4NK.
          </p>
          <div className="flex flex-wrap justify-center gap-4 mb-6">
            <Badge variant="outline" className="text-lg px-4 py-2 bg-green-50 border-green-200 text-green-700">
              <Award className="h-4 w-4 mr-2" />
              Centre de formation agréé
            </Badge>
            <Badge variant="outline" className="text-lg px-4 py-2 bg-blue-50 border-blue-200 text-blue-700">
              <Award className="h-4 w-4 mr-2" />
              Titre RNCP Niveau 6 "Développeur Blockchain"
            </Badge>
            <Badge variant="outline" className="text-lg px-4 py-2 bg-purple-50 border-purple-200 text-purple-700">
              <Award className="h-4 w-4 mr-2" />
              Seul établissement en France
            </Badge>
          </div>
          <div className="flex flex-wrap justify-center gap-4">
            <Badge variant="outline" className="text-lg px-4 py-2">
              <BookOpen className="h-4 w-4 mr-2" />
              Formations certifiantes
            </Badge>
            <Badge variant="outline" className="text-lg px-4 py-2">
              <Users className="h-4 w-4 mr-2" />
              Formateurs experts
            </Badge>
            <Badge variant="outline" className="text-lg px-4 py-2">
              <BookOpen className="h-4 w-4 mr-2" />
              Pratique intensive
            </Badge>
          </div>
        </div>
      </section>

      {/* Formations */}
      <section className="py-16 px-4">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-3 gap-8">
            
            {/* Cybersécurité */}
            <Card className="border-2 hover:border-red-200 transition-all duration-300 hover:shadow-xl">
              <CardHeader className="text-center">
                <Shield className="h-16 w-16 text-red-600 mx-auto mb-4" />
                <CardTitle className="text-2xl text-red-700">Cybersécurité</CardTitle>
                <CardDescription className="text-lg">
                  Maîtrisez les fondamentaux de la sécurité informatique
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <h4 className="font-semibold mb-3">Programme de formation :</h4>
                  <ul className="space-y-2 text-gray-600">
                    <li>• Analyse des menaces et vulnérabilités</li>
                    <li>• Cryptographie appliquée et PKI</li>
                    <li>• Sécurisation des infrastructures</li>
                    <li>• Gestion des incidents de sécurité</li>
                    <li>• Audit et conformité (ISO 27001, RGPD)</li>
                    <li>• Tests d'intrusion et pentest</li>
                  </ul>
                </div>
                
                <div className="bg-red-50 p-4 rounded-lg">
                  <h5 className="font-semibold text-red-800 mb-2">Spécialisation DocV :</h5>
                  <ul className="text-sm text-red-700 space-y-1">
                    <li>• Authentification sans mot de passe</li>
                    <li>• Chiffrement de bout en bout</li>
                    <li>• Blockchain et preuves cryptographiques</li>
                    <li>• Architecture zero-trust</li>
                  </ul>
                </div>

                <div className="flex items-center justify-between text-sm text-gray-500">
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 mr-1" />
                    5 jours
                  </div>
                  <div className="flex items-center">
                    <Users className="h-4 w-4 mr-1" />
                    Max 12 pers.
                  </div>
                </div>

                <Link href="/formation/devis">
                  <Button className="w-full bg-red-600 hover:bg-red-700">
                    S'inscrire à la formation
                  </Button>
                </Link>
              </CardContent>
            </Card>

            {/* Hygiène Numérique */}
            <Card className="border-2 hover:border-green-200 transition-all duration-300 hover:shadow-xl">
              <CardHeader className="text-center">
                <Monitor className="h-16 w-16 text-green-600 mx-auto mb-4" />
                <CardTitle className="text-2xl text-green-700">Hygiène Numérique</CardTitle>
                <CardDescription className="text-lg">
                  Adoptez les bonnes pratiques pour un environnement numérique sain
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <h4 className="font-semibold mb-3">Programme de formation :</h4>
                  <ul className="space-y-2 text-gray-600">
                    <li>• Gestion sécurisée des mots de passe</li>
                    <li>• Protection de la vie privée en ligne</li>
                    <li>• Sécurisation des communications</li>
                    <li>• Sauvegarde et archivage sécurisé</li>
                    <li>• Sensibilisation aux risques numériques</li>
                    <li>• RGPD et protection des données</li>
                  </ul>
                </div>
                
                <div className="bg-green-50 p-4 rounded-lg">
                  <h5 className="font-semibold text-green-800 mb-2">Approche DocV :</h5>
                  <ul className="text-sm text-green-700 space-y-1">
                    <li>• Identité numérique souveraine</li>
                    <li>• Gestion documentaire sécurisée</li>
                    <li>• Réduction de l'empreinte numérique</li>
                    <li>• Autonomie technologique</li>
                  </ul>
                </div>

                <div className="flex items-center justify-between text-sm text-gray-500">
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 mr-1" />
                    3 jours
                  </div>
                  <div className="flex items-center">
                    <Users className="h-4 w-4 mr-1" />
                    Max 15 pers.
                  </div>
                </div>

                <Link href="/formation/devis">
                  <Button className="w-full bg-green-600 hover:bg-green-700">
                    S'inscrire à la formation
                  </Button>
                </Link>
              </CardContent>
            </Card>

            {/* Développement d'Applications Souveraines */}
            <Card className="border-2 hover:border-blue-200 transition-all duration-300 hover:shadow-xl">
              <CardHeader className="text-center">
                <Code className="h-16 w-16 text-blue-600 mx-auto mb-4" />
                <CardTitle className="text-2xl text-blue-700">Développement Souverain</CardTitle>
                <CardDescription className="text-lg">
                  Créez des applications indépendantes et sécurisées
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <h4 className="font-semibold mb-3">Programme de formation :</h4>
                  <ul className="space-y-2 text-gray-600">
                    <li>• Architecture décentralisée</li>
                    <li>• Développement sans dépendances cloud</li>
                    <li>• Intégration blockchain et cryptographie</li>
                    <li>• APIs souveraines et sécurisées</li>
                    <li>• Déploiement on-premise</li>
                    <li>• Maintenance et évolutivité</li>
                  </ul>
                </div>
                
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h5 className="font-semibold text-blue-800 mb-2">Technologies DocV :</h5>
                  <ul className="text-sm text-blue-700 space-y-1">
                    <li>• Stack technologique souveraine</li>
                    <li>• Intégration IA locale</li>
                    <li>• Gestion d'identité décentralisée</li>
                    <li>• Protocoles de communication sécurisés</li>
                  </ul>
                </div>

                <div className="flex items-center justify-between text-sm text-gray-500">
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 mr-1" />
                    7 jours
                  </div>
                  <div className="flex items-center">
                    <Users className="h-4 w-4 mr-1" />
                    Max 8 pers.
                  </div>
                </div>

                <Link href="/formation/devis">
                  <Button className="w-full bg-blue-600 hover:bg-blue-700">
                    S'inscrire à la formation
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Formation Package */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-4xl font-bold mb-8 text-gray-900">Parcours Complet de Souveraineté Numérique</h2>
            
            <Card className="border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50">
              <CardHeader>
                <CardTitle className="text-3xl text-blue-700">Formation Intégrée 4NK</CardTitle>
                <CardDescription className="text-xl">
                  Maîtrisez l'écosystème complet de la souveraineté numérique
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid md:grid-cols-3 gap-6">
                  <div className="text-center">
                    <Shield className="h-12 w-12 text-red-600 mx-auto mb-2" />
                    <h4 className="font-semibold">Cybersécurité</h4>
                    <p className="text-sm text-gray-600">Fondamentaux sécuritaires</p>
                  </div>
                  <div className="text-center">
                    <Monitor className="h-12 w-12 text-green-600 mx-auto mb-2" />
                    <h4 className="font-semibold">Hygiène Numérique</h4>
                    <p className="text-sm text-gray-600">Bonnes pratiques</p>
                  </div>
                  <div className="text-center">
                    <Code className="h-12 w-12 text-blue-600 mx-auto mb-2" />
                    <h4 className="font-semibold">Développement</h4>
                    <p className="text-sm text-gray-600">Applications souveraines</p>
                  </div>
                </div>

                <div className="bg-gradient-to-r from-green-50 to-blue-50 p-6 rounded-lg border border-green-200">
                  <div className="text-center mb-4">
                    <h4 className="font-semibold text-lg mb-2">🏆 4NK - Centre de formation agréé</h4>
                    <p className="text-gray-700 mb-3">
                      Seul établissement en France à disposer du titre RNCP de niveau 6 : 
                      <span className="font-semibold text-blue-700"> "Développeur Blockchain"</span>
                    </p>
                    <div className="flex justify-center gap-2">
                      <Badge className="bg-green-600 text-white">Agréé centre de formation</Badge>
                      <Badge className="bg-blue-600 text-white">RNCP Niveau 6</Badge>
                    </div>
                  </div>
                </div>

                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Link href="/formation/devis">
                    <Button size="lg" className="text-lg px-8">
                      Parcours Complet (15 jours)
                    </Button>
                  </Link>
                  <Link href="/formation/devis">
                    <Button variant="outline" size="lg" className="text-lg px-8">
                      Demander un devis
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl font-bold mb-8 text-gray-900">Besoin d'informations ?</h2>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Nos experts sont à votre disposition pour vous conseiller sur le parcours de formation 
            le plus adapté à vos besoins.
          </p>
          <div className="space-y-4">
            <p className="text-lg">
              <strong>Contact formations :</strong>{" "}
              <a href="mailto:contact@docv.fr" className="text-blue-600 hover:text-blue-700">
                contact@docv.fr
              </a>
            </p>
            <p className="text-gray-600">
              Formations disponibles en présentiel, distanciel ou format hybride
            </p>
            <div className="pt-4">
              <Link href="/formation/devis">
                <Button size="lg" className="text-lg px-8">
                  Demander un devis personnalisé
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8 px-4">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <Shield className="h-6 w-6 text-blue-400" />
            <span className="text-xl font-bold">DocV</span>
            <Badge variant="secondary">By 4NK</Badge>
          </div>
          <p className="text-gray-400">
            4NK, pionnier du Web 5.0 - Solutions de souveraineté numérique
          </p>
        </div>
      </footer>
    </div>
  )
}