'use client';

export default function GamePeriod() {
  return (
    <div className="grid md:grid-cols-2 gap-6 mt-8">
      {/* Période d'achat */}
      <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#f59e0b] hover:shadow-xl transition-shadow">
        <div className="flex items-start gap-4">
          <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] rounded-full p-4 flex-shrink-0">
            <svg className="w-8 h-8 text-[#f59e0b]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
          </div>
          <div className="flex-1">
            <h3 className="text-2xl font-bold text-gray-900 mb-3">Période d'achat</h3>
            <p className="text-gray-600">
              Achetez vos tickets de 49€ en boutique et obtenez votre code de participation
            </p>
          </div>
        </div>
      </div>

      {/* Période de jeu */}
      <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#1a4d2e] hover:shadow-xl transition-shadow">
        <div className="flex items-start gap-4">
          <div className="bg-gradient-to-br from-[#d1fae5] to-[#a7f3d0] rounded-full p-4 flex-shrink-0">
            <svg className="w-8 h-8 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div className="flex-1">
            <h3 className="text-2xl font-bold text-gray-900 mb-3">Période de jeu</h3>
            <p className="text-gray-600">
              Utilisez vos tickets pour jouer et découvrir vos lots instantanément
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}