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, Clock, Users, Award, BookOpen } from 'lucide-react'
import { Header, Footer } from "@/components/layout"
import FormationCard from "@/components/ui/FormationCard"
import { FORMATIONS } from "@/lib/constants"

export default function FormationPage() {
  return (
    <div className="min-h-screen bg-gray-900 text-gray-100">
      <Header 
        variant="dark" 
        showAuth={false} 
        showBackButton={true} 
        backHref="/" 
        backText="Retour à l'accueil" 
      />

      {/* 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">
          <FormationCard
            icon={Shield}
            title={FORMATIONS.cybersecurity.title}
            description={FORMATIONS.cybersecurity.description}
            program={FORMATIONS.cybersecurity.program}
            specialization={FORMATIONS.cybersecurity.specialization}
            duration={FORMATIONS.cybersecurity.duration}
            maxParticipants={FORMATIONS.cybersecurity.maxParticipants}
            color={FORMATIONS.cybersecurity.color}
          />

          <FormationCard
            icon={Monitor}
            title={FORMATIONS.digitalHygiene.title}
            description={FORMATIONS.digitalHygiene.description}
            program={FORMATIONS.digitalHygiene.program}
            specialization={FORMATIONS.digitalHygiene.specialization}
            duration={FORMATIONS.digitalHygiene.duration}
            maxParticipants={FORMATIONS.digitalHygiene.maxParticipants}
            color={FORMATIONS.digitalHygiene.color}
          />

          <FormationCard
            icon={Code}
            title={FORMATIONS.sovereignDevelopment.title}
            description={FORMATIONS.sovereignDevelopment.description}
            program={FORMATIONS.sovereignDevelopment.program}
            specialization={FORMATIONS.sovereignDevelopment.specialization}
            duration={FORMATIONS.sovereignDevelopment.duration}
            maxParticipants={FORMATIONS.sovereignDevelopment.maxParticipants}
            color={FORMATIONS.sovereignDevelopment.color}
          />
        </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 variant="dark" showNavigation={false} />
    </div>
  )
}