import Link from "next/link";
import { Button } from "@/components/ui/button";
import { 
  Users, 
  FolderKanban, 
  Tags,
  ArrowRight
} from "lucide-react";

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <div className="flex items-center gap-2">
            <span className="text-xl font-bold">Groupes</span>
          </div>
          <nav className="hidden gap-6 md:flex">
            <Link href="/auth/login" className="text-sm font-medium hover:underline">
              Connexion
            </Link>
          </nav>
          <div className="flex md:hidden">
            <Button asChild>
              <Link href="/auth/login">Connexion</Link>
            </Button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center gap-6 text-center">
            <div className="flex flex-col gap-4">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Application de Création de Groupes
              </h1>
              <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
                Une application web moderne dédiée à la création et à la gestion de groupes, permettant aux utilisateurs de créer des groupes selon différents critères.
              </p>
            </div>
            <div className="flex w-full justify-center">
              <Button asChild size="lg" className="w-full max-w-sm sm:w-auto">
                <Link href="/auth/login" className="flex items-center justify-center">
                  Commencer <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="w-full bg-muted py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="mx-auto grid max-w-5xl items-center gap-8 py-12 sm:grid-cols-2 lg:grid-cols-3">
            <div className="flex flex-col justify-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                <FolderKanban className="h-6 w-6" />
              </div>
              <div className="flex flex-col gap-2">
                <h3 className="text-xl font-bold">Gestion de Projets</h3>
                <p className="text-muted-foreground">
                  Créez et gérez des projets de groupe avec une liste de personnes et des critères personnalisés.
                </p>
              </div>
            </div>
            <div className="flex flex-col justify-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                <Users className="h-6 w-6" />
              </div>
              <div className="flex flex-col gap-2">
                <h3 className="text-xl font-bold">Création de Groupes</h3>
                <p className="text-muted-foreground">
                  Utilisez notre assistant pour créer automatiquement des groupes équilibrés ou créez-les manuellement.
                </p>
              </div>
            </div>
            <div className="flex flex-col justify-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                <Tags className="h-6 w-6" />
              </div>
              <div className="flex flex-col gap-2">
                <h3 className="text-xl font-bold">Gestion des Tags</h3>
                <p className="text-muted-foreground">
                  Attribuez des tags aux personnes pour faciliter la création de groupes équilibrés.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t py-6 md:py-8">
        <div className="container flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-4 px-4 md:px-6">
          <p className="text-center sm:text-left text-sm text-muted-foreground">
            © 2025 Application de Création de Groupes. Tous droits réservés.
          </p>
          <div className="flex items-center gap-4">
            <Link href="/terms" className="text-sm text-muted-foreground hover:underline">
              Conditions d'utilisation
            </Link>
            <Link href="/privacy" className="text-sm text-muted-foreground hover:underline">
              Confidentialité
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}