'use client';

import type { Metadata } from "next";
import { useState } from "react";

export default function RulesPage() {
  const [openSection, setOpenSection] = useState<number | null>(null);

  const toggleSection = (index: number) => {
    setOpenSection(openSection === index ? null : index);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-white py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Règlement du jeu-concours
            </h1>
            <p className="text-lg text-gray-600">
              Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top"
              pour l'ouverture de notre 10e boutique.
            </p>
          </div>
        </div>
      </section>

      {/* Résumé Section */}
      <section className="py-8">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="bg-white rounded-xl shadow-md p-6 mb-8">
              <div className="flex items-center gap-2 mb-6">
                <span className="text-2xl">📋</span>
                <h2 className="text-2xl font-bold text-gray-900">Résumé du jeu-concours</h2>
              </div>

              <div className="grid md:grid-cols-3 gap-4">
                {/* 100% gagnants */}
                <div className="bg-red-50 rounded-lg p-6 text-center">
                  <div className="text-4xl mb-3">🎯</div>
                  <div className="text-2xl font-bold text-gray-900 mb-2">100% gagnants</div>
                  <p className="text-sm text-gray-600">
                    Chaque participant repart avec un lot garanti
                  </p>
                </div>

                {/* 30 + 30 jours */}
                <div className="bg-orange-50 rounded-lg p-6 text-center">
                  <div className="text-4xl mb-3">🔄</div>
                  <div className="text-2xl font-bold text-gray-900 mb-2">30 + 30 jours</div>
                  <p className="text-sm text-gray-600">
                    Période de jeu + délai de réclamation
                  </p>
                </div>

                {/* Grand prix 360€ */}
                <div className="bg-yellow-50 rounded-lg p-6 text-center">
                  <div className="text-4xl mb-3">🏆</div>
                  <div className="text-2xl font-bold text-gray-900 mb-2">Grand prix 360€</div>
                  <p className="text-sm text-gray-600">
                    Tirage final sous contrôle d'huissier
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Accordion Sections */}
      <section className="py-8 pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto space-y-4">

            {/* Section 1 - Conditions de participation */}
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <button
                onClick={() => toggleSection(1)}
                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl">📋</span>
                  <h3 className="text-xl font-bold text-gray-900">1. Conditions de participation</h3>
                </div>
                <svg
                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openSection === 1 && (
                <div className="px-6 pb-6 space-y-4 text-gray-700">
                  <p>Le jeu est ouvert à toute personne physique majeure résidant en France métropolitaine.</p>
                  <p className="font-semibold">Sont exclus de la participation :</p>
                  <ul className="list-disc list-inside space-y-2 ml-4">
                    <li>Les membres du personnel de Thé Tip Top et de ses prestataires</li>
                    <li>Les membres de leur famille (conjoint, ascendants, descendants)</li>
                    <li>Toute personne ayant participé à l'élaboration du jeu</li>
                  </ul>
                  <p>La participation au jeu implique l'acceptation pleine et entière du présent règlement.</p>
                </div>
              )}
            </div>

            {/* Section 2 - Codes de participation */}
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <button
                onClick={() => toggleSection(2)}
                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl">🎫</span>
                  <h3 className="text-xl font-bold text-gray-900">2. Codes de participation</h3>
                </div>
                <svg
                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openSection === 2 && (
                <div className="px-6 pb-6 space-y-4 text-gray-700">
                  <p>Pour participer au jeu, le participant doit :</p>
                  <ol className="list-decimal list-inside space-y-2 ml-4">
                    <li>Effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante</li>
                    <li>Récupérer son ticket de caisse comportant un code unique à 10 caractères</li>
                    <li>Se rendre sur le site www.thetiptop.fr</li>
                    <li>Créer un compte ou se connecter à son compte existant</li>
                    <li>Saisir le code figurant sur son ticket dans l'espace dédié</li>
                    <li>Découvrir instantanément son gain</li>
                  </ol>
                  <div className="bg-amber-50 border-l-4 border-amber-500 p-4 mt-4">
                    <p className="font-semibold text-amber-900">⚠️ Important</p>
                    <p className="text-amber-800">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
                  </div>
                </div>
              )}
            </div>

            {/* Section 3 - Calendrier et délais */}
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <button
                onClick={() => toggleSection(3)}
                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl">📅</span>
                  <h3 className="text-xl font-bold text-gray-900">3. Calendrier et délais</h3>
                </div>
                <svg
                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openSection === 3 && (
                <div className="px-6 pb-6 space-y-4 text-gray-700">
                  <div>
                    <p className="font-semibold mb-2">📍 Période de participation</p>
                    <p>Du 1er janvier 2025 à 00h00 au 31 janvier 2025 à 23h59 (heure de Paris)</p>
                  </div>
                  <div>
                    <p className="font-semibold mb-2">📍 Délai de réclamation des lots</p>
                    <p>30 jours après la date de participation pour réclamer votre lot</p>
                  </div>
                  <div>
                    <p className="font-semibold mb-2">📍 Tirage final</p>
                    <p>Le tirage au sort pour le grand prix (1 an de thé - 360€) aura lieu le 15 février 2025 sous contrôle d'huissier de justice</p>
                  </div>
                  <div className="bg-green-50 border-l-4 border-green-500 p-4 mt-4">
                    <p className="font-semibold text-green-900">✓ À retenir</p>
                    <p className="text-green-800">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p>
                  </div>
                </div>
              )}
            </div>

            {/* Section 4 - Tirage final Grand Prix */}
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <button
                onClick={() => toggleSection(4)}
                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl">🏆</span>
                  <h3 className="text-xl font-bold text-gray-900">4. Tirage final - Grand Prix</h3>
                </div>
                <svg
                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openSection === 4 && (
                <div className="px-6 pb-6 space-y-4 text-gray-700">
                  <p className="font-semibold text-xl">Grand Prix : 1 an de thé offert (valeur 360€)</p>
                  <p>À l'issue de la période de participation, un tirage au sort sera organisé pour désigner le grand gagnant du prix principal.</p>
                  <div>
                    <p className="font-semibold mb-2">Conditions du tirage :</p>
                    <ul className="list-disc list-inside space-y-2 ml-4">
                      <li>Date : 15 février 2025</li>
                      <li>Lieu : Siège social de Thé Tip Top, Paris</li>
                      <li>Sous contrôle d'huissier de justice : Maître Dupont, Office Notarial de Paris</li>
                      <li>Tous les participants ayant validé au moins un code sont automatiquement inscrits</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-semibold mb-2">Le lot :</p>
                    <p>Le gagnant recevra pendant 12 mois consécutifs une livraison mensuelle de thé d'une valeur de 30€, soit un total de 360€.</p>
                  </div>
                  <div className="bg-yellow-50 border-l-4 border-yellow-500 p-4 mt-4">
                    <p className="font-semibold text-yellow-900">🎁 Information</p>
                    <p className="text-yellow-800">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
                  </div>
                </div>
              )}
            </div>

            {/* Section 5 - Retrait des lots */}
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <button
                onClick={() => toggleSection(5)}
                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl">🎁</span>
                  <h3 className="text-xl font-bold text-gray-900">5. Retrait des lots</h3>
                </div>
                <svg
                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openSection === 5 && (
                <div className="px-6 pb-6 space-y-4 text-gray-700">
                  <p>Les lots doivent être réclamés dans un délai de <strong>30 jours</strong> à compter de la date de participation.</p>
                  <div>
                    <p className="font-semibold mb-2">Modalités de remise :</p>
                    <ul className="list-disc list-inside space-y-2 ml-4">
                      <li><strong>Infuseur, thé détox/signature :</strong> Retrait en boutique ou envoi postal (frais de port offerts)</li>
                      <li><strong>Coffrets découverte et prestige :</strong> Retrait en boutique ou livraison à domicile offerte</li>
                      <li><strong>Grand prix (1 an de thé) :</strong> Livraison mensuelle à l'adresse de votre choix</li>
                    </ul>
                  </div>
                  <div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4">
                    <p className="font-semibold text-red-900">⚠️ Attention</p>
                    <p className="text-red-800">Les lots non réclamés dans le délai imparti seront considérés comme abandonnés. Aucun lot ne peut être échangé, remboursé ou converti en espèces.</p>
                  </div>
                </div>
              )}
            </div>

            {/* Section 6 - Protection des données */}
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <button
                onClick={() => toggleSection(6)}
                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl">🔒</span>
                  <h3 className="text-xl font-bold text-gray-900">6. Protection des données personnelles</h3>
                </div>
                <svg
                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openSection === 6 && (
                <div className="px-6 pb-6 space-y-4 text-gray-700">
                  <p>Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement informatique destiné à gérer la participation au jeu et l'attribution des lots.</p>
                  <div>
                    <p className="font-semibold mb-2">Vos droits :</p>
                    <ul className="list-disc list-inside space-y-2 ml-4">
                      <li>Droit d'accès à vos données personnelles</li>
                      <li>Droit de rectification de vos données</li>
                      <li>Droit à l'effacement de vos données</li>
                      <li>Droit d'opposition au traitement</li>
                      <li>Droit à la portabilité des données</li>
                    </ul>
                  </div>
                  <p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">contact@thetiptop.fr</a></p>
                  <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">Politique de confidentialité</a>.</p>
                </div>
              )}
            </div>

          </div>
        </div>
      </section>

      {/* Informations légales Section */}
      <section className="py-12 bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e]">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-8 text-white">
              <h2 className="text-2xl font-bold mb-6">Informations légales</h2>

              <div className="grid md:grid-cols-2 gap-8">
                <div>
                  <h3 className="font-semibold mb-3 text-[#f59e0b]">Organisateur</h3>
                  <p className="text-sm">Thé Tip Top</p>
                  <p className="text-sm">18 Avenue des Thés</p>
                  <p className="text-sm">75001 Paris, France</p>
                  <p className="text-sm">SIRET: 12345678901234</p>
                </div>

                <div>
                  <h3 className="font-semibold mb-3 text-[#f59e0b]">Huissier</h3>
                  <p className="text-sm">Maître Dupont</p>
                  <p className="text-sm">Office Notarial de Paris</p>
                  <p className="text-sm">456 Rue de la Justice</p>
                  <p className="text-sm">75002 Paris, France</p>
                </div>
              </div>

              <div className="mt-6 pt-6 border-t border-white/20">
                <p className="text-sm text-white/80">
                  Jeu-concours gratuit sans obligation d'achat, sauf pour l'acquisition du ticket donnant droit à participation.
                  Règlement déposé chez Maître Dupont, huissier de justice à Paris.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
