// ── Page FAQ — accordéon éditorial par catégorie ─────────────

const FAQ_DATA = [
  {
    name: 'Sécurité & Conformité',
    icon: 'shield',
    items: [
      {
        q: "La plateforme est-elle conforme au RGPD et à l'AI Act ?",
        a: "Oui. La plateforme est conçue pour être pleinement conforme aux réglementations en vigueur, notamment le RGPD et l'AI Act.\n\nNous garantissons :\n• la protection et la confidentialité des données (chiffrement, contrôle d'accès strict)\n• une gestion transparente des traitements et des finalités\n• la minimisation et l'hébergement sécurisé des données en Europe\n• des mécanismes d'explicabilité et de supervision humaine pour l'IA\n\nNotre démarche s'appuie également sur les standards ISO 27001 / ISO 27701.",
      },
      {
        q: "Comment garantissez-vous la souveraineté et le contrôle des données ?",
        a: "Nous garantissons la souveraineté et le contrôle des données à chaque niveau :\n\n• Hébergement en Europe, chez des fournisseurs conformes aux exigences réglementaires\n• Données cloisonnées par client — aucune mutualisation ni réutilisation\n• Aucun transfert hors UE sans cadre légal strict\n• Maîtrise des accès : authentification forte, traçabilité complète\n• Possibilité d'hébergement dédié ou sur votre propre infrastructure\n• Réversibilité totale : vous récupérez ou supprimez vos données à tout moment\n\nVous restez propriétaire et maître de vos données, en permanence.",
      },
    ],
  },
  {
    name: 'Intégration & Technique',
    icon: 'target',
    items: [
      {
        q: "Miikaa est-il compatible avec mon LMS ?",
        a: "Oui. Miikaa exporte nativement en SCORM 1.2 et SCORM 2004, les formats supportés par tous les LMS majeurs : Moodle, 360Learning, Docebo, TalentLMS, Cornerstone, etc.",
      },
      {
        q: "L'outil de roleplay est-il compatible avec mon ATS ?",
        a: "Oui. Miikaa remonte automatiquement les résultats vers les ATS les plus utilisés du marché : Workday, SAP SuccessFactors, Oracle Taleo, Cornerstone, Greenhouse, Lever, SmartRecruiters ou iCIMS.\n\nLe rapport intégré contient le scoring, les compétences observées et un lien vers le replay de la simulation. Nous sommes également compatibles xAPI / Tin Can et SCORM.",
      },
      {
        q: "Combien de temps faut-il pour intégrer Miikaa dans notre LMS ?",
        a: "La plupart de nos clients sont opérationnels en moins d'une semaine. L'intégration consiste à importer un package SCORM dans votre LMS — comme n'importe quel module e-learning. Notre équipe vous accompagne à chaque étape.",
      },
      {
        q: "Les données des apprenants transitent-elles par vos serveurs ?",
        a: "Non. La simulation IA tourne entièrement dans le navigateur de l'apprenant. Seules les données de complétion SCORM (score, temps) sont transmises à votre LMS selon vos paramètres habituels.",
      },
    ],
  },
  {
    name: 'Fonctionnalités',
    icon: 'sparkle',
    items: [
      {
        q: "Les scénarios sont-ils personnalisables ?",
        a: "Oui, tous les scénarios sont entièrement personnalisables. Vous définissez le contexte, le rôle de l'IA, les objectifs pédagogiques et les critères d'évaluation — sans aucune compétence technique requise.",
      },
      {
        q: "Comment l'IA évalue-t-elle les compétences ?",
        a: "Miikaa analyse en temps réel le discours, le ton, l'empathie et la pertinence des réponses. Chaque session génère un rapport détaillé avec des scores par compétence, des verbatims clés et des axes de progression concrets.",
      },
      {
        q: "L'IA peut-elle simuler différents profils d'interlocuteurs ?",
        a: "Oui. Vous configurez le niveau de difficulté, le caractère de l'interlocuteur IA (agressif, hésitant, collaboratif, sceptique…) et le contexte métier pour chaque scénario. Jusqu'à 9 profils de personas disponibles.",
      },
    ],
  },
  {
    name: 'Tarification',
    icon: 'users',
    items: [
      {
        q: "Quel est le modèle de tarification ?",
        a: "Miikaa propose des tarifs sur devis selon votre volume d'utilisateurs et vos besoins. Contactez-nous pour une proposition personnalisée adaptée à votre organisation.",
      },
      {
        q: "Y a-t-il une version d'essai ?",
        a: "Oui. Nous proposons une démo personnalisée et une période d'essai pour vous permettre de tester nos simulations directement dans votre contexte, avec un scénario issu de votre métier.",
      },
    ],
  },
];

const ICON_MAP = {
  shield:  () => <Mk2Shield size={16}/>,
  target:  () => <Mk2Target size={16}/>,
  sparkle: () => <Mk2Sparkle size={16}/>,
  users:   () => <Mk2Users size={16}/>,
};

function FaqItem({ q, a, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom:'1px solid var(--mk2-hair)' }}>
      <button
        onClick={onToggle}
        style={{
          width:'100%', textAlign:'left',
          padding:'20px 0', background:'none', border:'none', cursor:'pointer',
          display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:20,
        }}
      >
        <span style={{
          fontFamily:'var(--mk2-sans)', fontWeight:500, fontSize:16,
          color:'var(--mk2-text)', lineHeight:1.45, textAlign:'left',
        }}>
          {q}
        </span>
        <span style={{
          width:24, height:24, borderRadius:'50%', flexShrink:0, marginTop:1,
          border:'1px solid var(--mk2-hair)',
          display:'grid', placeItems:'center',
          color: isOpen ? 'var(--mk2-ember)' : 'var(--mk2-text-2)',
          fontWeight:300, fontSize:18, lineHeight:1,
          transition:'all .2s',
          background: isOpen ? 'var(--mk2-clay)' : 'transparent',
          borderColor: isOpen ? 'transparent' : 'var(--mk2-hair)',
        }}>
          {isOpen ? '−' : '+'}
        </span>
      </button>

      <div style={{
        overflow:'hidden',
        maxHeight: isOpen ? 600 : 0,
        opacity: isOpen ? 1 : 0,
        transition:'max-height .32s cubic-bezier(0.22,1,0.36,1), opacity .22s ease',
      }}>
        <div style={{ paddingBottom:24 }}>
          {a.split('\n').map((line, i) => {
            if (line.startsWith('•')) {
              return (
                <div key={i} style={{ display:'flex', gap:10, marginTop:6 }}>
                  <span style={{ color:'var(--mk2-ember)', flexShrink:0, marginTop:3 }}>
                    <Mk2Check size={13}/>
                  </span>
                  <span className="mk2-body" style={{ fontSize:14, lineHeight:1.65 }}>
                    {line.slice(1).trim()}
                  </span>
                </div>
              );
            }
            if (line.trim() === '') return <div key={i} style={{ height:10 }}/>;
            return (
              <p key={i} className="mk2-body" style={{ fontSize:14, lineHeight:1.7, margin:0 }}>
                {line}
              </p>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function Mk2PageFAQ({ onNav }) {
  const [openItem, setOpenItem] = React.useState(null);

  const toggle = (key) => setOpenItem(prev => prev === key ? null : key);

  return (
    <main>
      {/* ── En-tête ─────────────────────────────────────────── */}
      <section style={{ padding:'80px 0 56px', background:'var(--mk2-canvas-2)', position:'relative', overflow:'hidden' }}>
        <div aria-hidden style={{
          position:'absolute', left:'-8%', bottom:'-30%',
          width:360, height:360, borderRadius:'50%',
          background:'radial-gradient(circle, rgba(200,90,60,0.1), transparent 70%)',
          pointerEvents:'none',
        }}/>
        <div className="mk2-container" style={{ maxWidth:840, position:'relative' }}>
          <div className="mk2-eyebrow" style={{ marginBottom:14 }}>FAQ</div>
          <h1 className="mk2-display" style={{ fontSize:'clamp(40px, 6vw, 68px)', marginBottom:20 }}>
            Questions <span className="mk2-italic" style={{ color:'var(--mk2-ember)' }}>fréquentes</span>
          </h1>
          <p className="mk2-body" style={{ fontSize:17, maxWidth:520, color:'var(--mk2-text-2)' }}>
            Tout ce que vous devez savoir sur Miikaa, ses intégrations et ses simulations IA.
          </p>
        </div>
      </section>

      {/* ── Contenu ──────────────────────────────────────────── */}
      <section style={{ padding:'72px 0 100px' }}>
        <div style={{ maxWidth:840, margin:'0 auto', padding:'0 24px' }}>
          {FAQ_DATA.map((cat, ci) => {
            const IconCmp = ICON_MAP[cat.icon];
            return (
              <div key={ci} style={{ marginBottom:64 }}>
                {/* Titre de catégorie */}
                <div style={{
                  display:'flex', alignItems:'center', gap:10,
                  marginBottom:8, paddingBottom:20,
                  borderBottom:'2px solid var(--mk2-hair-strong)',
                }}>
                  <div style={{
                    width:30, height:30, borderRadius:8,
                    background:'var(--mk2-clay)',
                    display:'grid', placeItems:'center',
                    color:'var(--mk2-ember)', flexShrink:0,
                  }}>
                    {IconCmp && <IconCmp/>}
                  </div>
                  <h2 style={{
                    fontFamily:'var(--mk2-serif)',
                    fontVariationSettings:'"opsz" 48',
                    fontSize:20, fontWeight:400,
                    color:'var(--mk2-text)', letterSpacing:'-0.01em',
                  }}>
                    {cat.name}
                  </h2>
                </div>

                {/* Items accordéon */}
                {cat.items.map((item, ii) => {
                  const key = `${ci}-${ii}`;
                  return (
                    <FaqItem
                      key={key}
                      q={item.q}
                      a={item.a}
                      isOpen={openItem === key}
                      onToggle={() => toggle(key)}
                    />
                  );
                })}
              </div>
            );
          })}
        </div>
      </section>

      {/* ── CTA ─────────────────────────────────────────────── */}
      <section style={{ padding:'80px 0', background:'var(--mk2-canvas-2)' }}>
        <div className="mk2-container" style={{ maxWidth:600, margin:'0 auto', textAlign:'center' }}>
          <p className="mk2-eyebrow" style={{ marginBottom:14 }}>Besoin d'aller plus loin ?</p>
          <h2 className="mk2-h2" style={{ fontSize:'clamp(26px, 3vw, 36px)', marginBottom:16 }}>
            Vous avez d'autres questions ?
          </h2>
          <p className="mk2-body" style={{ marginBottom:32, maxWidth:440, margin:'0 auto 32px' }}>
            Notre équipe vous répond personnellement et peut organiser une démo adaptée à votre contexte.
          </p>
          <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
            <button className="mk2-btn mk2-btn-primary" style={{ padding:'13px 26px', fontSize:15 }} onClick={() => onNav?.('contact')}>
              Prendre rendez-vous <Mk2Arrow size={15}/>
            </button>
            <a href="mailto:contact@miikaa.io" className="mk2-btn mk2-btn-secondary" style={{ padding:'13px 22px', fontSize:15 }}>
              Écrire à l'équipe <Mk2Chat size={14}/>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Mk2PageFAQ = Mk2PageFAQ;
