import { useMemo } from 'react'
import { Link } from 'react-router-dom'
import usePageMeta from '../hooks/usePageMeta'
import bannerImg from '../assets/img/banner-accueil.webp'

// Tous les lots possibles hors grand lot (déjà mis en avant dans sa propre
// carte). Chaque lot devient sa propre carte flottante, étalée en quinconce
// le long de la partie droite de l'illustration plutôt qu'empilée en liste.
const gains = [
  { label: 'Infuseur à thé', top: '26%', right: '26%', delay: 700, variant: 'a' },
  { label: 'Boîte 100 g détox ou infusion', top: '22%', right: '1%', delay: 850, variant: 'b' },
  { label: 'Boîte 100 g thé signature', top: '48%', right: '30%', delay: 1000, variant: 'a' },
  { label: 'Coffret découverte 39 €', top: '78%', right: '2%', delay: 1150, variant: 'b' },
  { label: 'Coffret découverte 69 €', top: '84%', right: '24%', delay: 1300, variant: 'a' },
]

// Légère inclinaison 3D des cartes de la bannière au passage de la souris,
// façon « tilt card ». Fonctions déclarées hors du composant : elles ne
// dépendent d'aucun state, inutile de les recréer à chaque rendu.
function handleCardTilt(e) {
  const el = e.currentTarget
  const rect = el.getBoundingClientRect()
  const px = (e.clientX - rect.left) / rect.width - 0.5
  const py = (e.clientY - rect.top) / rect.height - 0.5
  el.style.transform = `perspective(700px) rotateX(${(-py * 12).toFixed(2)}deg) rotateY(${(px * 12).toFixed(2)}deg) scale(1.04)`
}
function resetCardTilt(e) {
  e.currentTarget.style.transform = ''
}

// Petites animations de thé générées en JS : position, taille, durée et
// délai tirés au sort une seule fois (useMemo) pour parsemer toute la
// bannière de feuilles/tasses/théières/cuillères qui dérivent doucement,
// sans jamais se superposer deux fois de la même façon. Taille et opacité
// relevées pour qu'elles restent bien visibles sur le fond teal.
const TEA_EMOJI = ['🍃', '🍵', '🫖', '☕', '🥄', '✨']

function createTeaParticles(count) {
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    emoji: TEA_EMOJI[i % TEA_EMOJI.length],
    left: Math.round(Math.random() * 100),
    top: Math.round(Math.random() * 100),
    size: Math.round(20 + Math.random() * 26),
    duration: +(4 + Math.random() * 4).toFixed(1),
    delay: +(Math.random() * 4).toFixed(1),
    opacity: +(0.18 + Math.random() * 0.22).toFixed(2),
    drift: Math.round(12 + Math.random() * 20),
  }))
}

const faqs = [
  {
    question: 'Comment obtenir un code ?',
    answer: "Achetez pour plus de 49 € dans notre boutique Thé Tip Top de Nice, entre le 2 et le 31 octobre 2026 : un code unique à 10 caractères figure sur votre ticket de caisse ou votre facture.",
  },
  {
    question: 'Quels sont les lots à gagner ?',
    answer: (
      <>
        Tous les tickets sont gagnants ! Selon votre ticket, vous pouvez remporter :
        <ul className="list-disc list-inside space-y-1 mt-2">
          <li>Un infuseur à thé</li>
          <li>Une boîte de 100 g de thé détox ou d'infusion</li>
          <li>Une boîte de 100 g de thé signature</li>
          <li>Un coffret découverte d'une valeur de 39 €</li>
          <li>Un coffret découverte d'une valeur de 69 €</li>
        </ul>
        Un tirage au sort désigne en plus un grand gagnant qui remporte une année de thé d'une valeur de 360 €.
      </>
    ),
    plainAnswer: "Tous les tickets sont gagnants ! Selon votre ticket, vous pouvez remporter : un infuseur à thé, une boîte de 100 g de thé détox ou d'infusion, une boîte de 100 g de thé signature, un coffret découverte d'une valeur de 39 €, ou un coffret découverte d'une valeur de 69 €. Un tirage au sort désigne en plus un grand gagnant qui remporte une année de thé d'une valeur de 360 €.",
  },
  {
    question: 'Jusqu\'à quand puis-je jouer ?',
    answer: 'La saisie des codes est ouverte du 2 au 31 octobre 2026 inclus. Les lots sont ensuite à retirer jusqu\'au 30 novembre 2026.',
  },
  {
    question: 'Que faire si mon code n\'est pas reconnu ?',
    answer: "Vérifiez que le code a été saisi sans espace ni erreur. Si le problème persiste, contactez-nous depuis la page Contact.",
  },
  {
    question: 'Où retirer mon lot ?',
    answer: 'Dans notre boutique de Nice, sur présentation de votre compte utilisateur validé et de la confirmation de gain affichée dans votre espace « Mes gains », jusqu\'au 30 novembre 2026.',
  },
]

const faqJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: faqs.map((faq) => ({
    '@type': 'Question',
    name: faq.question,
    acceptedAnswer: {
      '@type': 'Answer',
      text: faq.plainAnswer || faq.answer,
    },
  })),
}

export default function Accueil() {
  usePageMeta({
    title: 'Jeu-concours 100 % Gagnant | Thé Tip Top — Thés bio et faits main',
    description: "Du 2 au 31 octobre, tout ticket de plus de 49 € de notre boutique de Nice porte un code 100 % gagnant. Saisissez le vôtre et repartez avec votre lot.",
  })

  // Tirées au sort une seule fois au montage : la bannière ne doit pas
  // réordonner ses particules de thé à chaque re-render.
  const teaParticles = useMemo(() => createTeaParticles(30), [])

  return (
    <div className="bg-gray-50 min-h-screen">

      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }} />

      {/* Bannière : fond teal plein cadre, illustration très grande et animée à l'entrée,
          textes et cartes de gains répartis en plusieurs blocs pour occuper toute la zone
          plutôt qu'une seule colonne dense. La composition « poster » en absolute (position:
          static → absolute) ne s'active qu'à partir de lg (1024px) : en dessous — mobile ET
          tablette —, un écran trop étroit ferait chevaucher le titre et l'illustration de façon
          illisible (constaté sur iPad portrait), donc tout reste en empilement normal, dans
          l'ordre du DOM, jusqu'à avoir vraiment la place. */}
      <section className="relative bg-[#006B6B] overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 relative py-10 lg:py-0 lg:h-[680px] xl:h-[780px]">

          {/* Halo doux derrière l'illustration (uniquement pertinent à partir de lg, où
              l'illustration passe en fond de la composition) */}
          <div
            className="hidden lg:block absolute right-[-10%] top-1/2 -translate-y-1/2 w-[75%] h-[75%] rounded-full bg-white/10 blur-3xl"
            aria-hidden="true"
          />

          {/* Particules de thé générées en JS (position/taille/durée tirées au sort dans
              teaParticles), parsemées sur toute la bannière derrière le contenu. */}
          <div className="pointer-events-none absolute inset-0 overflow-hidden z-0" aria-hidden="true">
            {teaParticles.map((p) => (
              <span
                key={p.id}
                className="absolute animate-tea-drift select-none"
                style={{
                  left: `${p.left}%`,
                  top: `${p.top}%`,
                  fontSize: `${p.size}px`,
                  opacity: p.opacity,
                  animationDuration: `${p.duration}s`,
                  animationDelay: `${p.delay}s`,
                  '--tea-drift': `${p.drift}px`,
                }}
              >
                {p.emoji}
              </span>
            ))}
          </div>

          {/* Titre */}
          <div className="static lg:absolute lg:left-0 lg:top-10 max-w-full lg:max-w-md mb-6 lg:mb-0">
            <p className="inline-block text-sm sm:text-base font-bold uppercase tracking-widest text-amber-300 border border-white/70 rounded-lg px-3.5 py-2 mb-3">
              Du 02 au 31 octobre 2026
            </p>
            <h1 className="text-3xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-[1.05]">
              Jeu-concours{' '}
              <span className="text-amber-300">100&nbsp;% Gagnant</span>
            </h1>
          </div>

          {/* Illustration : très grande à partir de lg, débordant du cadre en haut/bas (rogné
              proprement par le overflow-hidden de la section) et glissant à l'entrée. En
              dessous de lg, recadrée (object-cover) sur le personnage pour ne pas gaspiller
              l'espace transparent intégré au visuel d'origine. */}
          <div className="relative -mx-4 sm:mx-0 lg:mx-0 mb-6 lg:mb-0 lg:contents">
            <div className="relative aspect-[16/10] sm:aspect-[21/9] overflow-hidden lg:hidden">
              <img
                src={bannerImg}
                alt="Jeu-concours 100 % Gagnant Thé Tip Top, du 2 au 31 octobre 2026 : tentez de gagner un an de thé d'une valeur de 360 € pour l'ouverture de notre 10e boutique à Nice."
                className="absolute inset-y-0 right-0 w-[210%] sm:w-[130%] max-w-none h-full object-cover object-right animate-banner-image"
              />
            </div>
            <img
              src={bannerImg}
              alt="Jeu-concours 100 % Gagnant Thé Tip Top, du 2 au 31 octobre 2026 : tentez de gagner un an de thé d'une valeur de 360 € pour l'ouverture de notre 10e boutique à Nice."
              width={2048}
              height={1152}
              className="hidden lg:block lg:absolute lg:right-[-2%] lg:top-1/2 lg:-translate-y-1/2 lg:h-[145%] xl:h-[160%] lg:w-auto lg:max-w-none object-contain drop-shadow-2xl animate-banner-image"
            />
          </div>

          {/* Sous-titre : mis en évidence dans une carte « verre dépoli » distincte du fond
              teal uni (bordure d'accent + fond translucide flouté), pour qu'il se détache
              clairement plutôt que de se fondre dans le reste du texte blanc de la bannière. */}
          <p className="static lg:absolute lg:left-0 lg:top-1/2 lg:-translate-y-1/2 max-w-full lg:max-w-md text-lg sm:text-2xl lg:text-3xl font-semibold text-white leading-snug [text-wrap:balance] mb-6 lg:mb-0 bg-white/10 backdrop-blur-sm border-l-4 border-amber-300 rounded-2xl px-4 py-3 sm:px-6 sm:py-4 shadow-lg">
            À l'occasion de l'ouverture de notre{' '}
            <span className="text-amber-300">10<sup>e</sup> boutique</span> à Nice : chaque code
            distribué correspond à un lot réel, attribué à l'avance.
          </p>

          {/* Cartes de gains : le grand lot (agrandi) + tous les autres lots possibles, en
              cartes flottantes autour de l'illustration à partir de lg uniquement — masquées
              sur mobile/tablette, où elles surchargeaient l'écran en plus du reste du contenu.
              Chaque carte flotte doucement en continu (animate-card-float-*) et s'incline
              légèrement au passage de la souris (onMouseMove → handleCardTilt), deux animations
              portées par des conteneurs séparés pour ne pas se marcher dessus. */}
          <div className="hidden lg:contents">

            {/* Grand lot : décalé plus bas et plus à droite que les autres cartes du haut
                (elle touchait « Boîte détox ou infusion »), dans le grand espace libre entre
                cette carte et « Coffret découverte 39 € », pour amorcer un arc de cercle autour
                de l'illustration plutôt qu'un empilement dans le même coin. */}
            <div className="shrink-0 lg:absolute lg:right-[1%] lg:top-[45%] animate-banner-badge [animation-delay:500ms]">
              <div className="animate-card-float-a">
                <div
                  onMouseMove={handleCardTilt}
                  onMouseLeave={resetCardTilt}
                  className="bg-white rounded-2xl shadow-xl px-5 sm:px-7 py-4 sm:py-5 text-center transition-transform duration-200 ease-out will-change-transform cursor-default"
                >
                  <p className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 leading-none">
                    360&nbsp;<span className="text-[#006B6B]">€</span>
                  </p>
                  <p className="text-xs sm:text-sm font-semibold text-gray-800 whitespace-nowrap mt-1.5">de thé à gagner</p>
                </div>
              </div>
            </div>

            {/* Les autres lots : une carte par lot, éclatées en quinconce (position en %
                définie dans le tableau `gains`) plutôt qu'empilées dans une seule colonne.
                top/right en style inline : ils ne s'appliquent qu'à partir de lg (seul
                breakpoint où la carte passe en absolute), sans effet en dessous.
                whitespace-nowrap plutôt qu'un max-w fixe : une carte plus étroite que sa
                ligne de texte forçait un retour à la ligne qui laissait du blanc (ex. « Boîte
                100 g détox ou » / « infusion »). En nowrap, chaque carte se limite exactement
                à la largeur de son texte, sur une seule ligne, sans espace perdu. */}
            {gains.map((gain) => (
              <div
                key={gain.label}
                className="shrink-0 lg:absolute animate-banner-badge"
                style={{ top: gain.top, right: gain.right, animationDelay: `${gain.delay}ms` }}
              >
                <div className={gain.variant === 'a' ? 'animate-card-float-a' : 'animate-card-float-b'}>
                  <div
                    onMouseMove={handleCardTilt}
                    onMouseLeave={resetCardTilt}
                    className="bg-white rounded-2xl shadow-xl px-3.5 py-2.5 text-left transition-transform duration-200 ease-out will-change-transform cursor-default"
                  >
                    <span className="text-xs sm:text-sm font-semibold text-gray-800 whitespace-nowrap">{gain.label}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* CTA, remonté par rapport au bord bas de la bannière */}
          <div className="static lg:absolute lg:left-0 lg:bottom-24 xl:bottom-28 flex flex-col sm:flex-row gap-3 sm:gap-4">
            <Link
              to="/saisir-code-unique"
              className="bg-white hover:bg-gray-100 text-[#006B6B] font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base text-center"
            >
              Tester mon code
            </Link>
            <Link
              to="/regles-jeu"
              className="border-2 border-white text-white hover:bg-white hover:text-[#006B6B] font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base text-center"
            >
              Découvrir les règles
            </Link>
          </div>
        </div>
      </section>

      {/* Comment participer */}
      <section className="max-w-5xl mx-auto px-4 pt-6 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>
        <ol className="grid grid-cols-1 sm:grid-cols-3 gap-4 list-none">
          {[
            { num: '1', text: "Achat de 49 € dans notre boutique de Nice, code sur le ticket" },
            { num: '2', text: 'Créez votre compte et saisissez le code' },
            { num: '3', text: 'Découvrez et retirez votre lot en boutique' },
          ].map((step) => (
            <li 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>
            </li>
          ))}
        </ol>
      </section>

      {/* Questions fréquentes */}
      <section className="max-w-3xl mx-auto px-4 sm:px-6 pb-16 sm:pb-24">
        <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-6 sm:mb-8 text-center">
          Questions fréquentes
        </h2>
        <div className="space-y-3">
          {faqs.map((faq) => (
            <details key={faq.question} className="group bg-white rounded-2xl shadow p-4 sm:p-6">
              <summary className="flex items-center justify-between gap-3 cursor-pointer list-none font-semibold text-gray-800 text-sm sm:text-base">
                {faq.question}
                <svg
                  className="w-4 h-4 text-[#006B6B] flex-shrink-0 transition-transform group-open:rotate-180"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2}
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
              </summary>
              <div className="text-gray-600 text-sm sm:text-base mt-3 leading-relaxed">
                {faq.answer}
              </div>
            </details>
          ))}
        </div>
      </section>

    </div>
  )
}