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

export default function MentionsLegales() {
  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">
            <FileCheck className="w-3.5 h-3.5" />
            <span>Informations Réglementaires</span>
          </div>
          <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
            Mentions Légales
          </h1>
          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
            Informations légales obligatoires relatives à l'éditeur et à l'hébergeur du site web GISE, conformément au Code de droit économique belge.
          </p>
        </div>

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

          {/* SECTION 1 - COORDONNÉES DE CONTACT */}
          <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-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
                <Mail className="w-5 h-5" />
              </div>
              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                1. Coordonnées de contact
              </h2>
            </div>
            
            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
              Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez contacter l'équipe GISE :
            </p>

            <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80 inline-block w-full sm:w-auto">
              <div className="flex items-center gap-2.5 text-xs sm:text-sm text-slate-800 dark:text-slate-200">
                <Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
                <span><strong className="font-semibold text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
              </div>
            </div>
          </section>

          {/* SECTION 2 - HÉBERGEMENT DU SITE */}
          <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 du site
              </h2>
            </div>

            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
              Conformément à nos engagements de souveraineté numérique et de protection des données B2B :
            </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.5 text-slate-700 dark:text-slate-300">
              <p className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-emerald-500" />
                <span><strong className="font-semibold text-slate-900 dark:text-white">Hébergeur :</strong> Infrastructure privée GISE</span>
              </p>
              <p className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-emerald-500" />
                <span><strong className="font-semibold text-slate-900 dark:text-white">Localisation des serveurs :</strong> Centre de données situé en Belgique (Union Européenne)</span>
              </p>
              <p className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-emerald-500" />
                <span><strong className="font-semibold text-slate-900 dark:text-white">Protection réseau :</strong> Cloudflare & Pare-feu OPNsense</span>
              </p>
            </div>
          </section>

          {/* SECTION 3 - PROPRIÉTÉ INTELLECTUELLE */}
          <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-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
                <Lock className="w-5 h-5" />
              </div>
              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                3. Propriété intellectuelle
              </h2>
            </div>

            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
              L'ensemble du contenu présent sur le site web GISE (textes, graphismes, logos, icônes, éléments visuels, structure du site) est la propriété exclusive de GISE SRL, sauf mention contraire. Toute reproduction ou représentation totale ou partielle est interdite sans autorisation préalable.
            </p>
          </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>
  );
}