// FAQ — overlay auto-géré, s'ouvre via window.cplFaq.open() ou l'événement 'cpl-faq-open'
const FAQ_ITEMS = [
  {
    q: 'Combien coûte un projet d\'automatisation ?',
    a: 'Chaque mandat est chiffré après le diagnostic gratuit, en fonction de la complexité et du nombre d\'outils à connecter. Vous recevez un devis fixe avant tout engagement — pas de facturation surprise à l\'heure. Le diagnostic vous donne aussi une estimation du temps récupéré, pour juger le retour sur investissement avant de signer.'
  },
  {
    q: 'Combien de temps avant de voir des résultats ?',
    a: 'La plupart des workflows passent en production en 2 à 6 semaines après le diagnostic. Vous voyez le workflow tourner sur vos propres données dès la deuxième semaine de construction, et les gains de temps sont mesurables dès la mise en service.'
  },
  {
    q: 'Mes outils actuels sont-ils compatibles ?',
    a: 'Très probablement. Nous travaillons avec les outils que les PME utilisent déjà : Google Workspace, Microsoft 365, QuickBooks, Shopify, HubSpot, Slack, Excel... Si un outil expose une API — et c\'est le cas de la grande majorité des logiciels modernes — on peut le connecter. Le diagnostic le confirme avant tout engagement.'
  },
  {
    q: 'Qu\'arrive-t-il si un workflow brise ?',
    a: 'Chaque workflow est livré avec une gestion d\'erreurs et des alertes automatiques : si quelque chose cloche, vous (et nous) le savons immédiatement, et les données en attente sont conservées — rien ne se perd. Nos contrats de support couvrent la correction et l\'adaptation quand vos outils évoluent.'
  },
  {
    q: 'Mes données sont-elles en sécurité ?',
    a: 'Vos données restent dans vos outils — nous ne créons pas de copie centrale. Les connexions utilisent les mécanismes d\'authentification officiels de chaque plateforme (OAuth, clés API restreintes), et les accès qui nous sont accordés sont limités au strict nécessaire, documentés, et révocables en tout temps.'
  },
  {
    q: 'Faut-il des compétences techniques à l\'interne ?',
    a: 'Non. Nous livrons chaque workflow avec une documentation simple et une formation de votre équipe. Le quotidien ne demande aucune compétence technique : les workflows tournent seuls, et vous gardez un canal direct avec nous pour les ajustements.'
  },
  {
    q: 'Pourquoi automatiser plutôt qu\'embaucher ?',
    a: 'Ce n\'est pas l\'un ou l\'autre. L\'automatisation élimine les tâches répétitives à faible valeur — saisie, copier-coller, consolidation — pour que vos employés actuels (et futurs) passent leur temps sur ce qui demande du jugement humain. C\'est souvent le moyen le plus rapide de redonner de la capacité à une équipe déjà en place.'
  },
  {
    q: 'Par où commencer ?',
    a: 'Par le diagnostic gratuit de 30 minutes. Vous nous décrivez un processus qui vous pèse, on évalue ensemble si l\'automatisation est pertinente — et si elle ne l\'est pas, on vous le dit franchement. Aucun engagement.'
  }
];

const FAQModal = () => {
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener('cpl-faq-open', onOpen);
    return () => window.removeEventListener('cpl-faq-open', onOpen);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  if (!open) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="faq-title"
      onClick={() => setOpen(false)}
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: 'color-mix(in oklab, var(--bg) 80%, transparent)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 'clamp(16px, 4vw, 48px)',
        animation: 'legalFadeIn .25s ease'
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: 'relative',
          width: '100%', maxWidth: 880, maxHeight: '85vh',
          background: 'var(--bg-2)',
          border: '1px solid var(--line-strong)',
          borderRadius: 16,
          overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
          boxShadow: '0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,212,242,0.1)',
          animation: 'legalSlideUp .35s cubic-bezier(0.2, 0.8, 0.2, 1)'
        }}
      >
        <header style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 28px',
          borderBottom: '1px solid var(--line)',
          background: 'color-mix(in oklab, var(--surface) 60%, transparent)',
          flexShrink: 0
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="live-dot"></span>
            <div>
              <div className="mono" style={{ color: 'var(--cyan)' }}>// questions.fréquentes</div>
              <h2 id="faq-title" style={{ margin: '4px 0 0', fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>
                FAQ
              </h2>
            </div>
          </div>
          <button
            onClick={() => setOpen(false)}
            aria-label="Fermer"
            style={{
              width: 36, height: 36, borderRadius: 999,
              border: '1px solid var(--line-strong)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--fg-dim)'
            }}
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </button>
        </header>

        <div style={{ padding: '16px 28px 32px', overflowY: 'auto' }}>
          {FAQ_ITEMS.map((item, i) => {
            const isActive = active === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                <button
                  onClick={() => setActive(isActive ? -1 : i)}
                  aria-expanded={isActive}
                  style={{
                    width: '100%', textAlign: 'left',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16,
                    padding: '20px 0'
                  }}
                >
                  <span style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
                    <span className="mono" style={{ color: isActive ? 'var(--cyan)' : 'var(--fg-mute)', flexShrink: 0 }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <span style={{ fontSize: 17, fontWeight: 500, color: isActive ? 'var(--fg)' : 'var(--fg-dim)', letterSpacing: '-0.01em' }}>
                      {item.q}
                    </span>
                  </span>
                  <span className="mono" style={{ color: 'var(--cyan)', flexShrink: 0 }}>{isActive ? '−' : '+'}</span>
                </button>
                {isActive && (
                  <p style={{
                    margin: 0, padding: '0 0 22px 36px',
                    fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg-dim)', maxWidth: 680
                  }}>
                    {item.a}
                  </p>
                )}
              </div>
            );
          })}

          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 14.5, color: 'var(--fg-dim)' }}>Votre question n'est pas ici ?</span>
            <a
              href={(window.CPL_BASE || '') + '#contact'}
              onClick={() => setOpen(false)}
              className="btn btn-cyan"
              style={{ padding: '11px 18px', fontSize: 14 }}
            >
              Posez-la directement →
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

window.cplFaq = { open() { window.dispatchEvent(new CustomEvent('cpl-faq-open')); } };

Object.assign(window, { FAQModal });
