function Sovereignty() {
  const points = [
    { h: 'Hébergement Infomaniak Genève', d: 'Serveurs physiques en Suisse, certifiés ISO 27001 et 14001.' },
    { h: 'Conformité LPD', d: 'Stockage, traitement et suppression conformes à la législation suisse sur la protection des données.' },
    { h: 'Chiffrement en transit et au repos', d: 'TLS 1.3 en transit, AES-256 au repos. Clés gérées en Suisse.' },
    { h: 'IA sous contrôle (mode avec IA)', d: 'Les fonctions d\'intelligence artificielle utilisent OpenAI Ireland Ltd, encadrées contractuellement par clauses contractuelles types (art. 16 al. 2 let. d LPD), avec une conservation de 30 jours maximum. Leur activation est optionnelle, avec votre accord.' },
    { h: 'Journalisation complète', d: 'Les actions des workflows sont tracées et horodatées. Journaux remis sur demande.' },
  ];
  return (
    <Section id="securite" className="relative py-28 sm:py-36 bg-paper-50 text-ink-900 overflow-hidden">
      <div className="absolute inset-0 tech-grid-light opacity-50 [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"></div>
      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">
          <div className="lg:col-span-6">
            <Reveal>
              <div className="inline-flex items-center gap-2 font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60">
                <span className="w-6 h-px bg-ink-900/30"></span>06 · Souveraineté
              </div>
            </Reveal>
            <Reveal delay={80}>
              <h2 className="mt-5 font-display text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight text-balance">Vos données sont <span className="italic font-serif text-violet-600">hébergées en Suisse</span>.</h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="mt-6 text-[16px] text-ink-900/70 leading-relaxed max-w-xl">
                Les fiduciaires ont une obligation de confidentialité absolue. L'hébergement du système et le stockage des données sont 100% en Suisse, chez Infomaniak à Genève (ISO 27001). Et quand l'IA entre en jeu, les fonctions d'intelligence artificielle utilisent OpenAI Ireland Ltd, encadrées contractuellement par clauses contractuelles types (art. 16 al. 2 let. d LPD), avec une conservation de 30 jours maximum — leur activation est optionnelle.
              </p>
            </Reveal>

            <div className="mt-10 grid sm:grid-cols-2 gap-x-8 gap-y-7">
              {points.map((p, i) => (
                <Reveal key={p.h} delay={100 + i * 80}>
                  <div className="flex gap-3">
                    <div className="mt-1 w-5 h-5 rounded-full bg-ink-900 text-white grid place-items-center shrink-0">
                      <Icon.Check className="w-3 h-3" />
                    </div>
                    <div>
                      <div className="font-display text-[16px] font-medium tracking-tight text-ink-900">{p.h}</div>
                      <p className="mt-1.5 text-[13.5px] text-ink-900/65 leading-relaxed">{p.d}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>

          <Reveal delay={160} className="lg:col-span-6">
            <InfraCard />
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

function InfraCard() {
  const services = [
    { name: 'Serveur Genève', meta: 'CH-GVA-01 · Infomaniak', status: '99.99% uptime', ok: true },
    { name: 'n8n Workflows', meta: 'self-hosted · v1.62', status: 'Opérationnel', ok: true },
    { name: 'API IA (optionnelle)', meta: 'OpenAI Ireland Ltd · SCC LPD', status: 'Opérationnel', ok: true },
    { name: 'Backups quotidiens', meta: '03h00 CET · chiffrés', status: 'Synchronisé', ok: true },
  ];
  return (
    <div className="relative rounded-3xl bg-ink-900 text-paper-50 p-7 sm:p-8 overflow-hidden">
      {/* Switzerland outline + glow */}
      <div className="absolute -top-12 -right-12 w-72 h-72">
        <svg viewBox="0 0 200 140" className="w-full h-full opacity-25" fill="none" stroke="#7c3aed">
          <path d="M10 70 L25 55 L45 60 L60 45 L80 50 L95 40 L120 50 L140 35 L165 55 L180 75 L170 95 L150 105 L130 100 L115 115 L95 110 L80 120 L60 110 L45 100 L25 95 Z" strokeWidth="1" />
        </svg>
      </div>
      <div className="absolute -bottom-32 -left-20 w-80 h-80 rounded-full bg-violet-600/30 blur-3xl"></div>

      <div className="relative flex items-center justify-between mb-6">
        <div>
          <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-paper-300/50">Infrastructure Flowo</div>
          <div className="mt-1 font-display text-[18px] tracking-tight">Statut temps réel</div>
        </div>
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[11px]">
          <span className="relative inline-flex w-1.5 h-1.5"><span className="absolute inset-0 rounded-full bg-emerald-400"></span><span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-60"></span></span>
          Tous systèmes opérationnels
        </div>
      </div>

      <div className="relative divide-y divide-paper-300/8">
        {services.map((s) => (
          <div key={s.name} className="py-4 flex items-center gap-4">
            <span className="relative inline-flex w-2 h-2 shrink-0">
              <span className="absolute inset-0 rounded-full bg-emerald-400"></span>
              <span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-50"></span>
            </span>
            <div className="flex-1 min-w-0">
              <div className="text-[14px] text-paper-50">{s.name}</div>
              <div className="font-mono text-[10.5px] text-paper-300/45 mt-0.5">{s.meta}</div>
            </div>
            <div className="text-[12px] font-mono text-emerald-400 text-right whitespace-nowrap">{s.status}</div>
          </div>
        ))}
      </div>

      <div className="relative mt-6 pt-5 border-t border-paper-300/8 text-[12.5px] text-paper-100/60 flex items-start gap-2">
        <svg viewBox="0 0 16 16" className="w-3.5 h-3.5 mt-0.5 shrink-0 text-violet-500"><circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="1.4" /><path d="M8 5v3l2 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
        L'hébergement du système et le stockage des données sont 100% en Suisse, chez Infomaniak à Genève. Les fonctions d'IA utilisent OpenAI Ireland Ltd, encadrées par clauses contractuelles types (art. 16 al. 2 let. d LPD), conservation 30 jours maximum — activation optionnelle.
      </div>
    </div>
  );
}

window.Sovereignty = Sovereignty;