function FAQ() {
  const items = [
    {
      q: "Combien de temps pour mettre en place ?",
      a: "Comptez 2 à 4 semaines selon le nombre de résultats et leur complexité — un résultat simple est livré rapidement, une combinaison avec IA et connexions comptables demande un peu plus de temps. Démos hebdomadaires durant toute la construction, de la signature à la mise en production sans surprise."
    },
    {
      q: "Mes données sont-elles vraiment en sécurité ?",
      a: "L'hébergement du système et le stockage des données sont 100% en Suisse, chez Infomaniak à Genève (ISO 27001) : stockage, workflows et logs y restent. Chiffrement TLS 1.3 en transit, AES-256 au repos. Conformité à la loi suisse sur la protection des données (LPD). 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."
    },
    {
      q: "Et si l'IA se trompe ?",
      a: "Garde-fous à tous les niveaux : preview obligatoire avant envoi pour les emails sensibles, validation humaine paramétrable par type de dossier, audit log complet, et contrôle humain via dashboard. Vous gardez la main."
    },
    {
      q: "Quel ROI puis-je attendre ?",
      a: "Avec un ensemble de résultats enrichis par l'IA, une fiduciaire peut récupérer 5 à 10h par semaine, soit l'équivalent de 4'000 à 8'000 CHF/mois en temps salarié — un investissement généralement rentabilisé en moins de 2 mois."
    },
    {
      q: "Vous travaillez avec quelle taille de fiduciaire ?",
      a: "De 2 à 50 collaborateurs. En dessous, l'investissement n'est pas justifié. Au-dessus, les besoins deviennent souvent suffisamment spécifiques pour nécessiter une approche encore plus sur-mesure (parlons-en)."
    },
    {
      q: "La maintenance mensuelle, c'est quoi exactement ?",
      a: "Surveillance continue, correctifs, mises à jour de sécurité, coûts d'infrastructure et d'API IA, support courant, ajustements légers du workflow. Le tout inclus dans l'abonnement, dans la limite d'un usage raisonnable (détail dans nos conditions générales)."
    },
    {
      q: "Vous intégrez quels outils ?",
      a: "Gmail, Microsoft 365, Bexio, Abacus, Topal, Sage — et plus de 500 autres outils via API. Si votre logiciel n'est pas listé, il a quasi-systématiquement une API ouverte que nous pouvons connecter."
    },
  ];

  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" className="relative py-28 sm:py-36 bg-paper-50 text-ink-900 overflow-hidden">
      <div className="absolute inset-0 tech-grid-light opacity-40 [mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_75%)]"></div>
      <div className="relative mx-auto max-w-4xl px-5 sm:px-8">
        <div className="text-center">
          <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>08 · FAQ
            </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">Les questions que vous nous posez le plus.</h2>
          </Reveal>
        </div>

        <div className="mt-14 divide-y divide-ink-900/10 border-y border-ink-900/10">
          {items.map((it, i) => {
            const isOpen = i === open;
            return (
              <Reveal key={it.q} delay={i * 40}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="w-full text-left py-6 group"
                  aria-expanded={isOpen}
                >
                  <div className="flex items-start gap-4">
                    <span className="font-mono text-[11px] mt-1 text-ink-900/40 w-7 shrink-0">0{i + 1}</span>
                    <span className="flex-1 font-display text-[18px] sm:text-[20px] font-medium tracking-tight text-ink-900 text-balance">{it.q}</span>
                    <span className={`mt-0.5 grid place-items-center w-7 h-7 rounded-full border transition-all ${isOpen ? 'bg-ink-900 text-white border-ink-900 rotate-180' : 'border-ink-900/20 text-ink-900'}`}>
                      {isOpen ? <Icon.Minus className="w-3.5 h-3.5" /> : <Icon.Plus className="w-3.5 h-3.5" />}
                    </span>
                  </div>
                  <div className={`grid transition-all duration-500 ${isOpen ? 'grid-rows-[1fr] opacity-100 mt-4' : 'grid-rows-[0fr] opacity-0 mt-0'}`}>
                    <div className="overflow-hidden">
                      <p className="pl-11 pr-10 text-[15px] text-ink-900/70 leading-relaxed">{it.a}</p>
                    </div>
                  </div>
                </button>
              </Reveal>
            );
          })}
        </div>

        <Reveal>
          <div className="mt-12 text-center text-ink-900/60">
            Une autre question ? <a href="mailto:contact@helloflowo.ch" className="font-medium text-ink-900 underline underline-offset-4 decoration-violet-600 decoration-2">Écrivez-nous</a>, nous vous répondons sous 24h ouvrées.
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

window.FAQ = FAQ;