import type { Metadata } from "next";
import Link from "next/link";
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="py-12">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-primary-50 via-white to-green-50 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 py-20 mb-16">
        <div className="max-w-4xl mx-auto">
          <div className="text-center">
            <div className="inline-block mb-4">
              <span className="bg-primary-100 text-primary-700 px-4 py-2 rounded-full text-sm font-semibold">
                Grand Jeu-Concours 2025
              </span>
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
              Gagnez des lots{' '}
              <span className="text-primary-600">exceptionnels</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-600 mb-8 leading-relaxed">
              Participez à notre jeu-concours et tentez de remporter des infuseurs à thé,
              des coffrets découverte, des thés signature et bien plus encore !
            </p>
            <div className="flex gap-4 justify-center flex-wrap">
              <Link href="/jeux">
                <button className="px-8 py-4 bg-white text-black font-semibold rounded-lg hover:bg-gray-50 transition-all transform hover:scale-105 text-lg shadow-lg border-2 border-black">
                  🎮 Jouer maintenant
                </button>
              </Link>
            </div>
            <div className="mt-8 flex items-center justify-center gap-6 text-sm text-gray-600 flex-wrap">
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span>100% gagnant</span>
              </div>
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span>Inscription gratuite</span>
              </div>
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span>Résultat immédiat</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="mb-16">
        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
          Comment ça marche ?
        </h2>
        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          <Card hover className="text-center">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">🛒</div>
              <h3 className="text-xl font-semibold mb-2">1. Achetez</h3>
              <p className="text-gray-600">
                Effectuez un achat chez Thé Tip Top et recevez votre ticket de
                caisse avec un code unique
              </p>
            </CardContent>
          </Card>

          <Card hover className="text-center">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">🎮</div>
              <h3 className="text-xl font-semibold mb-2">2. Jouez</h3>
              <p className="text-gray-600">
                Entrez le code de votre ticket sur notre site pour découvrir
                instantanément votre gain
              </p>
            </CardContent>
          </Card>

          <Card hover className="text-center">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">🎁</div>
              <h3 className="text-xl font-semibold mb-2">3. Gagnez</h3>
              <p className="text-gray-600">
                Récupérez votre lot en magasin ou profitez de votre réduction
                immédiate
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* 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>
  );
}