'use client'

import { motion } from 'framer-motion'
import { Shield, CheckCircle, FileCheck, AlertCircle } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'

export default function RGPD() {
  return (
    <section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
      <BackgroundAnimations variant="gradient" />
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          {/* Header */}
          <div className="text-center mb-12">
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.2 }}
              className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
            >
              <FileCheck className="w-10 h-10 text-security-accent" />
            </motion.div>
            <h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
              Conformité <span className="gradient-text">RGPD</span>
            </h1>
            <p className="text-xl text-gray-400">
              Notre engagement en matière de protection des données personnelles
            </p>
          </div>

          {/* Content */}
          <div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
            <section>
              <p className="text-gray-300 leading-relaxed mb-6">
                NorthBlue, exploitant le site runlock.re, s'engage à respecter le Règlement Général sur la Protection des Données (RGPD) 
                entré en vigueur le 25 mai 2018. Cette page détaille nos pratiques et notre conformité à cette réglementation.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <CheckCircle className="w-6 h-6 text-security-accent" />
                <span>1. Responsable du traitement</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p><strong className="text-white">Responsable :</strong> NorthBlue</p>
                <p><strong className="text-white">Email :</strong> <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></p>
                <p><strong className="text-white">Téléphone :</strong> <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></p>
                <p><strong className="text-white">Localisation :</strong> La Réunion (974)</p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>2. Données collectées et finalités</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-3">
                <p>Nous collectons et traitons les données suivantes :</p>
                
                <div className="bg-security-card p-4 rounded-xl border border-security-border">
                  <h3 className="text-white font-semibold mb-2">Données de contact</h3>
                  <ul className="list-disc list-inside ml-4 space-y-1 text-sm">
                    <li>Nom et prénom</li>
                    <li>Adresse email</li>
                    <li>Numéro de téléphone (optionnel)</li>
                    <li>Nom de l'entreprise (optionnel)</li>
                  </ul>
                  <p className="text-sm mt-2 text-gray-400">
                    <strong>Finalité :</strong> Répondre à vos demandes et vous contacter concernant nos services
                  </p>
                  <p className="text-sm text-gray-400">
                    <strong>Base légale :</strong> Consentement et intérêt légitime
                  </p>
                </div>

                <div className="bg-security-card p-4 rounded-xl border border-security-border">
                  <h3 className="text-white font-semibold mb-2">Données de navigation</h3>
                  <ul className="list-disc list-inside ml-4 space-y-1 text-sm">
                    <li>Adresse IP (anonymisée)</li>
                    <li>Cookies techniques</li>
                    <li>Données de connexion</li>
                  </ul>
                  <p className="text-sm mt-2 text-gray-400">
                    <strong>Finalité :</strong> Assurer le bon fonctionnement du site et améliorer l'expérience utilisateur
                  </p>
                  <p className="text-sm text-gray-400">
                    <strong>Base légale :</strong> Intérêt légitime
                  </p>
                </div>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>3. Durée de conservation</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>Les données personnelles sont conservées pour les durées suivantes :</p>
                <ul className="list-disc list-inside ml-4 space-y-1">
                  <li><strong className="text-white">Données de contact :</strong> 3 ans à compter du dernier contact</li>
                  <li><strong className="text-white">Données de navigation :</strong> 13 mois maximum</li>
                  <li><strong className="text-white">Données liées aux cookies :</strong> 13 mois maximum</li>
                </ul>
                <p className="mt-2">
                  Au-delà de ces durées, les données sont supprimées ou anonymisées.
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <CheckCircle className="w-6 h-6 text-security-accent" />
                <span>4. Vos droits RGPD</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-3">
                <p>Conformément au RGPD, vous disposez des droits suivants :</p>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
                      <CheckCircle className="w-5 h-5 text-security-accent" />
                      <span>Droit d'accès</span>
                    </h3>
                    <p className="text-sm text-gray-400">
                      Vous pouvez obtenir une copie de vos données personnelles que nous détenons.
                    </p>
                  </div>

                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
                      <CheckCircle className="w-5 h-5 text-security-accent" />
                      <span>Droit de rectification</span>
                    </h3>
                    <p className="text-sm text-gray-400">
                      Vous pouvez corriger vos données inexactes ou incomplètes.
                    </p>
                  </div>

                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
                      <CheckCircle className="w-5 h-5 text-security-accent" />
                      <span>Droit à l'effacement</span>
                    </h3>
                    <p className="text-sm text-gray-400">
                      Vous pouvez demander la suppression de vos données personnelles.
                    </p>
                  </div>

                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
                      <CheckCircle className="w-5 h-5 text-security-accent" />
                      <span>Droit d'opposition</span>
                    </h3>
                    <p className="text-sm text-gray-400">
                      Vous pouvez vous opposer au traitement de vos données.
                    </p>
                  </div>

                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
                      <CheckCircle className="w-5 h-5 text-security-accent" />
                      <span>Droit à la portabilité</span>
                    </h3>
                    <p className="text-sm text-gray-400">
                      Vous pouvez récupérer vos données dans un format structuré.
                    </p>
                  </div>

                  <div className="bg-security-card p-4 rounded-xl border border-security-border">
                    <h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
                      <CheckCircle className="w-5 h-5 text-security-accent" />
                      <span>Droit de limitation</span>
                    </h3>
                    <p className="text-sm text-gray-400">
                      Vous pouvez demander la limitation du traitement de vos données.
                    </p>
                  </div>
                </div>

                <div className="bg-security-accent/10 border border-security-accent/30 p-4 rounded-xl mt-4">
                  <p className="text-sm text-gray-300">
                    <strong className="text-white">Pour exercer vos droits :</strong> Envoyez une demande à 
                    <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>. 
                    Nous vous répondrons dans un délai d'un mois maximum.
                  </p>
                </div>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>5. Transfert de données</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Vos données personnelles sont stockées et traitées au sein de l'Union Européenne. 
                  Nous ne transférons pas vos données vers des pays tiers en dehors de l'UE sans garanties appropriées.
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <AlertCircle className="w-6 h-6 text-security-accent" />
                <span>6. Réclamation</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Si vous estimez que le traitement de vos données personnelles constitue une violation du RGPD, 
                  vous avez le droit d'introduire une réclamation auprès de la Commission Nationale de l'Informatique 
                  et des Libertés (CNIL) :
                </p>
                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
                  <li>CNIL - 3 Place de Fontenoy - TSA 80715 - 75334 Paris Cedex 07</li>
                  <li>Téléphone : 01 53 73 22 22</li>
                  <li>Site web : <a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" className="text-security-accent hover:underline">www.cnil.fr</a></li>
                </ul>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>7. Sécurité des données</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>
                  NorthBlue met en œuvre des mesures techniques et organisationnelles appropriées pour protéger 
                  vos données personnelles contre la perte, l'utilisation abusive, l'accès non autorisé, 
                  la divulgation, l'altération ou la destruction.
                </p>
                <p>
                  Ces mesures incluent notamment :
                </p>
                <ul className="list-disc list-inside ml-4 space-y-1">
                  <li>Chiffrement des données sensibles</li>
                  <li>Accès restreint aux données personnelles</li>
                  <li>Sauvegardes régulières</li>
                  <li>Formation du personnel aux bonnes pratiques de sécurité</li>
                </ul>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>8. Contact</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Pour toute question concernant le traitement de vos données personnelles ou pour exercer vos droits RGPD, 
                  contactez-nous :
                </p>
                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
                  <li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
                  <li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
                </ul>
              </div>
            </section>

            <div className="pt-6 border-t border-security-border text-sm text-gray-400">
              <p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  )
}

