'use client'

import { motion } from 'framer-motion'
import { Shield, Lock, Eye, Database } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'

export default function PolitiqueConfidentialite() {
  return (
    <section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
      <BackgroundAnimations variant="particles" />
      <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"
            >
              <Lock className="w-10 h-10 text-security-accent" />
            </motion.div>
            <h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
              Politique de <span className="gradient-text">Confidentialité</span>
            </h1>
            <p className="text-xl text-gray-400">
              Protection et utilisation de vos 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">
                La présente politique de confidentialité décrit la manière dont NorthBlue, exploitant le site runlock.re, 
                collecte, utilise et protège les informations personnelles que vous nous fournissez lors de l'utilisation de notre site web.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Eye className="w-6 h-6 text-security-accent" />
                <span>1. Collecte des données personnelles</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>
                  Nous collectons les informations suivantes lorsque vous utilisez notre formulaire de contact :
                </p>
                <ul className="list-disc list-inside ml-4 space-y-1">
                  <li>Nom et prénom</li>
                  <li>Adresse email</li>
                  <li>Nom de l'entreprise (optionnel)</li>
                  <li>Service souhaité</li>
                  <li>Message</li>
                  <li>Numéro de téléphone (si fourni)</li>
                </ul>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Database className="w-6 h-6 text-security-accent" />
                <span>2. Utilisation des données</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>Les données collectées sont utilisées pour :</p>
                <ul className="list-disc list-inside ml-4 space-y-1">
                  <li>Répondre à vos demandes et questions</li>
                  <li>Vous contacter concernant nos services</li>
                  <li>Améliorer nos services et votre expérience utilisateur</li>
                  <li>Respecter nos obligations légales et réglementaires</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>3. Protection des données</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>
                  NorthBlue s'engage à protéger vos données personnelles. Nous mettons en œuvre des mesures techniques 
                  et organisationnelles appropriées pour garantir la sécurité de vos informations.
                </p>
                <p>
                  Vos données sont stockées de manière sécurisée et ne sont accessibles qu'aux personnes autorisées 
                  ayant besoin d'y accéder pour répondre à vos demandes.
                </p>
                <p>
                  Nous ne vendons, ne louons ni ne partageons vos données personnelles avec des tiers à des fins commerciales.
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Lock className="w-6 h-6 text-security-accent" />
                <span>4. Conservation des données</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Vos données personnelles sont conservées pendant la durée nécessaire aux finalités pour lesquelles 
                  elles ont été collectées, conformément à la réglementation en vigueur.
                </p>
                <p className="mt-2">
                  Vous pouvez à tout moment demander la suppression de vos données en nous contactant à l'adresse 
                  <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>.
                </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>5. Vos droits</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez des droits suivants :</p>
                <ul className="list-disc list-inside ml-4 space-y-1">
                  <li><strong className="text-white">Droit d'accès :</strong> Vous pouvez demander l'accès à vos données personnelles</li>
                  <li><strong className="text-white">Droit de rectification :</strong> Vous pouvez demander la correction de vos données</li>
                  <li><strong className="text-white">Droit à l'effacement :</strong> Vous pouvez demander la suppression de vos données</li>
                  <li><strong className="text-white">Droit d'opposition :</strong> Vous pouvez vous opposer au traitement de vos données</li>
                  <li><strong className="text-white">Droit à la portabilité :</strong> Vous pouvez demander la récupération de vos données</li>
                  <li><strong className="text-white">Droit de limitation :</strong> Vous pouvez demander la limitation du traitement</li>
                </ul>
                <p className="mt-2">
                  Pour exercer ces droits, contactez-nous à : 
                  <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Lock className="w-6 h-6 text-security-accent" />
                <span>6. Cookies</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Le site runlock.re utilise des cookies techniques nécessaires au bon fonctionnement du site. 
                  Ces cookies ne nécessitent pas de consentement préalable.
                </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>7. Modifications</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  NorthBlue se réserve le droit de modifier la présente politique de confidentialité à tout moment. 
                  Les modifications entrent en vigueur dès leur publication sur le site.
                </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>8. Contact</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Pour toute question concernant cette politique de confidentialité ou pour exercer vos droits, 
                  vous pouvez nous contacter :
                </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>
  )
}

