import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

export default function ReglesJeu() {
  const { user } = useAuth()
  const isLoggedIn = !!user

  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-20">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#006B6B] mb-4 sm:mb-6">
            Règles du jeu
          </h1>
          <p className="text-base sm:text-xl text-gray-600">
            Participez au jeu-concours ThéTipTop et découvrez immédiatement
            le lot que vous avez gagné.
          </p>
        </div>
      </section>

      {/* Comment participer */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
        <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] text-center mb-8 sm:mb-10">
          Comment participer ?
        </h2>
        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
          {[
            {
              num: '1',
              title: 'Obtenez un code',
              text: "Achetez un produit ThéTipTop d'une valeur supérieure à 49€ en ligne ou en magasin pour recevoir un code unique à 10 chiffres.",
            },
            {
              num: '2',
              title: 'Créez votre compte',
              text: "Inscrivez-vous sur le site du jeu-concours afin d'accéder à votre espace participant.",
            },
            {
              num: '3',
              title: 'Découvrez votre lot',
              text: 'Entrez votre code dans votre espace client et découvrez immédiatement votre récompense.',
            },
          ].map((step) => (
            <div key={step.num} className="bg-white rounded-2xl shadow p-6 sm:p-8 text-center">
              <div className="text-3xl sm:text-4xl font-bold text-[#006B6B] mb-3 sm:mb-4">{step.num}</div>
              <h3 className="text-lg sm:text-xl font-semibold mb-2 sm:mb-3">{step.title}</h3>
              <p className="text-gray-600 text-sm sm:text-base">{step.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Lots */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
        <div className="bg-white rounded-2xl shadow p-6 sm:p-10">
          <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-4 sm:mb-6 text-center">
            Que pouvez-vous gagner ?
          </h2>
          <p className="text-gray-600 text-base sm:text-lg text-center leading-relaxed mb-6 sm:mb-8">
            Tous les billets sont gagnants ! Les récompenses peuvent aller
            d'un infuseur à thé à un coffret découverte d'une valeur de 69€,
            en passant par des thés détox et des thés signatures.
          </p>
          <div className="bg-gray-100 rounded-xl p-4 sm:p-6 text-center">
            <h3 className="text-xl sm:text-2xl font-bold text-[#006B6B] mb-2">Grand gagnant</h3>
            <p className="text-gray-700 text-sm sm:text-base">
              Le participant tiré au sort remportera une année de thé d'une valeur de 360€ !
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
        <div className="bg-[#006B6B] rounded-2xl p-6 sm:p-10 text-center text-white">
          <h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">
            Ne manquez pas votre chance !
          </h2>
          <p className="mb-6 sm:mb-8 text-base sm:text-lg">
            Inscrivez-vous, entrez votre code de ticket et retirez votre lot en magasin ou en ligne.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
            {!isLoggedIn && (
              <Link
                to="/inscription"
                className="bg-white text-[#006B6B] px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white text-sm sm:text-base"
              >
                Inscrivez-vous
              </Link>
            )}
            <Link
              to="/saisir-code-unique"
              className="border border-white px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white text-sm sm:text-base"
            >
              Entrer mon code de ticket
            </Link>
          </div>
        </div>
      </section>

    </div>
  )
}