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

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="min-h-screen">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-green-50 via-white to-primary-50 py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <div className="text-6xl mb-6">🍵</div>
            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
              Bienvenue chez <span className="text-primary-600">Thé Tip Top</span>
            </h1>
            <p className="text-xl text-gray-700 mb-8 leading-relaxed">
              Participez à notre grand jeu-concours à l'occasion de notre 10ème anniversaire !
              <br />
              <span className="font-semibold text-primary-600">100% de tickets gagnants</span> - Tentez votre chance dès maintenant
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/register">
                <Button size="lg" className="text-lg px-8 py-4">
                  Participer au jeu
                </Button>
              </Link>
              <Link href="/lots">
                <Button variant="outline" size="lg" className="text-lg px-8 py-4">
                  Découvrir les lots
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* How to Play Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-4xl font-bold text-center text-gray-900 mb-12">
              Comment participer ?
            </h2>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-3xl">1️⃣</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">Inscrivez-vous</h3>
                <p className="text-gray-600">Créez votre compte gratuitement en quelques secondes</p>
              </div>
              <div className="text-center">
                <div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-3xl">2️⃣</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">Entrez votre code</h3>
                <p className="text-gray-600">Saisissez le code figurant sur votre ticket de caisse</p>
              </div>
              <div className="text-center">
                <div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-3xl">3️⃣</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">Gagnez !</h3>
                <p className="text-gray-600">Découvrez immédiatement votre lot et récupérez-le en magasin</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Prizes Section */}
      <section className="py-16 bg-gradient-to-br from-primary-50 to-green-50">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-4xl font-bold text-center text-gray-900 mb-4">
              Lots à gagner
            </h2>
            <p className="text-center text-gray-700 mb-12 text-lg">
              Tous nos lots sont 100% gagnants - Chaque participation est récompensée !
            </p>
            <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>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <Card className="max-w-3xl mx-auto bg-gradient-to-r from-primary-600 to-green-600 text-white border-0 shadow-2xl">
            <CardContent className="py-12 px-8">
              <div className="text-center">
                <div className="text-5xl mb-6">🎉</div>
                <h2 className="text-4xl font-bold mb-4 text-white">
                  Prêt à tenter votre chance ?
                </h2>
                <p className="text-xl mb-8 text-white opacity-95">
                  Inscrivez-vous gratuitement et participez au jeu-concours du 10ème anniversaire
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Link href="/register">
                    <Button
                      size="lg"
                      className="bg-white text-primary-600 hover:bg-gray-100 font-bold text-lg px-10 py-4 shadow-lg"
                    >
                      Créer mon compte
                    </Button>
                  </Link>
                  <Link href="/connexion">
                    <Button
                      variant="outline"
                      size="lg"
                      className="border-2 border-white text-white hover:bg-white hover:text-primary-600 font-bold text-lg px-10 py-4"
                    >
                      J'ai déjà un compte
                    </Button>
                  </Link>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  );
}