import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { PrizeCard } from "@/components/ui";

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 !",
};

const PRIZES = [
  { imageSrc: "/images/lots/infuseur.png", imageAlt: "Infuseur à thé premium", badge: "60% des lots", title: "Infuseur à thé premium", description: "Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac" },
  { imageSrc: "/images/lots/the-detox.png", imageAlt: "Boîte 100g thé détox", badge: "20% des lots", title: "Boîte 100g thé détox", description: "Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre" },
  { imageSrc: "/images/lots/the-signature.png", imageAlt: "Boîte 100g thé signature", badge: "10% des lots", title: "Boîte 100g thé signature", description: "Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs" },
  { imageSrc: "/images/lots/coffret-39.png", imageAlt: "Coffret découverte 39€", badge: "6% des lots", title: "Coffret découverte 39€", description: "Sélection de nos 3 thés premium dans un élégant coffret cadeau" },
  { imageSrc: "/images/lots/coffret-69.jpg", imageAlt: "Coffret prestige 69€", badge: "4% des lots", title: "Coffret prestige 69€", description: "Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe" },
  { imageSrc: "/images/lots/grand-prix.png", imageAlt: "Grand prix - 1 an de thé", badge: "1 an de THÉ", title: "Tirage Final", description: "Livraison mensuelle pendant 12 mois", isGrandPrix: true },
];

export default function LotsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-white to-beige-50 py-12 border-b-2 border-beige-300">
        <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-primary-300 mb-4">
              Lots à gagner
            </h1>
            <p className="text-lg text-gray-600">
              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-primary-500 to-primary-600 rounded-2xl p-8 shadow-2xl border-2 border-primary-400">
              <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-primary-500 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
                  </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">
              {PRIZES.map((prize, index) => (
                <PrizeCard key={index} {...prize} />
              ))}
            </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-primary-500 to-primary-600 rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-primary-400">
            <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-primary-500 hover:bg-beige-50 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>
  );
}