function Footer({ onOpenModal }) {
  const cols = [
    {
      h: 'Produit',
      links: [
        { l: 'Solutions', href: '#solutions' },
        { l: 'Vitrine', href: '#vitrine' },
        { l: 'Le modèle & prix', href: '#niveaux' },
        { l: 'Configurateur', href: '/configurateur' },
        { l: 'Process', href: '#process' },
      ],
    },
    {
      h: 'Confiance',
      links: [
        { l: 'Sécurité', href: '#securite' },
        { l: 'FAQ', href: '#faq' },
        { l: 'Mentions légales', onClick: () => onOpenModal('mentions') },
        { l: 'Confidentialité', onClick: () => onOpenModal('confidentialite') },
        { l: 'Sécurité (détaillée)', onClick: () => onOpenModal('securite') },
      ],
    },
    {
      h: 'Contact',
      links: [
        { l: 'contact@helloflowo.ch', href: 'mailto:contact@helloflowo.ch' },
        { l: 'Réserver un appel', href: 'mailto:contact@helloflowo.ch?subject=Appel%20découverte%20Flowo' },
        { l: 'LinkedIn', href: 'https://www.linkedin.com/in/noe-kohler', ext: true },
      ],
    },
  ];
  return (
    <footer className="relative bg-ink-950 text-paper-100 border-t border-paper-300/8 overflow-hidden">
      <div className="absolute inset-0 tech-grid opacity-20"></div>
      <div className="absolute -top-32 left-1/4 w-[400px] h-[400px] rounded-full bg-violet-600/15 blur-3xl"></div>

      <div className="relative mx-auto max-w-7xl px-5 sm:px-8 pt-20 pb-10">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-5">
            <Logo />
            <p className="mt-5 max-w-sm text-[14.5px] text-paper-100/65 leading-relaxed">
              Automatisations sur-mesure pour fiduciaires suisses. Construites en Suisse, hébergées en Suisse.
            </p>
            <div className="mt-7 flex items-center gap-4">
              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-paper-300/5 border border-paper-300/10 text-[11.5px]">
                <span className="inline-block w-3 h-2 rounded-sm bg-red-500"></span> Made in Switzerland
              </div>
              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-paper-300/5 border border-paper-300/10 text-[11.5px]">
                <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>
                Systèmes en ligne
              </div>
              <a
                href="https://www.linkedin.com/in/noe-kohler"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn Flowo"
                className="w-8 h-8 rounded-full bg-paper-300/5 border border-paper-300/10 grid place-items-center text-paper-100/65 hover:text-paper-50 hover:border-paper-300/30 hover:bg-paper-300/10 transition"
              >
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z"/></svg>
              </a>
            </div>
          </div>

          <div className="lg:col-span-7 grid sm:grid-cols-3 gap-8">
            {cols.map((c) => (
              <div key={c.h}>
                <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-paper-300/40">{c.h}</div>
                <ul className="mt-4 space-y-3">
                  {c.links.map((lnk) => (
                    <li key={lnk.l}>
                      {lnk.onClick ? (
                        <button onClick={lnk.onClick} className="text-[13.5px] text-paper-100/75 hover:text-paper-50 transition text-left">{lnk.l}</button>
                      ) : (
                        <a href={lnk.href} target={lnk.ext ? '_blank' : undefined} rel={lnk.ext ? 'noopener noreferrer' : undefined} className="text-[13.5px] text-paper-100/75 hover:text-paper-50 transition">{lnk.l}</a>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* big wordmark */}
        <div className="mt-16 pt-10 border-t border-paper-300/8 overflow-hidden">
          <div className="font-display text-[18vw] sm:text-[16vw] font-semibold tracking-[-0.05em] leading-[0.85] bg-gradient-to-b from-paper-50/[0.08] to-transparent bg-clip-text text-transparent select-none -mb-[3vw]">
            flowo
          </div>
        </div>

        <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-[12px] font-mono text-paper-300/40">
          <div>© 2026 Flowo · Made in Switzerland 🇨🇭</div>
          <div className="flex items-center gap-4">
            <button onClick={() => onOpenModal('mentions')} className="hover:text-paper-100 transition">Mentions</button>
            <button onClick={() => onOpenModal('confidentialite')} className="hover:text-paper-100 transition">Confidentialité</button>
            <button onClick={() => onOpenModal('securite')} className="hover:text-paper-100 transition">Sécurité</button>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* --- Modal --- */
function Modal({ open, kind, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const content = useMemo(() => {
    if (kind === 'mentions') return {
      title: 'Mentions légales',
      sections: [
        { h: 'Éditeur du site', body: 'Flowo — entreprise individuelle de Noé Kohler, Val Terbi, canton du Jura, Suisse. Toute correspondance par email à contact@helloflowo.ch.' },
        { h: 'Hébergement du site', body: 'Vercel Inc., 440 N Barranca Avenue #4133, Covina, CA 91723, États-Unis. Le présent site marketing est hébergé chez Vercel ; aucune donnée de dossier client n\'y est stockée. Les données techniques de navigation des visiteurs sont traitées par Vercel (voir Politique de confidentialité).' },
        { h: 'Hébergement des automatisations', body: 'Infomaniak Network SA, Rue Eugène-Marziano 25, 1227 Genève, Suisse. Société certifiée ISO 27001 (sécurité de l\'information), ISO 9001 (qualité), ISO 14001 (environnement) et ISO 50001 (efficacité énergétique). C\'est sur cette infrastructure suisse que sont déployés workflows, données et logs des clients Flowo.' },
        { h: 'Droit applicable', body: 'Droit suisse. For juridique au siège de Flowo, dans le canton du Jura — sous réserve des fors impératifs prévus par la loi.' },
        { h: 'Propriété intellectuelle', body: 'L\'ensemble des contenus de ce site (textes, visuels, code) est la propriété de Noé Kohler (Flowo), sauf mention contraire. Toute reproduction sans autorisation écrite préalable est interdite.' },
      ],
    };
    if (kind === 'confidentialite') return {
      title: 'Politique de confidentialité',
      sections: [
        { h: 'Engagement de confidentialité fiduciaire', body: 'Flowo a conscience que les fiduciaires manipulent des informations strictement confidentielles. Toute notre architecture est conçue pour respecter cette obligation : isolation par client, accès restreint, journalisation complète.' },
        { h: 'Localisation des données', body: 'L\'infrastructure d\'automatisation (workflows, stockage, journaux, sauvegardes) est hébergée en Suisse, chez Infomaniak à Genève — les données métier de nos clients (dossiers, documents, courriels traités) y sont stockées. Seules les fonctions d\'intelligence artificielle (mode avec IA, optionnel) transmettent ponctuellement le contenu à traiter à OpenAI Ireland Ltd — voir Sous-traitants. Chiffrement TLS 1.3 en transit, AES-256 au repos.' },
        { h: 'Données des visiteurs du site', body: 'Le site helloflowo.ch est hébergé par Vercel Inc. (États-Unis) : des données techniques de connexion (adresse IP, type de navigateur, pages consultées) sont traitées dans ses journaux de serveur, à des fins de fourniture et de sécurisation du site. Vercel est certifiée au Swiss-U.S. Data Privacy Framework, reconnu par le Conseil fédéral comme offrant un niveau de protection adéquat. Le site charge en outre certaines ressources statiques (polices, bibliothèques) depuis des réseaux de diffusion de contenu tiers. Aucune donnée de dossier client ne transite par cette infrastructure.' },
        { h: 'Vos droits (LPD)', body: 'Conformément à la loi fédérale sur la protection des données, vous disposez d\'un droit d\'accès (art. 25 LPD), de rectification et d\'effacement (art. 32 LPD), de remise et de transmission de vos données (art. 28 LPD), ainsi que d\'opposition (art. 30 LPD). Demandes à adresser à contact@helloflowo.ch — réponse dans les 30 jours.' },
        { h: 'Sous-traitants', body: 'Pour les données de nos clients : Infomaniak Network SA (Genève) pour l\'hébergement, et OpenAI Ireland Ltd (via API professionnelle) pour les fonctions d\'intelligence artificielle (mode avec IA, optionnel) — conformément aux conditions de l\'API OpenAI, vos données sont conservées 30 jours au maximum (détection des abus) avant suppression, sous réserve d\'obligations légales. Transfert encadré par les clauses contractuelles types reconnues par le PFPDT (art. 16 al. 2 let. d LPD). Aucun autre prestataire n\'accède aux données de vos dossiers. Pour le site marketing uniquement : Vercel Inc. (États-Unis, certifiée Swiss-U.S. Data Privacy Framework).' },
        { h: 'Cookies', body: 'Le site marketing ne dépose aucun cookie de tracking. Aucun outil d\'analytics tiers (pas de Google Analytics, pas de pixel publicitaire).' },
      ],
    };
    if (kind === 'securite') return {
      title: 'Sécurité',
      sections: [
        { h: 'Infrastructure', body: 'Hébergement Infomaniak à Genève, dans des datacenters TIER III+ situés en Suisse. Infomaniak est certifiée ISO 27001 (sécurité de l\'information), ISO 14001 (environnement) et ISO 50001 (efficacité énergétique), et alimente ses datacenters avec une électricité d\'origine 100 % renouvelable certifiée.' },
        { h: 'Chiffrement', body: 'TLS 1.3 pour toutes les communications. AES-256 pour les données au repos. La gestion des clés de chiffrement s\'effectue en Suisse.' },
        { h: 'Authentification', body: 'Les accès administrateur sont protégés par une authentification à deux facteurs. Les mots de passe ne sont jamais stockés en clair (hachage selon les standards actuels de l\'industrie). Les clés d\'API sont stockées de manière chiffrée et renouvelées en cas de besoin.' },
        { h: 'Journalisation', body: 'Les actions effectuées par les workflows (lectures, écritures, envois, suppressions) sont journalisées avec horodatage et contexte. Ces journaux peuvent vous être remis sur demande.' },
        { h: 'Sauvegardes', body: 'Sauvegardes quotidiennes chiffrées, conservées sur infrastructure suisse. Des restaurations sont testées régulièrement afin de garantir l\'intégrité des données et la capacité de reprise.' },
        { h: 'Conformité', body: 'Traitements conformes à la loi fédérale sur la protection des données (LPD). Un contrat de sous-traitance de données (DPA) au sens de l\'art. 9 LPD est disponible sur demande.' },
        { h: 'Plan de continuité', body: 'Sauvegardes quotidiennes limitant la perte de données à 24 heures au maximum. Procédure de rétablissement documentée ; remise en service visée dans la journée ouvrée suivant la détection d\'un incident. En cas de violation de la sécurité affectant vos données, nous vous informons dans les meilleurs délais, conformément à l\'art. 24 LPD.' },
      ],
    };
    return null;
  }, [kind]);

  if (!open || !content) return null;

  return (
    <div className="fixed inset-0 z-[80] grid place-items-end sm:place-items-center p-0 sm:p-6" onClick={onClose}>
      <div className="absolute inset-0 bg-ink-950/80 backdrop-blur" style={{ animation: 'fadeIn .25s ease' }}></div>
      <div onClick={(e) => e.stopPropagation()} className="relative w-full sm:max-w-2xl max-h-[92vh] overflow-y-auto rounded-t-3xl sm:rounded-3xl bg-paper-50 text-ink-900 shadow-2xl">
        <div className="sticky top-0 bg-paper-50/95 backdrop-blur border-b border-ink-900/10 px-6 sm:px-8 py-5 flex items-center justify-between">
          <div>
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink-900/50">Légal</div>
            <h3 className="mt-1 font-display text-[22px] sm:text-[26px] font-medium tracking-tight">{content.title}</h3>
          </div>
          <button onClick={onClose} className="w-9 h-9 rounded-full border border-ink-900/15 hover:bg-ink-900 hover:text-white grid place-items-center transition">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 5l14 14M19 5L5 19" /></svg>
          </button>
        </div>
        <div className="px-6 sm:px-8 py-7 space-y-7">
          {content.sections.map((s, i) => (
            <div key={i}>
              <div className="flex items-start gap-3">
                <span className="font-mono text-[10.5px] text-ink-900/40 mt-1">0{i + 1}</span>
                <div>
                  <h4 className="font-display text-[16.5px] font-medium tracking-tight text-ink-900">{s.h}</h4>
                  <p className="mt-2 text-[14px] text-ink-900/70 leading-relaxed">{s.body}</p>
                </div>
              </div>
            </div>
          ))}
          <div className="pt-5 mt-3 border-t border-ink-900/10 text-[12px] font-mono text-ink-900/50">
            Dernière mise à jour : juin 2026 · contact@helloflowo.ch
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Footer, Modal });
