import { Link } from 'react-router-dom'
import usePageMeta from '../hooks/usePageMeta'
import bannerImg from '../assets/img/banner-the-tip-top.webp'

export default function NotreConcept() {
  usePageMeta({
    title: 'Notre concept : un jeu-concours sans perdant | Thé Tip Top',
    description: "Pourquoi un jeu 100 % gagnant ? Découvrez le concept, la répartition des lots et les garanties de loyauté du jeu-concours Thé Tip Top.",
  })

  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">
            Le concept 100 % Gagnant : un jeu-concours sans perdant
          </h1>
          <p className="text-base sm:text-xl text-gray-600 mb-8 sm:mb-10">
            La plupart des jeux-concours font gagner une personne et laissent les autres repartir
            les mains vides. Nous avons choisi l'inverse&nbsp;: chaque code distribué correspond à
            un lot réel, attribué à l'avance. Personne ne joue pour rien.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
            <Link
              to="/accueil"
              className="bg-[#006B6B] hover:bg-[#005555] text-white font-semibold px-6 sm:px-8 py-3 rounded-xl transition-colors text-sm sm:text-base"
            >
              Voir le jeu-concours
            </Link>
            <Link
              to="/regles-jeu"
              className="border border-[#006B6B] text-[#006B6B] hover:bg-[#006B6B] hover:text-white font-semibold px-6 sm:px-8 py-3 rounded-xl transition-colors text-sm sm:text-base"
            >
              Consulter le règlement
            </Link>
          </div>
        </div>
      </section>

      {/* Visuel principal */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
        <div className="rounded-2xl shadow overflow-hidden">
          <img
            src={bannerImg}
            alt="Infuseur à thé Thé Tip Top, lot garanti du jeu-concours 100 % Gagnant"
            className="w-full h-full object-cover object-center"
          />
        </div>
      </section>

      {/* Pourquoi un jeu sans perdant */}
      <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">
            Pourquoi un jeu sans perdant
          </h2>
          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
            Un jeu classique récompense la chance. Celui-ci récompense la visite. Nous ouvrons une
            nouvelle adresse et nous voulions que chaque personne qui pousse la porte reparte avec
            quelque chose à goûter, pas avec un ticket de loterie. C'est aussi la raison pour
            laquelle le lot se retire sur place&nbsp;: le jeu est un prétexte à une rencontre, pas à
            une transaction de plus.
          </p>
        </div>
      </section>

      {/* Comment la loyauté du jeu est garantie */}
      <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">
            Comment la loyauté du jeu est garantie
          </h2>
          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
            L'intégralité des codes et leur lot associé sont générés avant l'ouverture du jeu, puis
            déposés auprès de Maître Arnaud Rick, commissaire de justice. Aucun lot ne peut être
            modifié en cours d'opération. Le règlement complet est{' '}
            <a
              href="/reglement-jeu-concours-100-gagnant.pdf"
              className="text-[#006B6B] font-semibold underline hover:no-underline"
            >
              consultable et téléchargeable
            </a>{' '}
            à tout moment. Le tirage au sort du lot principal est effectué sous le contrôle du même
            commissaire de justice, et le nombre de participations n'augmente pas les chances de le
            remporter.
          </p>
        </div>
      </section>

      {/* La répartition des 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">
            La répartition des lots, annoncée à l'avance
          </h2>
          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
            Six codes sur dix donnent un infuseur, deux sur dix une boîte de 100 g, un sur dix une
            boîte d'un mélange signature, et le solde un coffret découverte. Cette répartition est
            publiée dès le premier jour et ne varie pas. Vous savez donc, avant même de jouer, ce
            que vous pouvez obtenir et dans quelle proportion.
          </p>
        </div>
      </section>

      {/* Un jeu conçu pour ne rien gaspiller */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
        <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">
            Un jeu conçu pour ne rien gaspiller
          </h2>
          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
            Le lot le plus distribué est un infuseur réutilisable, choisi pour remplacer durablement
            les sachets jetables plutôt que pour faire nombre. La participation est entièrement
            numérique, sans bulletin papier, et nos supports imprimés se limitent au strict
            nécessaire d'un point de vente.
          </p>
        </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">
            Une question sur le concept du jeu ?
          </h2>
          <p className="mb-6 sm:mb-8 text-base sm:text-lg">
            Notre équipe reste à votre écoute pour tout ce qui concerne le jeu-concours et vos
            lots.
          </p>
          <div className="flex justify-center">
            <Link
              to="/contact"
              className="bg-white text-[#006B6B] px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white border border-white text-sm sm:text-base"
            >
              Contactez-nous
            </Link>
          </div>
        </div>
      </section>

    </div>
  )
}