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-gray-900 text-gray-100">
      {/* Header */}
      <header className="border-b border-gray-700 bg-gray-800/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-400" />
            <span className="text-2xl font-bold text-gray-100">DocV</span>
            <Badge variant="secondary" className="ml-2 bg-gray-700 text-gray-200">By 4NK</Badge>
          </Link>
          <Link href="/" className="flex items-center text-blue-400 hover:text-blue-500">
            <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-100 mb-6">
            Formations <span className="text-blue-400">Souveraineté Numérique</span>
          </h1>
          <p className="text-xl text-gray-300 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-800 border-green-600 text-green-200">
              <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-800 border-blue-600 text-blue-200">
              <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-800 border-purple-600 text-purple-200">
              <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 border-gray-600 text-gray-200">
              <BookOpen className="h-4 w-4 mr-2" />
              Formations certifiantes
            </Badge>
            <Badge variant="outline" className="text-lg px-4 py-2 border-gray-600 text-gray-200">
              <Users className="h-4 w-4 mr-2" />
              Formateurs experts
            </Badge>
            <Badge variant="outline" className="text-lg px-4 py-2 border-gray-600 text-gray-200">
              <BookOpen className="h-4 w-4 mr-2" />
              Pratique intensive
            </Badge>
          </div>
        </div>
      </section>

      {/* Formations Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto grid lg:grid-cols-3 gap-8">
          {/* Cybersécurité */}
          <Card className="border-2 border-gray-700 hover:border-red-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
            <CardHeader className="text-center">
              <Shield className="h-16 w-16 text-red-400 mx-auto mb-4" />
              <CardTitle className="text-2xl text-red-300">Cybersécurité</CardTitle>
              <CardDescription className="text-lg text-gray-300">
                Maîtrisez les fondamentaux de la sécurité informatique
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6 text-gray-300">
              <div>
                <h4 className="font-semibold mb-3">Programme de formation :</h4>
                <ul className="space-y-2">
                  <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-900 p-4 rounded-lg">
                <h5 className="font-semibold text-red-200 mb-2">Spécialisation DocV :</h5>
                <ul className="text-sm text-red-300 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-400">
                <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 text-white">
                  S'inscrire à la formation
                </Button>
              </Link>
            </CardContent>
          </Card>

          {/* Hygiène Numérique */}
          <Card className="border-2 border-gray-700 hover:border-green-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
            <CardHeader className="text-center">
              <Monitor className="h-16 w-16 text-green-400 mx-auto mb-4" />
              <CardTitle className="text-2xl text-green-300">Hygiène Numérique</CardTitle>
              <CardDescription className="text-lg text-gray-300">
                Adoptez les bonnes pratiques pour un environnement numérique sain
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6 text-gray-300">
              <div>
                <h4 className="font-semibold mb-3">Programme de formation :</h4>
                <ul className="space-y-2">
                  <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-900 p-4 rounded-lg">
                <h5 className="font-semibold text-green-200 mb-2">Approche DocV :</h5>
                <ul className="text-sm text-green-300 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-400">
                <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 text-white">
                  S'inscrire à la formation
                </Button>
              </Link>
            </CardContent>
          </Card>

          {/* Développement Souverain */}
          <Card className="border-2 border-gray-700 hover:border-blue-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
            <CardHeader className="text-center">
              <Code className="h-16 w-16 text-blue-400 mx-auto mb-4" />
              <CardTitle className="text-2xl text-blue-300">Développement Souverain</CardTitle>
              <CardDescription className="text-lg text-gray-300">
                Créez des applications indépendantes et sécurisées
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6 text-gray-300">
              <div>
                <h4 className="font-semibold mb-3">Programme de formation :</h4>
                <ul className="space-y-2">
                  <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-900 p-4 rounded-lg">
                <h5 className="font-semibold text-blue-200 mb-2">Technologies DocV :</h5>
                <ul className="text-sm text-blue-300 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-400">
                <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 text-white">
                  S'inscrire à la formation
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Parcours Complet Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl font-bold mb-8 text-gray-100">Parcours Complet de Souveraineté Numérique</h2>
          <Card className="border-2 border-blue-700 bg-gray-800 p-6">
            <CardHeader>
              <CardTitle className="text-3xl text-blue-300">Formation Intégrée 4NK</CardTitle>
              <CardDescription className="text-xl text-gray-300">
                Maîtrisez l'écosystème complet de la souveraineté numérique
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6 text-gray-300">
              <div className="grid md:grid-cols-3 gap-6">
                <div className="text-center">
                  <Shield className="h-12 w-12 text-red-400 mx-auto mb-2" />
                  <h4 className="font-semibold">Cybersécurité</h4>
                  <p className="text-sm text-gray-400">Fondamentaux sécuritaires</p>
                </div>
                <div className="text-center">
                  <Monitor className="h-12 w-12 text-green-400 mx-auto mb-2" />
                  <h4 className="font-semibold">Hygiène Numérique</h4>
                  <p className="text-sm text-gray-400">Bonnes pratiques</p>
                </div>
                <div className="text-center">
                  <Code className="h-12 w-12 text-blue-400 mx-auto mb-2" />
                  <h4 className="font-semibold">Développement</h4>
                  <p className="text-sm text-gray-400">Applications souveraines</p>
                </div>
              </div>
              <div className="bg-gray-700 p-6 rounded-lg border border-gray-600">
                <div className="text-center mb-4">
                  <h4 className="font-semibold text-lg mb-2">🏆 4NK - Centre de formation agréé</h4>
                  <p className="text-gray-300 mb-3">
                    Seul établissement en France à disposer du titre RNCP de niveau 6 :
                    <span className="font-semibold text-blue-300"> "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 border-gray-400 text-gray-300">
                    Demander un devis
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl font-bold mb-8 text-gray-100">Besoin d'informations ?</h2>
          <p className="text-xl text-gray-300 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 text-gray-300">
            <p className="text-lg">
              <strong>Contact formations :</strong>{" "}
              <a href="mailto:contact@docv.fr" className="text-blue-400 hover:text-blue-500">
                contact@docv.fr
              </a>
            </p>
            <p>
              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-gray-300 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 text-gray-100">DocV</span>
            <Badge variant="secondary" className="bg-gray-700 text-gray-200">By 4NK</Badge>
          </div>
          <p className="text-gray-400">
            4NK, pionnier du Web 5.0 - Solutions de souveraineté numérique
          </p>
        </div>
      </footer>
    </div>
  )
}
