import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";

export const metadata: Metadata = {
  title: "Lots à gagner - Thé Tip Top",
  description: "Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis, chaque participant repart avec un lot !",
};

export default function LotsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
              Lots à gagner
            </h1>
            <p className="text-lg text-[#8a8a7a]">
              Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis,
              chaque participant repart avec un lot !
            </p>
          </div>
        </div>
      </section>

      {/* Grand Prix Final */}
      <section className="py-8">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]">
              <div className="flex flex-col md:flex-row items-center gap-6">
                <div className="flex-shrink-0">
                  <div className="w-32 h-32 bg-white rounded-lg flex items-center justify-center p-3 shadow-md">
                    <Image
                      src="/images/lots/grand-prix.png"
                      alt="Grand prix"
                      width={128}
                      height={128}
                      className="w-full h-full object-contain object-center"
                    />
                  </div>
                </div>
                <div className="flex-1 text-center md:text-left">
                  <div className="inline-block bg-white text-[#d4a574] text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md">
                    GRAND PRIX FINAL
                  </div>
                  <h2 className="text-3xl md:text-4xl font-bold text-white mb-2">
                    1 an de thé offert
                  </h2>
                  <p className="text-white/90 mb-3">
                    Le grand prix du tirage final : une année complète de thé premium livré chez vous
                  </p>
                  <div className="text-sm text-white/80">
                    Tirage sous contrôle d'huissier
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Prizes Grid */}
      <section className="py-8 pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">

              {/* Prize 1 - Infuseur */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
                  <Image
                    src="/images/lots/infuseur.png"
                    alt="Infuseur à thé premium"
                    width={400}
                    height={400}
                    className="w-full h-full object-contain object-center"
                  />
                </div>
                <div className="p-6">
                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                    60% des lots
                  </div>
                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Infuseur à thé premium</h3>
                  <p className="text-[#8a8a7a] text-sm mb-4">
                    Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac
                  </p>
                </div>
              </div>

              {/* Prize 2 - Thé détox */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
                  <Image
                    src="/images/lots/the-detox.png"
                    alt="Boîte 100g thé détox"
                    width={400}
                    height={400}
                    className="w-full h-full object-contain object-center"
                  />
                </div>
                <div className="p-6">
                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                    20% des lots
                  </div>
                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé détox</h3>
                  <p className="text-[#8a8a7a] text-sm mb-4">
                    Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre
                  </p>
                </div>
              </div>

              {/* Prize 3 - Thé signature */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
                  <Image
                    src="/images/lots/the-signature.png"
                    alt="Boîte 100g thé signature"
                    width={400}
                    height={400}
                    className="w-full h-full object-contain object-center"
                  />
                </div>
                <div className="p-6">
                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                    10% des lots
                  </div>
                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé signature</h3>
                  <p className="text-[#8a8a7a] text-sm mb-4">
                    Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs
                  </p>
                </div>
              </div>

              {/* Prize 4 - Coffret 39€ */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
                  <Image
                    src="/images/lots/coffret-39.png"
                    alt="Coffret découverte 39€"
                    width={400}
                    height={400}
                    className="w-full h-full object-contain object-center"
                  />
                </div>
                <div className="p-6">
                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                    6% des lots
                  </div>
                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret découverte 39€</h3>
                  <p className="text-[#8a8a7a] text-sm mb-4">
                    Sélection de nos 3 thés premium dans un élégant coffret cadeau
                  </p>
                </div>
              </div>

              {/* Prize 5 - Coffret 69€ */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
                  <Image
                    src="/images/lots/coffret-69.jpg"
                    alt="Coffret prestige 69€"
                    width={400}
                    height={400}
                    className="w-full h-full object-contain object-center"
                  />
                </div>
                <div className="p-6">
                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                    4% des lots
                  </div>
                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret prestige 69€</h3>
                  <p className="text-[#8a8a7a] text-sm mb-4">
                    Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe
                  </p>
                </div>
              </div>

              {/* Prize 6 - Tirage Final */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574] h-full flex flex-col">
                <div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center p-2">
                  <Image
                    src="/images/lots/grand-prix.png"
                    alt="Grand prix - 1 an de thé"
                    width={400}
                    height={400}
                    className="w-full h-full object-contain object-center"
                  />
                </div>
                <div className="p-6">
                  <div className="inline-block bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white text-sm font-bold px-3 py-1 rounded-full mb-3 shadow-md">
                    1 an de THÉ
                  </div>
                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3>
                  <p className="text-[#8a8a7a] text-sm mb-4">
                    Livraison mensuelle pendant 12 mois
                  </p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Prêt à découvrir votre lot ?
            </h2>
            <p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
              Achetez pour 49€ minimum de thé en boutique, récupérez votre code et
              tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner.
            </p>
            <Link href="/register">
              <button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all duration-300 hover:scale-105">
                Participer maintenant
              </button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}