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

export const metadata: Metadata = {
  title: "Nos Gains - Thé Tip Top",
  description: "Découvrez nos gains d'exception d'une valeur pouvant atteindre 100€",
};

export default function LotsPage() {
  return (
    <div className="py-12">
      {/* Hero Section */}
      <section className="text-center mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
          Nos gains d'exception
        </h1>
        <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
          Des récompenses d'une valeur pouvant atteindre 100€ vous attendent !
          Explorez notre sélection de thés premium et d'accessoires exclusifs.
        </p>
      </section>

      {/* Prizes Grid */}
      <section className="mb-16">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {/* Infuseur */}
          <Card className="hover:shadow-xl transition-shadow">
            <CardHeader>
              <div className="text-5xl text-center mb-3">🍵</div>
              <CardTitle className="text-center text-xl">Infuseur de thé</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-gray-600 leading-relaxed">
                Un infuseur en acier inoxydable de qualité supérieure pour révéler
                tous les arômes de vos thés.
              </p>
            </CardContent>
          </Card>

          {/* Thé détox */}
          <Card className="hover:shadow-xl transition-shadow">
            <CardHeader>
              <div className="text-5xl text-center mb-3">🌿</div>
              <CardTitle className="text-center text-xl">Boite de 100g d'un thé détox</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-gray-600 leading-relaxed">
                Un mélange exclusif de plantes biologiques pour purifier votre
                organisme en douceur.
              </p>
            </CardContent>
          </Card>

          {/* Coffret 39€ */}
          <Card className="hover:shadow-xl transition-shadow">
            <CardHeader>
              <div className="text-5xl text-center mb-3">🎁</div>
              <CardTitle className="text-center text-xl">Coffret Découverte de 39€</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-gray-600 leading-relaxed">
                Une sélection de 6 thés d'exception du monde entier dans un élégant
                coffret cadeau.
              </p>
            </CardContent>
          </Card>

          {/* Thé signature */}
          <Card className="hover:shadow-xl transition-shadow">
            <CardHeader>
              <div className="text-5xl text-center mb-3">☕</div>
              <CardTitle className="text-center text-xl">Thé signature</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-gray-600 leading-relaxed">
                Un mélange de thé exclusif, soigneusement élaboré par nos maîtres artisans,
                offrant des arômes uniques et une expérience authentique à chaque tasse.
              </p>
            </CardContent>
          </Card>

          {/* Coffret 69€ */}
          <Card className="hover:shadow-xl transition-shadow">
            <CardHeader>
              <div className="text-5xl text-center mb-3">🏆</div>
              <CardTitle className="text-center text-xl">Coffret Découverte de 69€</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-gray-600 leading-relaxed">
                Un coffret premium contenant une sélection de nos meilleurs thés
                d'exception avec accessoires assortis.
              </p>
            </CardContent>
          </Card>

          {/* CTA Card */}
          <Card className="bg-gradient-to-br from-primary-600 to-primary-700 text-white hover:shadow-xl transition-shadow flex items-center justify-center">
            <CardContent className="text-center py-8">
              <div className="text-5xl mb-4">🎮</div>
              <h3 className="text-2xl font-bold mb-4">Participer maintenant</h3>
              <Link href={ROUTES.GAME}>
                <Button
                  variant="outline"
                  className="bg-white text-primary-600 hover:bg-primary-50 border-white"
                >
                  Jouer
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Comment participer 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-4">
            Comment participer ?
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
            Trois étapes simples pour tenter votre chance et repartir avec nos gains d'exception.
          </p>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Étape 1 */}
            <Card className="bg-white text-center hover:shadow-lg transition-shadow">
              <CardContent className="pt-8">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
                  1
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">
                  Créez votre compte
                </h3>
                <p className="text-gray-600">
                  Ouvrez gratuitement votre espace et rejoignez notre communauté de passionnés.
                </p>
              </CardContent>
            </Card>

            {/* Étape 2 */}
            <Card className="bg-white text-center hover:shadow-lg transition-shadow">
              <CardContent className="pt-8">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
                  2
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">
                  Participez
                </h3>
                <p className="text-gray-600">
                  Prenez part au jeu-concours et validez votre participation chaque jour.
                </p>
              </CardContent>
            </Card>

            {/* Étape 3 */}
            <Card className="bg-white text-center hover:shadow-lg transition-shadow">
              <CardContent className="pt-8">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
                  3
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">
                  Remportez des gains
                </h3>
                <p className="text-gray-600">
                  Gagnez des récompenses d'exception et découvrez l'univers premium de Thé Tip Top.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Stats & Features Section */}
      <section className="mb-16">
        <div className="max-w-5xl mx-auto">
          {/* Main Stat */}
          <div className="text-center mb-12">
            <div className="text-6xl mb-4">🎉</div>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
              Déjà plus de 1000 gains remis !
            </h2>
            <p className="text-lg text-gray-600">
              Rejoignez les milliers de participants qui ont déjà découvert nos thés d'exception.
            </p>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-3 gap-8">
            {/* Feature 1 */}
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardContent className="pt-8">
                <div className="text-5xl mb-4">🏆</div>
                <h3 className="text-xl font-bold mb-2 text-gray-900">
                  Gagnant à tous les coups
                </h3>
                <p className="text-gray-600 text-sm">
                  Chaque participant repart avec une récompense.
                </p>
              </CardContent>
            </Card>

            {/* Feature 2 */}
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardContent className="pt-8">
                <div className="text-5xl mb-4">🌱</div>
                <h3 className="text-xl font-bold mb-2 text-gray-900">
                  Thés bio certifiés
                </h3>
                <p className="text-gray-600 text-sm">
                  Une qualité contrôlée et garantie.
                </p>
              </CardContent>
            </Card>

            {/* Feature 3 */}
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardContent className="pt-8">
                <div className="text-5xl mb-4">✅</div>
                <h3 className="text-xl font-bold mb-2 text-gray-900">
                  Satisfait ou remboursé
                </h3>
                <p className="text-gray-600 text-sm">
                  Une expérience 100% sereine.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <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">
              Prêt à tenter votre chance ?
            </h2>
            <p className="text-lg mb-8 text-primary-50">
              Inscrivez-vous gratuitement et participez au jeu-concours dès maintenant
            </p>
            <Link href={ROUTES.REGISTER}>
              <Button
                size="lg"
                variant="outline"
                className="bg-white text-primary-600 hover:bg-primary-50 border-white px-10"
              >
                Créer mon compte
              </Button>
            </Link>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}