import { Link } from 'react-router-dom'

export default function Accueil() {
  return (
    <div className="bg-gray-50 min-h-screen">

      {/* Hero */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-16 md:py-24">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[#006B6B] mb-4 sm:mb-6 leading-tight">
            Bienvenue au jeu-concours Thé Tip Top
          </h1>
          <p className="text-base sm:text-lg md:text-xl text-gray-600 mb-8 sm:mb-10">
            À l'occasion de l'ouverture de notre 10ᵉ boutique à Nice, participez à notre jeu-concours
            et tentez de gagner des lots exceptionnels ! Tous les tickets sont gagnants, alors n'attendez
            plus pour découvrir votre lot.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
            <Link
              to="/saisir-code-unique"
              className="bg-[#006B6B] hover:bg-[#005555] text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
            >
              Tester mon code
            </Link>
            <Link
              to="/regles-jeu"
              className="border border-[#006B6B] text-[#006B6B] hover:bg-[#005555] hover:text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
            >
              Découvrir les règles
            </Link>
          </div>
        </div>
      </section>

      {/* Comment participer */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
        <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-6 sm:mb-8 text-center">
          Comment participer ?
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { num: '1', text: 'Achat de 49 € minimum' },
            { num: '2', text: 'Recevez votre code unique' },
            { num: '3', text: 'Saisissez le code sur le site' },
            { num: '4', text: 'Découvrez votre lot' },
          ].map((step) => (
            <div key={step.num} className="bg-white rounded-2xl shadow p-4 sm:p-6 text-center">
              <div className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-2 sm:mb-3">{step.num}</div>
              <p className="text-sm sm:text-base text-gray-700">{step.text}</p>
            </div>
          ))}
        </div>
      </section>

    </div>
  )
}