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

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

  usePageMeta({
    title: 'Règles du jeu-concours 100 % Gagnant | Thé Tip Top',
    description: "Comment participer au jeu-concours Thé Tip Top : obtenir un code, créer un compte, découvrir votre lot et tenter de remporter le grand gagnant.",
  })

  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">
            Jeu-concours réservé à notre boutique de Nice : participez 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€ dans notre boutique de Nice 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-4 sm:mb-6">
            Tous les billets sont gagnants ! Selon votre ticket, vous remportez :
          </p>
          <ul className="text-gray-700 text-sm sm:text-base leading-relaxed space-y-2 max-w-md mx-auto mb-6 sm:mb-8">
            {[
              { pct: '60 %', text: 'un infuseur à thé' },
              { pct: '20 %', text: "une boîte de 100 g de thé détox ou d'infusion" },
              { pct: '10 %', text: 'une boîte de 100 g de thé signature' },
              { pct: '6 %', text: "un coffret découverte d'une valeur de 39 €" },
              { pct: '4 %', text: "un coffret découverte d'une valeur de 69 €" },
            ].map((lot) => (
              <li key={lot.pct} className="flex gap-2">
                <span className="font-semibold text-[#006B6B] flex-shrink-0">{lot.pct}</span>
                <span className="min-w-0 flex-1">des tickets : {lot.text}</span>
              </li>
            ))}
          </ul>
          <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">
              Un tirage au sort, effectué sous le contrôle de Maître Arnaud Rick, Commissaire de
              Justice, désignera le gagnant d'une année de thé d'une valeur de 360€ !
            </p>
          </div>

          <div className="text-center mt-6 sm:mt-8">
            <a
              href="/reglement-jeu-concours-100-gagnant.pdf"
              className="inline-flex items-center justify-center gap-2 border border-[#006B6B] text-[#006B6B] hover:bg-[#006B6B] hover:text-white font-semibold px-6 py-3 rounded-xl transition-colors text-sm sm:text-base"
            >
              Télécharger le règlement (PDF)
            </a>
          </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 dans notre boutique de Nice.
          </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>
  )
}