landing-page-GISE/src/pages/ConditionsGenerales.tsx

import { FileText, Briefcase, Lock, Scale, FileCheck } from 'lucide-react';
import LegalLayout from '@layouts/LegalLayout';

export default function ConditionsGenerales() {
  return (
    <LegalLayout>
      {/* 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>Cadre Contractuel</span>
        </div>
        <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
          Conditions Générales de Services (CGS)
        </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>
      </div>

      <div className="space-y-6">
        {/* SECTION 1 - OBJET */}
        <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">
              <FileText className="w-5 h-5" />
            </div>
            <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
              1. Objet des services
            </h2>
          </div>
          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
            Les présentes Conditions Générales de Services (CGS) ont pour objet de définir le cadre contractuel dans lequel GISE SRL fournit au Client ses services informatiques d'audit d'infrastructure, d'infogérance souveraine, d'hébergement privé et de cybersécurité.
          </p>
        </section>

        {/* SECTION 2 - OBLIGATION DE MOYENS */}
        <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">
              <Briefcase className="w-5 h-5" />
            </div>
            <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
              2. Engagements & Obligation de moyens
            </h2>
          </div>
          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
            Dans le domaine de la cybersécurité et des infrastructures informatiques, GISE déploie les meilleures pratiques du secteur et s'engage à une <strong className="text-slate-900 dark:text-white font-semibold">obligation de moyens renforcée</strong>. Nous mettons en œuvre l'ensemble des mesures techniques, organisationnelles et matérielles nécessaires pour garantir la santé, la disponibilité et la protection du système d'information du Client.
          </p>
        </section>

        {/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
        <section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 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-900/60 text-emerald-600 dark:text-emerald-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. Secret professionnel et Confidentialité
            </h2>
          </div>
          <p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
            GISE s'engage à observer le <strong className="font-semibold text-slate-900 dark:text-white">secret professionnel le plus strict</strong> concernant l'ensemble des informations, données, fichiers et documents confidentiels auxquels elle pourrait avoir accès dans le cadre de l'exécution de ses prestations.
          </p>
        </section>

        {/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
        <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. Droit applicable et juridiction compétente
            </h2>
          </div>
          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
            Les présentes Conditions Générales de Services sont régies exclusivement par le droit belge.
          </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">Juridiction exclusive</p>
            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
              En cas de litige relatif à l'interprétation, la validité ou l'exécution des présentes CGS, et à défaut de résolution amiable, les <strong className="text-slate-900 dark:text-white font-medium">tribunaux de l'arrondissement judiciaire de Bruxelles</strong> seront seuls compétents.
            </p>
          </div>
        </section>
      </div>
    </LegalLayout>
  );
}