/* global React, PageShell */

const FAQ_DATA = [
  {
    cat: 'Produit',
    questions: [
      { q: 'En quoi Virage est différent d\'un MOOC ou d\'un atelier IA classique ?',
        a: 'On combine 3 choses : 5 minutes par jour (vs des journées entières), des cas réels métier (vs des exemples génériques) et une validation par les pairs (vs un quiz solo). Le format colle au quotidien d\'une PME, pas à un programme universitaire.' },
      { q: 'Combien de temps faut-il pour voir des résultats ?',
        a: 'Premiers usages concrets dès la semaine 2. Tronc commun bouclé en semaine 1 (5 min/jour). À la semaine 6, 80% des apprenants ont validé le niveau Praticien★.' },
      { q: 'Est-ce que je peux choisir parmi les 3 cursus ou tout est imposé ?',
        a: 'Le tronc commun (semaine 1) est obligatoire pour tous. Ensuite chaque collaborateur choisit son cursus métier — Général, Technique ou Commercial. Vous pouvez aussi mixer.' },
      { q: 'Pourquoi parler de "validation par les pairs" ?',
        a: 'Vos collègues savent ce qui marche dans votre métier. Quand un commercial valide le travail d\'un autre commercial, il fait monter les deux. Et ça crée de l\'émulation, pas de la compétition.' },
      { q: 'Qu\'est-ce que le mode multi-modèle ?',
        a: 'Vos équipes apprennent à choisir entre OpenAI, Anthropic, Google, Mistral et Meta selon le cas d\'usage. Ça évite la dépendance à un seul fournisseur et ça aide à arbitrer coût/qualité.' },
    ],
  },
  {
    cat: 'Tarifs & financement',
    questions: [
      { q: 'Comment fonctionne le financement OPCO ?',
        a: 'Le groupe SRA est Qualiopi certifié, donc nos formations sont éligibles à votre OPCO. Selon votre dossier et votre OPCO, vous pouvez avoir jusqu\'à 100% de prise en charge. On vous aide à monter le dossier.' },
      { q: 'Y a-t-il un engagement annuel ?',
        a: 'Oui, l\'engagement est annuel mais la facturation est mensuelle. Au-delà de 100 utilisateurs, des dégressifs s\'appliquent automatiquement.' },
      { q: 'Que se passe-t-il si je veux ajouter ou retirer des utilisateurs en cours d\'année ?',
        a: 'Ajouts possibles à tout moment, facturés au prorata. Les retraits se font à la prochaine échéance annuelle. Pas de pénalité, pas de paperasse.' },
      { q: 'Pourquoi pas de plan gratuit ou d\'essai 30 jours ?',
        a: 'Notre démarche est concierge — on vend AVANT de construire à grande échelle. Une démo de 20 minutes vaut bien plus qu\'un essai gratuit où personne n\'a le temps de s\'y mettre seul.' },
    ],
  },
  {
    cat: 'Certifications',
    questions: [
      { q: 'Les certifications sont-elles reconnues ?',
        a: 'Praticien IA Métier (80h) et Expert IA Appliqué (200h) sont en cours d\'inscription au Répertoire Spécifique de France Compétences. Une fois inscrites, elles seront reconnues nationalement.' },
      { q: 'Faut-il payer en plus pour les certifications ?',
        a: 'Non. Les certifications sont incluses dans le plan Pro et Enterprise. Pas de frais cachés, pas d\'examen payant additionnel.' },
      { q: 'Que se passe-t-il si je ne valide pas un niveau ?',
        a: 'On revient en arrière, on retravaille les cas qui n\'ont pas tenu, et on revalide entre pairs. Personne ne reste bloqué — c\'est un parcours, pas un examen.' },
    ],
  },
  {
    cat: 'Sécurité & RGPD',
    questions: [
      { q: 'Mes données sont-elles envoyées à OpenAI / Anthropic / Google ?',
        a: 'Pas vos données métier sensibles. Le tronc commun apprend justement à savoir quoi envoyer (et quoi NE PAS envoyer) à un LLM. Pour les comptes Enterprise, hébergement souverain France via Hexagram (filiale du groupe SRA).' },
      { q: 'Quel est le statut RGPD de Virage ?',
        a: 'Hébergement UE (Pays-Bas par défaut, France via Hexagram en option). Aucune donnée d\'apprentissage n\'est utilisée pour entraîner des modèles. Conformité RGPD documentée — DPA signable avant déploiement.' },
      { q: 'Y a-t-il du SSO ?',
        a: 'Oui — SSO Microsoft (Entra ID) et Google Workspace inclus dans les plans Pro et Enterprise. Provisionning SCIM disponible en option Enterprise.' },
    ],
  },
  {
    cat: 'Implémentation',
    questions: [
      { q: 'Combien de temps pour démarrer ?',
        a: 'Plan Starter : 3 jours ouvrés (création des comptes, invitations). Plan Pro : 1 semaine (paramétrage SSO, dashboard manager). Plan Enterprise : 2 à 4 semaines selon les intégrations sur-mesure.' },
      { q: 'Faut-il un référent en interne ?',
        a: 'Recommandé sur les plans Pro et Enterprise — quelqu\'un côté client qui anime, relance, communique en interne. Mais pas obligatoire : nos CSM peuvent prendre le relais.' },
      { q: 'Vous accompagnez la conduite du changement ?',
        a: 'Oui. Plan de communication interne template, kit dirigeant, atelier de lancement (1h) inclus en plan Pro. Coaching sur-mesure en Enterprise.' },
    ],
  },
  {
    cat: 'Le groupe SRA',
    questions: [
      { q: 'Qui se cache derrière Virage ?',
        a: 'Virage est porté par le groupe SRA — 40 ans d\'accompagnement des PME françaises, 3 943 clients, distributeur Sage / Cegid / Lucca / Pennylane / Silae. C\'est notre métier de comprendre les PME.' },
      { q: 'Pourquoi se lancer dans la formation IA maintenant ?',
        a: 'Parce que nos clients nous le demandent. Ce sont les mêmes dirigeants qui pilotent leur entreprise avec Sage ou Cegid qui se posent aujourd\'hui la question de l\'IA — et personne ne leur répond avec un format adapté.' },
      { q: 'Et si vous arrêtez le produit dans 2 ans ?',
        a: 'On ne lance pas une plateforme à la légère. SRA porte Virage avec ses fonds propres, sans dette, sans VC. Tant que les clients en ont besoin, on continue. Et si jamais on devait arrêter, on s\'engage à un préavis de 12 mois.' },
    ],
  },
];

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--hairline)' }}>
      <button
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        style={{
          width: '100%', padding: '20px 0',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          gap: 24, textAlign: 'left',
          fontSize: 17, fontWeight: 600, color: 'var(--texte)', lineHeight: 1.45,
        }}
      >
        <span>{q}</span>
        <span style={{
          flexShrink: 0, width: 28, height: 28, borderRadius: 999,
          background: open ? 'var(--vert-sapin)' : 'var(--creme-deep)',
          color: open ? 'var(--blanc)' : 'var(--texte)',
          display: 'grid', placeItems: 'center', fontSize: 16, fontWeight: 600,
          transition: 'all 180ms ease',
        }}>
          {open ? '−' : '+'}
        </span>
      </button>
      {open && (
        <div style={{ paddingBottom: 22, paddingRight: 52, fontSize: 15, lineHeight: 1.65, color: 'var(--texte-soft)' }}>
          {a}
        </div>
      )}
    </div>
  );
};

const FAQPage = () => (
  <PageShell>
    {/* HERO */}
    <section className="page-hero">
      <div className="container">
        <div className="eyebrow-row">
          <span className="pill" style={{ background: 'var(--vert-menthe-soft)', borderColor: 'transparent', color: 'var(--vert-sapin)', fontWeight: 600 }}>
            FAQ
          </span>
        </div>
        <h1 className="t-h1" style={{ maxWidth: 880 }}>
          Tout ce que vous voulez savoir <span className="italic-accent">avant de signer.</span>
        </h1>
        <p className="t-body-lg lead">
          Vingt-et-une questions concrètes, classées par thème. Si vous ne trouvez pas la vôtre,
          on y répond en démo.
        </p>
      </div>
    </section>

    {/* CONTENU */}
    <section style={{ paddingTop: 24 }}>
      <div className="container" style={{ maxWidth: 880, margin: '0 auto' }}>
        {FAQ_DATA.map((cat) => (
          <div key={cat.cat} style={{ marginBottom: 56 }}>
            <h2 className="t-h2" style={{ marginBottom: 12 }}>{cat.cat}</h2>
            <div>
              {cat.questions.map((qa, i) => (
                <FAQItem key={i} q={qa.q} a={qa.a} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '64px 0', background: 'var(--blanc)' }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <h2 className="t-h2" style={{ marginBottom: 16 }}>Une autre question ?</h2>
        <p className="t-body" style={{ marginBottom: 32 }}>
          Le plus simple : 20 minutes en visio. On répond, vous repartez avec un plan d'action.
        </p>
        <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
           className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
          Demander une démo
          <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </section>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById('root')).render(<FAQPage />);