import Link from "next/link"
import { chapters } from "@/data/chapters"
import { Progress } from "@/components/ui/progress"
import { BookOpen, FileText, Award } from "lucide-react"
import { generateSlug } from "@/utils/slug-utils"

export default function Home() {
  return (
    <div className="min-h-screen bg-orange-50">
      <div className="bg-orange-400 py-16 px-4">
        <div className="container mx-auto">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">Toutes les leçons théoriques</h1>
          <p className="text-xl text-gray-800">Découvrez toutes nos leçons de code théoriques gratuitement !</p>
        </div>
      </div>

      <div className="container mx-auto py-12 px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {chapters.map((chapter) => {
            const chapterTitle = chapter.chapter.split(". ")[1]
            const chapterSlug = generateSlug(chapterTitle)

            return (
              <div
                key={chapter.chapter}
                className={`rounded-lg shadow-lg overflow-hidden ${chapter.color || "bg-gray-100"} transform transition-transform hover:scale-105`}
              >
                <div className="p-6">
                  <h2 className="text-2xl font-bold mb-2">{chapter.chapter}</h2>
                  <p className="text-gray-700 mb-6">{chapter.description}</p>

                  <div className="flex justify-between text-sm mb-2">
                    <span>0 %</span>
                    <span>100 %</span>
                  </div>
                  <Progress value={0} className="h-2 mb-6" />

                  <div className="flex gap-4">
                    <Link
                      href={`/chapitres/${chapterSlug}`}
                      className="bg-gray-800 hover:bg-gray-700 text-white py-2 px-6 rounded-full text-center flex items-center"
                    >
                      <BookOpen className="mr-2 h-4 w-4" />
                      Commencer
                    </Link>
                    <Link
                      href={`/chapitres/${chapterSlug}/exercices`}
                      className="bg-white hover:bg-gray-100 text-gray-800 border border-gray-300 py-2 px-6 rounded-full text-center flex items-center"
                    >
                      <FileText className="mr-2 h-4 w-4" />
                      Exercice
                    </Link>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        <div className="mt-16 bg-red-100 rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105">
          <div className="p-8">
            <div className="flex items-center mb-4">
              <Award className="h-10 w-10 text-red-600 mr-4" />
              <h2 className="text-3xl font-bold">Examen blanc</h2>
            </div>
            <p className="text-gray-700 mb-6 text-lg">
              Testez vos connaissances avec un examen complet de 40 questions. Mettez en pratique tout ce que vous avez
              appris et préparez-vous pour l'examen officiel.
            </p>

            <Link
              href="/examen"
              className="bg-red-600 hover:bg-red-700 text-white py-3 px-8 rounded-full inline-block font-semibold"
            >
              Commencer l'examen
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}