the-tip-top-frontend/app/lots/page.tsx

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

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-gray-50">
      {/* Hero Section */}
      <section className="bg-white py-12">
        <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-gray-900 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-yellow-100 to-yellow-200 rounded-2xl p-8 shadow-lg border-2 border-yellow-300">
              <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 text-6xl shadow-md">
                    🏆
                  </div>
                </div>
                <div className="flex-1 text-center md:text-left">
                  <div className="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">
                    GRAND PRIX FINAL
                  </div>
                  <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
                    1 an de thé offert
                  </h2>
                  <p className="text-gray-700 mb-3">
                    Le grand prix du tirage final : une année complète de thé premium livré chez vous
                  </p>
                  <div className="text-2xl font-bold text-orange-600">
                    Valeur : 360€ <span className="text-sm text-gray-600 font-normal">Tirage sous contrôle d'huissier</span>
                  </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">
                <div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center">
                  <div className="text-8xl">🍵</div>
                </div>
                <div className="p-6">
                  <div className="inline-block bg-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
                    60% des lots
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
                  <p className="text-gray-600 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 className="flex items-center justify-between">
                    <div className="text-2xl font-bold text-[#1a4d2e]">15€</div>
                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              {/* Prize 2 - Thé détox */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
                <div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center">
                  <div className="text-8xl">📦</div>
                </div>
                <div className="p-6">
                  <div className="inline-block bg-orange-100 text-orange-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
                    20% des lots
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé détox</h3>
                  <p className="text-gray-600 text-sm mb-4">
                    Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre
                  </p>
                  <div className="flex items-center justify-between">
                    <div className="text-2xl font-bold text-[#1a4d2e]">25€</div>
                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              {/* Prize 3 - Thé signature */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
                <div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center">
                  <div className="text-8xl">🌿</div>
                </div>
                <div className="p-6">
                  <div className="inline-block bg-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
                    10% des lots
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé signature</h3>
                  <p className="text-gray-600 text-sm mb-4">
                    Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs
                  </p>
                  <div className="flex items-center justify-between">
                    <div className="text-2xl font-bold text-[#1a4d2e]">35€</div>
                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              {/* Prize 4 - Coffret 39€ */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
                <div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center">
                  <div className="text-8xl">🎁</div>
                </div>
                <div className="p-6">
                  <div className="inline-block bg-purple-100 text-purple-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
                    6% des lots
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3>
                  <p className="text-gray-600 text-sm mb-4">
                    Sélection de nos 3 thés premium dans un élégant coffret cadeau
                  </p>
                  <div className="flex items-center justify-between">
                    <div className="text-2xl font-bold text-[#1a4d2e]">39€</div>
                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              {/* Prize 5 - Coffret 69€ */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
                <div className="aspect-square bg-gradient-to-br from-amber-50 to-yellow-50 flex items-center justify-center">
                  <div className="text-8xl">🎁</div>
                </div>
                <div className="p-6">
                  <div className="inline-block bg-amber-100 text-amber-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
                    4% des lots
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3>
                  <p className="text-gray-600 text-sm mb-4">
                    Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe
                  </p>
                  <div className="flex items-center justify-between">
                    <div className="text-2xl font-bold text-[#1a4d2e]">69€</div>
                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              {/* Prize 6 - Tirage Final */}
              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#f59e0b]">
                <div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center">
                  <div className="text-8xl">🏆</div>
                </div>
                <div className="p-6">
                  <div className="inline-block bg-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
                    1 an de THÉ
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Tirage Final</h3>
                  <p className="text-gray-600 text-sm mb-4">
                    Valeur 360€ - Livraison mensuelle pendant 12 mois
                  </p>
                  <div className="flex items-center justify-between">
                    <div className="text-2xl font-bold text-[#f59e0b]">360€</div>
                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </button>
                  </div>
                </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-[#1a4d2e] to-[#2d5a3d] rounded-2xl shadow-2xl p-12 text-center text-white">
            <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-[#f59e0b] hover:bg-[#d97706] text-white font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all">
                Participer maintenant
              </button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}