import React from 'react';
import { 
  Shield, 
  ArrowLeft, 
  Database, 
  UserCheck, 
  Scale, 
  Server, 
  Moon, 
  Sun, 
  ShieldCheck,
  Lock,
  Mail,
  ExternalLink
} 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 font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">

      {/* HEADER DE NAVIGATION (Style Google Pill Bar) */}
      <header className="sticky top-0 z-40 p-3 sm:p-4">
        <div className="max-w-5xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
          
          <Link
            to="/"
            className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-xs font-semibold px-3.5 py-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Retour à l'accueil</span>
          </Link>

          <div className="flex items-center gap-3">
            {/* BOUTON THEME */}
            <button
              onClick={toggleTheme}
              className="p-2.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 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">
              <div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
                <Shield className="h-4 w-4" />
              </div>
              <span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
                GISE
              </span>
            </div>
          </div>
        </div>
      </header>

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

        {/* Header Titre */}
        <div className="mb-10 space-y-3">
          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
            <ShieldCheck className="w-3.5 h-3.5" />
            <span>Protection des Données & RGPD</span>
          </div>
          <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
            Politique de Confidentialité
          </h1>
          <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 pt-1">
            <span className="px-2.5 py-0.5 rounded-full bg-slate-200/60 dark:bg-slate-800 font-medium">
              Mise à jour : {new Date().toLocaleDateString('fr-BE')}
            </span>
          </div>
          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl pt-2">
            En tant que cabinet d'expertise en cybersécurité, la protection de vos données personnelles n'est pas seulement une obligation légale, c'est le cœur de notre métier et de notre engagement de souveraineté.
          </p>
        </div>

        <div className="space-y-6">

          {/* SECTION 1 - DONNÉES COLLECTÉES ET FINALITÉS */}
          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-5">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
                <Database className="w-5 h-5" />
              </div>
              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                1. Données collectées et finalités
              </h2>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
                <h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
                  <Mail className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                  Formulaires & Demandes d'audit
                </h3>
                <ul className="text-xs text-slate-600 dark:text-slate-400 space-y-1.5 leading-relaxed">
                  <li><strong className="text-slate-800 dark:text-slate-200">Données :</strong> Nom, e-mail professionnel, nom de l'entreprise, taille du parc, message.</li>
                  <li><strong className="text-slate-800 dark:text-slate-200">Finalité :</strong> Répondre à vos demandes de diagnostic ou établir un devis d'infogérance.</li>
                </ul>
              </div>

              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
                <h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
                  <Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                  Sécurité & Infrastructure
                </h3>
                <ul className="text-xs text-slate-600 dark:text-slate-400 space-y-1.5 leading-relaxed">
                  <li><strong className="text-slate-800 dark:text-slate-200">Données :</strong> Adresse IP anonymisée, logs de connexion, agent navigateur.</li>
                  <li><strong className="text-slate-800 dark:text-slate-200">Finalité :</strong> Prévenir les tentatives d'intrusion et garantir la stabilité du site.</li>
                </ul>
              </div>
            </div>
          </section>

          {/* SECTION 2 - HÉBERGEMENT ET PARTAGE DES DONNÉES */}
          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
                <Server className="w-5 h-5" />
              </div>
              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                2. Hébergement et non-partage des données
              </h2>
            </div>

            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
              Vos données personnelles ne sont <strong className="text-slate-900 dark:text-white font-semibold">jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales ou publicitaires.
            </p>

            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs sm:text-sm space-y-2 text-slate-700 dark:text-slate-300">
              <p className="flex items-center gap-2 font-semibold text-slate-900 dark:text-white">
                <span className="w-2 h-2 rounded-full bg-emerald-500" />
                Hébergement 100% Souverain Belge
              </p>
              <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-4">
                Toutes les données collectées au travers de nos formulaires et de la plateforme AEGIS sont hébergées sur notre propre infrastructure physique (Bare-Metal) localisée en Belgique, à l'abri du <em>Cloud Act</em> américain.
              </p>
            </div>
          </section>

          {/* SECTION 3 - VOS DROITS (RGPD) */}
          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-5">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
                <UserCheck className="w-5 h-5" />
              </div>
              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                3. Vos droits (Conformité RGPD)
              </h2>
            </div>

            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
              Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez d'un contrôle total sur vos données :
            </p>

            <div className="grid gap-3 sm:grid-cols-2 text-xs">
              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80">
                <strong className="text-slate-900 dark:text-white font-semibold block mb-1">Droit d'accès & d'export</strong>
                <span className="text-slate-600 dark:text-slate-400">Obtenir une copie complète de l'ensemble de vos données en notre possession.</span>
              </div>

              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80">
                <strong className="text-slate-900 dark:text-white font-semibold block mb-1">Droit de rectification & d'effacement</strong>
                <span className="text-slate-600 dark:text-slate-400">Corriger des informations inexactes ou demander la suppression définitive de vos données.</span>
              </div>
            </div>

            <div className="pt-2 flex flex-col sm:flex-row items-start sm:items-center gap-3 p-4 rounded-2xl bg-blue-50/60 dark:bg-blue-950/30 border border-blue-200/50 dark:border-blue-900/50 text-xs">
              <Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
              <span className="text-slate-700 dark:text-slate-300">
                Pour exercer l'un de ces droits, contactez notre Délégué à la Protection des Données (DPO) : <strong className="font-semibold text-slate-900 dark:text-white">privacy@gise.be</strong>
              </span>
            </div>
          </section>

          {/* SECTION 4 - AUTORITÉ DE CONTRÔLE */}
          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
                <Scale className="w-5 h-5" />
              </div>
              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                4. Réclamation auprès de l'autorité de contrôle
              </h2>
            </div>

            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
              Si vous estimez que le traitement de vos données ne respecte pas le cadre légal belge et européen, vous pouvez introduire une réclamation auprès de l'autorité compétente :
            </p>

            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs text-slate-700 dark:text-slate-300 space-y-1.5">
              <p className="font-bold text-slate-900 dark:text-white text-sm">Autorité de Protection des Données (APD)</p>
              <p>Rue de la Presse, 35 — 1000 Bruxelles, Belgique</p>
              <p className="pt-1">
                <a
                  href="https://www.autoriteprotectiondonnees.be"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 font-semibold text-blue-600 dark:text-blue-400 hover:underline"
                >
                  <span>www.autoriteprotectiondonnees.be</span>
                  <ExternalLink className="w-3 h-3" />
                </a>
              </p>
            </div>
          </section>

        </div>
      </main>

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

    </div>
  );
}