export default function Cgu() {
  return (
    <main className="bg-gray-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">

        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
          Conditions générales d'utilisation
        </h1>

        <div className="mb-6 sm:mb-8 px-4 py-3 sm:px-5 sm:py-4 rounded-xl bg-[#006B6B]">
          <p className="text-white text-sm sm:text-base font-medium leading-relaxed">
            Projet étudiant fictif — Ce site a été conçu dans un cadre pédagogique. La société
            Thé Tip Top, l'agence Furious Ducks et l'ensemble des conditions présentées
            ci-dessous sont fictives. Aucun achat, paiement ou réservation réel ne peut être
            effectué sur ce site.
          </p>
        </div>

        <p className="text-gray-600 mb-8 sm:mb-10 text-sm sm:text-base">
          Les présentes Conditions Générales d'Utilisation (CGU) précisent les modalités d'accès et
          d'utilisation du site internet du jeu-concours « 100% Gagnant » de la société Thé Tip Top.
        </p>

        {[
          {
            title: 'Article 1 – Objet des CGU',
            content: (
              <div className="text-gray-700 space-y-2 text-sm sm:text-base leading-relaxed">
                <p>
                  Les présentes Conditions Générales d'Utilisation (CGU) ont pour objet de définir
                  les modalités et conditions dans lesquelles la société Thé Tip Top met à
                  disposition des utilisateurs le site internet du jeu-concours « 100% Gagnant »,
                  accessible à l'adresse https://www.thetiptop-concours.fr.
                </p>
                <p>
                  Toute utilisation du Site implique l'acceptation pleine et entière des présentes
                  CGU. En cas de non-acceptation, l'utilisateur est invité à ne pas accéder au Site
                  ni à utiliser ses services.
                </p>
              </div>
            ),
          },
          {
            title: 'Article 2 – Conditions d\'accès au Site',
            content: (
              <div className="text-gray-700 space-y-2 text-sm sm:text-base leading-relaxed">
                <p><strong>Conditions d'âge —</strong> La participation au jeu-concours est strictement
                  réservée aux personnes physiques majeures, c'est-à-dire âgées d'au moins 18 ans
                  révolus à la date de leur inscription. Toute inscription d'un mineur est nulle et
                  non avenue. La société Thé Tip Top se réserve le droit de demander la fourniture
                  d'un justificatif d'identité pour vérifier l'âge déclaré.
                </p>
                <p><strong>Conditions géographiques —</strong> Le jeu-concours « 100% Gagnant » est
                  ouvert exclusivement aux résidents de France métropolitaine et des Départements et
                  Régions d'Outre-Mer (DROM). Sont exclus les ressortissants ou résidents de toute
                  autre zone géographique.
                </p>
                <p><strong>Personnes exclues —</strong> Sont exclus de toute participation les membres
                  du personnel de la société Thé Tip Top et de l'agence Furious Ducks, leurs
                  sous-traitants, ainsi que les membres de leur famille en ligne directe (conjoints,
                  ascendants, descendants). Est également exclu le personnel de l'étude du
                  Commissaire de Justice dépositaire du règlement.
                </p>
                <p><strong>Conditions techniques —</strong> L'accès au Site nécessite une connexion
                  internet active et un navigateur web à jour. La société Thé Tip Top ne saurait
                  être tenue responsable des difficultés d'accès liées à l'environnement technique
                  de l'utilisateur.
                </p>
              </div>
            ),
          },
          {
            title: 'Article 3 – Services proposés et fonctionnalités',
            content: (
              <div className="text-gray-700 space-y-4 text-sm sm:text-base leading-relaxed">
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">3.1 – Services proposés</h3>
                  <p>
                    Le site du jeu-concours « 100% Gagnant » est un site internet dédié permettant
                    aux clients de la société Thé Tip Top de participer à un jeu-concours à
                    l'occasion de l'ouverture de la 10ᵉ boutique de l'enseigne à Nice. Les services
                    proposés incluent :
                  </p>
                  <ul className="list-disc list-inside space-y-2 mt-2">
                    <li>La présentation du jeu-concours, de ses conditions et des lots à gagner</li>
                    <li>La création d'un espace personnel pour chaque participant</li>
                    <li>La saisie et la validation des codes à 10 caractères figurant sur les tickets de caisse ou factures d'un montant supérieur à 49 €</li>
                    <li>La consultation de l'historique des participations et gains obtenus</li>
                    <li>La réclamation des lots gagnés, en ligne ou en boutique</li>
                  </ul>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">3.2 – Fonctionnalités principales</h3>
                  <p><strong>S'inscrire —</strong> L'utilisateur peut créer un compte personnel en
                    renseignant un formulaire d'inscription classique ou en utilisant les
                    fonctionnalités d'authentification via Google. La création d'un compte est
                    obligatoire pour participer au jeu-concours.
                  </p>
                  <p className="mt-2"><strong>Jouer (participer au jeu-concours) —</strong> Une fois
                    connecté, l'utilisateur saisit le code à 10 caractères figurant sur son ticket de
                    caisse ou sa facture. Le Site valide le code et attribue immédiatement le lot
                    correspondant selon la répartition préétablie :
                  </p>
                  <ul className="list-disc list-inside space-y-1 mt-2">
                    <li>60 % des tickets : infuseur à thé</li>
                    <li>20 % des tickets : boîte de 100 g de thé détox ou d'infusion</li>
                    <li>10 % des tickets : boîte de 100 g de thé signature</li>
                    <li>6 % des tickets : coffret découverte d'une valeur de 39 €</li>
                    <li>4 % des tickets : coffret découverte d'une valeur de 69 €</li>
                  </ul>
                  <p className="mt-2">
                    Un même utilisateur peut soumettre plusieurs codes distincts. La participation
                    est possible pendant toute la durée du jeu-concours, soit 30 jours à compter de
                    son ouverture. Les lots gagnés peuvent être réclamés pendant cette période ainsi
                    que dans les 30 jours calendaires suivant la date de clôture du jeu-concours.
                    Passé ce délai, les lots non réclamés sont définitivement perdus.
                  </p>
                  <p className="mt-2"><strong>Remise des lots —</strong> Les lots peuvent être réclamés
                    en boutique, sur présentation du compte utilisateur validé et de la confirmation
                    de gain.
                  </p>
                  <p className="mt-2">
                    À l'issue du jeu-concours, un tirage au sort est effectué parmi l'ensemble des
                    participants pour désigner le gagnant d'un an de thé d'une valeur de 360 €. Ce
                    tirage a lieu sous le contrôle de Maître Arnaud Rick, Commissaire de Justice. Le
                    nombre de participations n'augmente pas les chances de remporter ce lot.
                  </p>
                </div>
              </div>
            ),
          },
          {
            title: 'Article 4 – Conditions d\'inscription et de création de compte',
            content: (
              <div className="text-gray-700 space-y-4 text-sm sm:text-base leading-relaxed">
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">4.1 – Processus d'inscription</h3>
                  <p>
                    Pour accéder aux services du Site, l'utilisateur doit créer un compte personnel.
                    L'inscription peut s'effectuer de deux manières :
                  </p>
                  <p className="mt-2"><strong>Via le formulaire classique —</strong> L'utilisateur
                    renseigne les champs obligatoires suivants : nom, prénom, adresse e-mail valide,
                    mot de passe sécurisé. L'utilisateur reçoit ensuite un e-mail de confirmation
                    contenant un lien d'activation. Le compte n'est activé qu'après validation de ce
                    lien.
                  </p>
                  <p className="mt-2"><strong>Via l'authentification Google —</strong> L'utilisateur
                    peut s'inscrire en utilisant son compte Google. Dans ce cas, les données
                    transmises par la plateforme tierce (nom, prénom, adresse e-mail) sont récupérées
                    avec le consentement explicite de l'utilisateur.
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">4.2 – Unicité du compte</h3>
                  <p>
                    Chaque utilisateur ne peut posséder qu'un seul compte. Toute tentative de
                    création de comptes multiples par un même utilisateur est prohibée et peut
                    entraîner la disqualification de l'ensemble des participations concernées.
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">4.3 – Véracité des informations</h3>
                  <p>
                    L'utilisateur s'engage à fournir des informations exactes, complètes et à jour
                    lors de son inscription et tout au long de l'utilisation du Site. Toute
                    inscription effectuée avec une fausse identité ou des données inexactes sera
                    annulée, ainsi que les participations et gains associés.
                  </p>
                </div>
              </div>
            ),
          },
          {
            title: 'Article 5 – Responsabilité de l\'utilisateur',
            content: (
              <div className="text-gray-700 space-y-3 text-sm sm:text-base leading-relaxed">
                <p>
                  L'utilisateur est seul responsable des informations communiquées lors de la
                  création et de l'utilisation de son compte. À ce titre, il s'engage à :
                </p>
                <ul className="list-disc list-inside space-y-2">
                  <li>Fournir des données personnelles exactes, sincères et à jour</li>
                  <li>Ne pas usurper l'identité d'un tiers</li>
                  <li>Ne pas créer de compte au nom d'une autre personne sans son autorisation</li>
                  <li>Signaler sans délai à la société Thé Tip Top toute erreur, inexactitude ou modification de ses informations personnelles via les fonctionnalités de gestion du compte</li>
                </ul>
                <p>
                  En cas de préjudice subi par la société Thé Tip Top ou par des tiers en raison de
                  fausses informations fournies par l'utilisateur, ce dernier en assume l'entière
                  responsabilité et peut se voir réclamer réparation.
                </p>
              </div>
            ),
          },
          {
            title: 'Article 6 – Gestion du compte utilisateur',
            content: (
              <div className="text-gray-700 space-y-4 text-sm sm:text-base leading-relaxed">
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">6.1 – Modification des informations</h3>
                  <p>
                    L'utilisateur peut à tout moment accéder à son espace personnel et modifier ses
                    informations (nom, prénom, mot de passe).
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">6.2 – Suppression du compte</h3>
                  <p>
                    L'utilisateur peut demander la suppression de son compte à tout moment en
                    contactant directement l'équipe via contact@thetiptop.fr. La suppression entraîne
                    la perte définitive des participations et gains non encore réclamés. Les données
                    personnelles sont supprimées conformément aux dispositions de la Politique de
                    Confidentialité, sous réserve des obligations légales de conservation.
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800 mb-1">6.3 – Sécurité des identifiants</h3>
                  <p>
                    L'utilisateur est seul responsable de la confidentialité de ses identifiants de
                    connexion (adresse e-mail et mot de passe). Il s'engage à ne les communiquer à
                    personne et à prendre toutes les précautions nécessaires pour en assurer la
                    protection. En cas de perte, de vol ou d'utilisation frauduleuse de ses
                    identifiants, l'utilisateur doit en informer immédiatement la société Thé Tip
                    Top. La société Thé Tip Top ne saurait être tenue responsable des dommages
                    résultant de l'utilisation des identifiants par un tiers, sauf faute de sa part.
                  </p>
                </div>
              </div>
            ),
          },
        ].map((article) => (
          <section key={article.title} className="mb-6 sm:mb-8">
            <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
              {article.title}
            </h2>
            {article.content}
          </section>
        ))}

      </div>
    </main>
  )
}