'use client';

export default function GamePeriod() {
  return (
    <div className="grid md:grid-cols-2 gap-8 mt-8">
      {/* Période de validation des tickets */}
      <div className="bg-gradient-to-br from-white to-secondary-50 rounded-3xl shadow-xl p-10 border-2 border-secondary-400 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
        <div className="flex flex-col items-center text-center">
          <div className="bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-full p-6 mb-6 shadow-lg">
            <svg className="w-12 h-12 text-secondary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
            </svg>
          </div>
          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Période de validation des tickets</h2>
          <p className="text-lg text-gray-600 mb-6">
            Achetez et validez votre code de participation
          </p>
          <div className="bg-secondary-100 rounded-2xl px-6 py-4 w-full">
            <h3 className="text-lg font-bold text-secondary-700">
              Du <time dateTime="2025-12-01">1 décembre 2025</time> au <time dateTime="2025-12-31">31 décembre 2025</time>
            </h3>
            <p className="text-secondary-700 font-semibold mt-1">30 jours</p>
          </div>
        </div>
      </div>

      {/* Période de récupération des lots */}
      <div className="bg-gradient-to-br from-white to-primary-50 rounded-3xl shadow-xl p-10 border-2 border-primary-500 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
        <div className="flex flex-col items-center text-center">
          <div className="bg-gradient-to-br from-primary-100 to-primary-200 rounded-full p-6 mb-6 shadow-lg">
            <svg className="w-12 h-12 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
            </svg>
          </div>
          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Période de récupération des lots</h2>
          <p className="text-lg text-gray-600 mb-6">
            Récupérez vos lots gagnés en boutique
          </p>
          <div className="bg-primary-50 rounded-2xl px-6 py-4 w-full">
            <h3 className="text-lg font-bold text-primary-700">
              Du <time dateTime="2025-12-01">1 décembre 2025</time> au <time dateTime="2026-01-31">31 janvier 2026</time>
            </h3>
            <p className="text-primary-600 font-semibold mt-1">60 jours</p>
          </div>
        </div>
      </div>
    </div>
  );
}