import { Shield, ArrowLeft, Lock, Database, UserCheck, Scale, Server, Moon, Sun } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useTheme } from '../hooks/useTheme';

export default function PolitiqueConfidentialite() {
  const { isDark, toggleTheme } = useTheme();
  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">

      {/* HEADER DE NAVIGATION */}
      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
            <ArrowLeft className="w-4 h-4" />
            Retour à l'accueil
          </Link>

          <div className="flex items-center gap-6">
            {/* BOUTON THEME */}
            <button
              onClick={toggleTheme}
              className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
              aria-label="Basculer le thème"
            >
              {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
            </button>

            {/* LOGO */}
            <div className="flex items-center gap-2">
              <Shield className="h-6 w-6 text-gise-accent" />
              <span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
            </div>
          </div>
        </div>
      </header>

      {/* CONTENU */}
      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">

        <div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
          <h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Politique de Confidentialité</h1>
          <p className="text-slate-500 dark:text-slate-400">
            Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
          </p>
          <p className="text-slate-600 dark:text-slate-400 mt-4 leading-relaxed">
            En tant que cabinet d'expertise en cybersécurité, la protection de vos données personnelles n'est pas seulement une obligation légale (RGPD), c'est le cœur de notre métier et de notre engagement envers vous.
          </p>
        </div>

        <div className="space-y-12 leading-relaxed text-sm">

          {/* SECTION 1 */}
          {/*<section>
            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
              <Lock className="w-5 h-5 text-gise-accent" />
              Responsable du traitement
            </h2>
            <div className="bg-white dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-800 space-y-1 transition-colors">
              <p><strong className="text-slate-900 dark:text-white">GISE SRL</strong></p>
              <p>Rue Exemple 123, 1000 Bruxelles, Belgique</p>
              <p>BCE : 0123.456.789</p>
              <p>E-mail : privacy@gise.be</p>
            </div>
          </section>*/}

          {/* SECTION 2 */}
          <section>
            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
              <Database className="w-5 h-5 text-gise-accent" />
              Données collectées et finalités
            </h2>
            <div className="space-y-4">
              <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
                <h3 className="font-bold text-slate-900 dark:text-white mb-2">A. Formulaire de contact et demandes d'audit</h3>
                <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
                  <li><strong>Données :</strong> Nom, e-mail professionnel, entreprise, contenu du message.</li>
                  <li><strong>Finalité :</strong> Répondre à vos demandes ou établir un devis.</li>
                </ul>
              </div>
              <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
                <h3 className="font-bold text-slate-900 dark:text-white mb-2">B. Sécurité du site et infrastructure</h3>
                <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
                  <li><strong>Données :</strong> Adresse IP, logs de connexion, agent utilisateur.</li>
                  <li><strong>Finalité :</strong> Détecter et prévenir les cyberattaques.</li>
                </ul>
              </div>
            </div>
          </section>

          {/* SECTION 3 */}
          <section>
            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
              <Server className="w-5 h-5 text-gise-accent" />
              Hébergement et partage des données
            </h2>
            <p className="mb-3">
              Vos données ne sont <strong>jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales.
            </p>
            <p>
              Toutes les données collectées via ce site sont hébergées sur nos propres serveurs physiques (Bare-Metal) localisés en <strong>Belgique</strong>.
            </p>
          </section>

          {/* SECTION 4 */}
          <section>
            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
              <UserCheck className="w-5 h-5 text-gise-accent" />
              Vos droits (Conformité RGPD)
            </h2>
            <ul className="grid sm:grid-cols-2 gap-3 mb-4">
              <li className="bg-white dark:bg-slate-900 p-3 rounded border border-slate-200 dark:border-slate-800 transition-colors"><strong className="text-slate-900 dark:text-white">Droit d'accès :</strong> Obtenir une copie de vos données.</li>
              <li className="bg-white dark:bg-slate-900 p-3 rounded border border-slate-200 dark:border-slate-800 transition-colors"><strong className="text-slate-900 dark:text-white">Droit de rectification :</strong> Corriger des données inexactes.</li>
            </ul>
            <p>
              Pour exercer ces droits, contactez notre DPO : <strong>privacy@gise.be</strong>.
            </p>
          </section>

          {/* SECTION 5 */}
          <section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
            <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
              <Scale className="w-5 h-5" />
              Réclamation auprès de l'autorité de contrôle
            </h2>
            <address className="not-italic text-slate-600 dark:text-slate-400">
              <strong>Autorité de protection des données (Belgique)</strong><br />
              Rue de la Presse, 35, 1000 Bruxelles<br />
              Site web : <a href="https://www.autoriteprotectiondonnees.be" target="_blank" rel="noopener noreferrer" className="text-gise-accent hover:underline">www.autoriteprotectiondonnees.be</a>
            </address>
          </section>

        </div>
      </main>

      {/* FOOTER */}
      <footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
        <p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
      </footer>
    </div>
  );
}