import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";

export const metadata: Metadata = {
  title: "Thé Tip Top - Jeu Concours",
  description: "Participez au jeu-concours Thé Tip Top et gagnez des lots exceptionnels !",
};

export default function HomePage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={100}
          height={20}
          priority
        />
        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
        Branche Dev
          </h1>
          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
            Looking  a starting point or more instructions? Head over to{" "}
            <a
              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
              className="font-medium text-zinc-950 dark:text-zinc-50"
            >
              Templates
            </a>{" "}
            or the{" "}
            <a
              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
              className="font-medium text-zinc-950 dark:text-zinc-50"
            >
              Learning
            </a>{" "}
            center.
          </p>
        </div>
      </main>

      {/* Prizes Section */}
      <section className="mb-16 bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
            Lots à gagner
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card className="bg-white">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🌿</div>
                <CardTitle className="text-center">Infuseur à thé</CardTitle>
              </CardHeader>
              <CardContent className="text-center text-gray-600">
                Un infuseur élégant pour préparer votre thé préféré
              </CardContent>
            </Card>

            <Card className="bg-white">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🍵</div>
                <CardTitle className="text-center">Thé signature 100g</CardTitle>
              </CardHeader>
              <CardContent className="text-center text-gray-600">
                Notre thé signature exclusif en sachet de 100g
              </CardContent>
            </Card>

            <Card className="bg-white">
              <CardHeader>
                <div className="text-4xl text-center mb-2">☕</div>
                <CardTitle className="text-center">Thé gratuit</CardTitle>
              </CardHeader>
              <CardContent className="text-center text-gray-600">
                Une boisson offerte lors de votre prochaine visite
              </CardContent>
            </Card>

            <Card className="bg-white">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🎁</div>
                <CardTitle className="text-center">
                  Coffret découverte
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center text-gray-600">
                Un coffret découverte d'une valeur de 39€
              </CardContent>
            </Card>

            <Card className="bg-white">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🏆</div>
                <CardTitle className="text-center">
                  Coffret prestige
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center text-gray-600">
                Notre coffret prestige d'une valeur de 69€
              </CardContent>
            </Card>

            <Card className="bg-white border-2 border-yellow-400">
              <CardHeader>
                <div className="text-4xl text-center mb-2">✨</div>
                <CardTitle className="text-center text-yellow-600">
                  100% gagnant !
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center text-gray-600">
                Chaque ticket est gagnant, tentez votre chance dès maintenant
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="text-center">
        <Card className="max-w-2xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
          <CardContent className="py-12">
            <h2 className="text-3xl font-bold mb-4 text-white">
              Prêt à tenter votre chance ?
            </h2>
            <p className="text-lg mb-8 text-white">
              Inscrivez-vous gratuitement et participez au jeu-concours
            </p>
            <Link href="/register">
              <button className="px-10 py-4 bg-white text-primary-600 font-bold rounded-lg hover:bg-primary-50 transition-colors text-lg shadow-lg border-2 border-white">
                Créer mon compte
              </button>
            </Link>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}