import { Activity, Check, Server, ShieldCheck } from "lucide-react";

export default function EngagementsSection() {
    return (
        <section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

                <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
                    <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
                        Prise en charge globale
                    </span>
                    <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
                        Les 3 piliers de votre tranquillité informatique
                    </h2>
                    <p className="text-slate-600 dark:text-slate-400 text-sm">
                        Nous assumons la responsabilité technique complète de vos équipements et de vos données.
                    </p>
                </div>

                <div className="grid md:grid-cols-3 gap-6">

                    {/* Pilier 1 */}
                    <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
                        <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
                            <Server className="h-6 w-6" />
                        </div>
                        <h3 className="text-xl font-bold text-slate-900 dark:text-white">1. Cloud Privé Souverain & Accès Sécurisé</h3>
                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                            Vos logiciels et fichiers sont hébergés sur nos propres serveurs <strong>100% situés en Belgique</strong>. Vos équipes travaillent depuis le bureau ou à distance en toute sécurité.
                        </p>
                        <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Données confidentielles conservées en Belgique</li>
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Accès à distance simple et rapide pour vos employés</li>
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Protection contre le vol ou la perte de documents</li>
                        </ul>
                    </div>

                    {/* Pilier 2 */}
                    <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
                        <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
                            <ShieldCheck className="h-6 w-6" />
                        </div>
                        <h3 className="text-xl font-bold text-slate-900 dark:text-white">2. Protection Anti-Piratage & Sauvegardes</h3>
                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                            Vos réseaux sont protégés contre les virus et le chantage au chiffrement. Vos fichiers essentiels sont <strong>sauvegardés automatiquement hors-site</strong>.
                        </p>
                        <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Blocage automatique des attaques et piratages</li>
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Sauvegardes quotidiennes isolées et sécurisées</li>
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Restauration de vos fichiers en cas de problème</li>
                        </ul>
                    </div>

                    {/* Pilier 3 */}
                    <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
                        <div className="h-12 w-12 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
                            <Activity className="h-6 w-6" />
                        </div>
                        <h3 className="text-xl font-bold text-slate-900 dark:text-white">3. Supervision 24/7 & Assistance VIP</h3>
                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                            Nous surveillons l'état de votre matériel en continu pour <strong>anticiper et corriger les pannes</strong>. Vous bénéficiez d'un contact direct avec votre spécialiste.
                        </p>
                        <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Surveillance permanente de vos serveurs</li>
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interventions préventives avant le blocage</li>
                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interlocuteur dédié sans répondeur ni robot</li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>
    );
}