the-tip-top-frontend/app/data-deletion/page.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Suppression des données - Thé Tip Top",
  description: "Instructions pour la suppression de vos données personnelles",
};

export default function DataDeletionPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-primary-50 to-white py-12 px-4">
      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">
          Suppression des données utilisateur
        </h1>

        <p className="text-sm text-gray-600 mb-8">
          Dernière mise à jour : 18 novembre 2024
        </p>

        <div className="space-y-6 text-gray-700">
          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              1. Vos droits concernant vos données
            </h2>
            <p>
              Conformément au Règlement Général sur la Protection des Données (RGPD),
              vous avez le droit de demander la suppression de vos données personnelles
              stockées dans notre application.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              2. Données concernées par la suppression
            </h2>
            <p className="mb-2">
              La suppression de votre compte entraînera la suppression définitive des
              données suivantes :
            </p>
            <ul className="list-disc pl-6 space-y-2">
              <li>Informations de profil (nom, prénom, email, téléphone)</li>
              <li>Photo de profil (si fournie via OAuth)</li>
              <li>Historique de participation au jeu-concours</li>
              <li>Codes de tickets utilisés</li>
              <li>Lots gagnés (non réclamés)</li>
              <li>Données de connexion (OAuth Google/Facebook)</li>
            </ul>
            <p className="mt-3 text-sm text-amber-700 bg-amber-50 p-3 rounded">
              ⚠️ <strong>Attention :</strong> Cette action est irréversible. Une fois vos
              données supprimées, vous ne pourrez plus récupérer vos lots non réclamés.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              3. Comment demander la suppression de vos données
            </h2>

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-4">
              <h3 className="text-xl font-semibold text-blue-900 mb-3">
                Méthode 1 : Depuis votre compte
              </h3>
              <ol className="list-decimal pl-6 space-y-2">
                <li>Connectez-vous à votre compte</li>
                <li>Accédez à votre <strong>Profil</strong></li>
                <li>Cliquez sur <strong>"Supprimer mon compte"</strong></li>
                <li>Confirmez votre décision</li>
                <li>Vos données seront supprimées sous 48 heures</li>
              </ol>
            </div>

            <div className="bg-green-50 border border-green-200 rounded-lg p-6">
              <h3 className="text-xl font-semibold text-green-900 mb-3">
                Méthode 2 : Par email
              </h3>
              <p className="mb-3">
                Si vous ne pouvez pas accéder à votre compte, envoyez un email à :
              </p>
              <div className="bg-white p-4 rounded border border-green-300">
                <p className="font-mono text-lg">
                  <a
                    href="mailto:privacy@thetiptop.fr?subject=Demande de suppression de données"
                    className="text-primary-600 hover:underline"
                  >
                    privacy@thetiptop.fr
                  </a>
                </p>
              </div>
              <p className="mt-3 text-sm">
                <strong>Objet :</strong> Demande de suppression de données
              </p>
              <p className="text-sm mb-2">
                <strong>Incluez dans votre email :</strong>
              </p>
              <ul className="list-disc pl-6 space-y-1 text-sm">
                <li>Votre nom complet</li>
                <li>Votre adresse email utilisée pour l'inscription</li>
                <li>Une pièce d'identité (pour vérification)</li>
              </ul>
            </div>
          </section>

          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              4. Délai de traitement
            </h2>
            <p>
              Votre demande de suppression sera traitée dans un délai maximum de{" "}
              <strong>48 heures ouvrées</strong>. Vous recevrez un email de confirmation
              une fois la suppression effectuée.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              5. Données conservées pour obligations légales
            </h2>
            <p className="mb-2">
              Certaines données peuvent être conservées pour respecter nos obligations
              légales et comptables :
            </p>
            <ul className="list-disc pl-6 space-y-2">
              <li>
                <strong>Lots réclamés :</strong> Conservation pendant 10 ans (obligations comptables)
              </li>
              <li>
                <strong>Transactions :</strong> Conservation pendant 5 ans (obligations fiscales)
              </li>
              <li>
                <strong>Logs de sécurité :</strong> Conservation pendant 1 an (obligations légales)
              </li>
            </ul>
            <p className="mt-3 text-sm text-gray-600">
              Ces données sont stockées de manière sécurisée et ne sont pas utilisées
              à d'autres fins que celles mentionnées ci-dessus.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              6. Suppression des données OAuth (Google/Facebook)
            </h2>
            <p className="mb-3">
              Si vous vous êtes connecté via Google ou Facebook :
            </p>
            <div className="space-y-3">
              <div className="bg-gray-50 p-4 rounded">
                <h4 className="font-semibold text-gray-900 mb-2">Google :</h4>
                <p className="text-sm">
                  Visitez{" "}
                  <a
                    href="https://myaccount.google.com/permissions"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary-600 hover:underline"
                  >
                    Google Account Permissions
                  </a>{" "}
                  et révoquez l'accès à "Thé Tip Top"
                </p>
              </div>
              <div className="bg-gray-50 p-4 rounded">
                <h4 className="font-semibold text-gray-900 mb-2">Facebook :</h4>
                <p className="text-sm">
                  Visitez{" "}
                  <a
                    href="https://www.facebook.com/settings?tab=applications"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary-600 hover:underline"
                  >
                    Facebook Apps Settings
                  </a>{" "}
                  et supprimez "Thé Tip Top"
                </p>
              </div>
            </div>
          </section>

          <section>
            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
              7. Contact
            </h2>
            <p className="mb-3">
              Pour toute question concernant la suppression de vos données :
            </p>
            <ul className="list-none space-y-2">
              <li>
                <strong>Email :</strong>{" "}
                <a
                  href="mailto:privacy@thetiptop.fr"
                  className="text-primary-600 hover:underline"
                >
                  privacy@thetiptop.fr
                </a>
              </li>
              <li>
                <strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France
              </li>
              <li>
                <strong>Téléphone :</strong> +33 4 93 00 00 00
              </li>
            </ul>
          </section>

          <section className="bg-primary-50 border border-primary-200 rounded-lg p-6 mt-8">
            <h2 className="text-xl font-semibold text-primary-900 mb-3">
              📋 Récapitulatif
            </h2>
            <div className="space-y-2 text-sm">
              <p>✅ Suppression sous 48h maximum</p>
              <p>✅ Toutes vos données personnelles effacées</p>
              <p>✅ Confirmation par email</p>
              <p>✅ Processus conforme RGPD</p>
            </div>
          </section>
        </div>

        <div className="mt-8 pt-6 border-t border-gray-200 flex gap-4">
          <a
            href="/privacy"
            className="text-primary-600 hover:text-primary-700 font-medium"
          >
            ← Politique de confidentialité
          </a>
          <a
            href="/"
            className="text-primary-600 hover:text-primary-700 font-medium"
          >
            Retour à l'accueil
          </a>
        </div>
      </div>
    </div>
  );
}