import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, Lock, BarChart3 } from "lucide-react"

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-background to-card">
      <nav className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2 text-xl font-bold text-accent">
            <span>🗳️</span>
            <span>E-Voting</span>
          </div>
          <div className="flex items-center gap-4">
            <Link href="/auth/login">
              <Button variant="ghost">Se Connecter</Button>
            </Link>
            <Link href="/auth/register">
              <Button>S'inscrire</Button>
            </Link>
          </div>
        </div>
      </nav>

      <main className="max-w-6xl mx-auto px-4 py-20 space-y-20">
        {/* Hero Section */}
        <section className="space-y-6 text-center">
          <div className="space-y-4">
            <h1 className="text-5xl md:text-6xl font-bold tracking-tight">
              Votre Voix, Simplifiée et Sécurisée
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Plateforme de vote électronique transparente et sécurisée par cryptographie post-quantique.
              Votez de n'importe où, en toute confiance.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-6">
            <Link href="/auth/login">
              <Button size="lg">Accéder au Tableau de Bord</Button>
            </Link>
            <Link href="/auth/register">
              <Button variant="outline" size="lg">Créer un Compte</Button>
            </Link>
          </div>
        </section>

        {/* Stats Section */}
        <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-3xl">1000+</CardTitle>
              <CardDescription>Votants actifs</CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-3xl">50+</CardTitle>
              <CardDescription>Élections</CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-3xl">99.9%</CardTitle>
              <CardDescription>Sécurité</CardDescription>
            </CardHeader>
          </Card>
        </section>

        {/* Features Section */}
        <section className="space-y-12">
          <h2 className="text-3xl font-bold text-center">Pourquoi Nous Choisir ?</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card>
              <CardHeader>
                <Lock className="w-8 h-8 text-accent mb-4" />
                <CardTitle>Cryptographie Post-Quantique</CardTitle>
                <CardDescription>
                  Sécurisé par les algorithmes les plus avancés, certifiés NIST FIPS 203/204
                </CardDescription>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader>
                <BarChart3 className="w-8 h-8 text-accent mb-4" />
                <CardTitle>Résultats Transparents</CardTitle>
                <CardDescription>
                  Consultez les résultats en temps réel avec traçabilité complète
                </CardDescription>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader>
                <CheckCircle className="w-8 h-8 text-accent mb-4" />
                <CardTitle>Accès Instantané</CardTitle>
                <CardDescription>
                  Votez depuis n'importe quel appareil, n'importe quand
                </CardDescription>
              </CardHeader>
            </Card>
          </div>
        </section>

        {/* CTA Section */}
        <section className="bg-card border border-border rounded-lg p-12 text-center space-y-6">
          <h2 className="text-3xl font-bold">Prêt à Voter ?</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Rejoignez des milliers de citoyens utilisant notre plateforme sécurisée pour voter
          </p>
          <Link href="/auth/register">
            <Button size="lg">Commencer Maintenant</Button>
          </Link>
        </section>
      </main>

      <footer className="border-t border-border bg-card/50 mt-20 py-12">
        <div className="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          <div>
            <h4 className="font-bold mb-4">À propos</h4>
            <p className="text-sm text-muted-foreground">
              Plateforme de vote électronique sécurisée
            </p>
          </div>
          <div>
            <h4 className="font-bold mb-4">Liens Rapides</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li><Link href="/">Accueil</Link></li>
              <li><Link href="/auth/login">Se Connecter</Link></li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold mb-4">Légal</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li><a href="#">Conditions</a></li>
              <li><a href="#">Confidentialité</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold mb-4">Contact</h4>
            <p className="text-sm text-muted-foreground">
              contact@evoting.com
            </p>
          </div>
        </div>
        <div className="border-t border-border pt-8 text-center text-sm text-muted-foreground">
          <p>&copy; 2025 E-Voting. Tous droits réservés.</p>
        </div>
      </footer>
    </div>
  )
}