// Page Études de cas — références d'industrie en attendant les mandats documentés
const BENCH_CASES = [
  {
    num: '01',
    domain: 'Traitement de documents & saisie de données',
    title: 'Automatiser la saisie des factures',
    story: 'Le cas le mieux documenté de l\'industrie. Manuellement, une facture demande environ 4 minutes de traitement et coûte de 12 à 30 $; automatisée, elle se traite en une quinzaine de secondes pour 3 à 5 $. Sur un volume de 500 factures par mois, le gain atteint 30 heures mensuelles — et la fiabilité s\'améliore en même temps que la vitesse.',
    stats: [
      ['8-10 h', 'récupérées / semaine (approbations et paiements)'],
      ['-85 %', 'd\'erreurs de saisie (de 2 % à 0,3 %)'],
      ['50-65 k$', 'économisés / année (à ~5 000 factures/an)'],
      ['qq sem.', 'd\'implantation typique']
    ],
    source: 'Études APQC et Forrester sur l\'automatisation des comptes fournisseurs'
  },
  {
    num: '02',
    domain: 'Courriels & service client',
    title: 'Trier et router les demandes entrantes par IA',
    story: 'Les implantations documentées font passer le tri d\'un courriel de plus de 5 minutes à moins d\'une minute, avec plus de 90 % des messages correctement pré-classifiés. Dans les cas les plus avancés, le délai d\'assignation à un agent passe de 2 jours à moins d\'une minute, et l\'IA traite de façon autonome la moitié des demandes routinières — sans dégrader la satisfaction client (CSAT maintenu à 85 %+).',
    stats: [
      ['4-5 min', 'libérées par courriel trié'],
      ['90 %+', 'de pré-classification correcte'],
      ['-25-30 %', 'sur les coûts de support'],
      ['~5 sem.', 'de la signature à la production']
    ],
    source: 'Implantations documentées de triage IA en service client B2B'
  },
  {
    num: '03',
    domain: 'Planification & coordination d\'équipes',
    title: 'Optimiser la répartition des équipes terrain',
    story: 'Un répartiteur qui gère 50 à 60 rendez-vous quotidiens y consacre 4 à 5 heures par jour. Les déploiements documentés réduisent ce temps de 65 %, améliorent la résolution à la première visite de 32 %, et font passer la capacité de 4,8 à 6,7 interventions par technicien par jour — soit l\'équivalent de 47 000 $ de revenus mensuels additionnels, sans embauche.',
    stats: [
      ['15-20 h', 'récupérées / semaine en répartition'],
      ['-8 %', 'd\'erreurs de planification'],
      ['+47 k$', 'de capacité mensuelle additionnelle'],
      ['2 sem.', 'de déploiement (en trois phases)']
    ],
    source: 'Cas documentés en gestion d\'interventions terrain (incl. SAP Field Service Management)'
  },
  {
    num: '04',
    domain: 'Rapports & synthèse',
    title: 'Automatiser les comptes rendus et les suivis',
    story: 'Un employé passe en moyenne 23 heures par semaine en réunion — dont près de la moitié jugée improductive. Les outils qui enregistrent, transcrivent et résument les rencontres (avec rédaction automatique des courriels de suivi) font économiser environ 30 minutes par réunion sur la seule prise de notes. Particularité de ce chantier : il se déploie en jours, pas en mois.',
    stats: [
      ['5-10 h', 'récupérées / semaine pour un dirigeant'],
      ['-40 %', 'de temps de documentation'],
      ['+59 %', 'de documents produits par heure'],
      ['qq jours', 'de mise en place']
    ],
    source: 'Études sur les assistants de réunion IA et la productivité documentaire'
  }
];

const CasesPage = () => {
  const [legalOpen, setLegalOpen] = React.useState(false);
  const [privacyOpen, setPrivacyOpen] = React.useState(false);

  return (
    <>
      <Nav />
      <main>
        {/* En-tête */}
        <section className="section" style={{ paddingTop: 80, paddingBottom: 48, position: 'relative' }}>
          <div className="grid-bg"></div>
          <div className="wrap" style={{ position: 'relative' }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Ressources · Études de cas</div>
            <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5.5vw, 80px)' }}>
              Des processus réels,<br />
              des gains <span className="serif" style={{ color: 'var(--cyan)' }}>mesurés.</span>
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-dim)', maxWidth: 600, marginTop: 28 }}>
              Voici ce que l'automatisation livre, chiffres à l'appui, dans les quatre
              chantiers les plus fréquents en PME. Ces résultats proviennent d'études
              et de cas documentés de l'industrie — nos propres mandats seront publiés
              ici, dans le même format, au fur et à mesure.
            </p>
          </div>
        </section>

        {/* Avis de transparence */}
        <section style={{ paddingBottom: 40 }}>
          <div className="wrap">
            <div style={{
              display: 'flex', gap: 14, alignItems: 'baseline',
              padding: '16px 22px',
              border: '1px solid color-mix(in oklab, var(--cyan) 30%, transparent)',
              borderRadius: 12,
              background: 'color-mix(in oklab, var(--cyan) 5%, transparent)'
            }}>
              <span className="mono" style={{ color: 'var(--cyan)', flexShrink: 0 }}>// transparence</span>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--fg-dim)' }}>
                Les métriques ci-dessous sont des références d'industrie (études APQC, Forrester
                et cas publiés), pas encore nos mandats. On préfère des chiffres vrais et sourcés
                à des témoignages inventés. Chaque référence indique sa source.
              </p>
            </div>
          </div>
        </section>

        {/* Références d'industrie */}
        <section style={{ paddingBottom: 64 }}>
          <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {BENCH_CASES.map((c) => (
              <article key={c.num} style={{
                border: '1px solid var(--line)',
                borderRadius: 16,
                padding: 'clamp(28px, 4vw, 44px)',
                background: 'var(--surface)'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', marginBottom: 8 }}>
                  <div className="mono" style={{ color: 'var(--cyan)' }}>réf. {c.num} · {c.domain}</div>
                  <div className="mono" style={{ color: 'var(--fg-mute)' }}>benchmark d'industrie</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'clamp(24px, 4vw, 48px)', alignItems: 'start' }} className="case-grid">
                  <div>
                    <h2 style={{ fontSize: 'clamp(24px, 2.6vw, 32px)', fontWeight: 500, letterSpacing: '-0.015em', margin: '0 0 16px', lineHeight: 1.15 }}>
                      {c.title}
                    </h2>
                    <p style={{ color: 'var(--fg-dim)', fontSize: 15.5, lineHeight: 1.65, margin: 0 }}>
                      {c.story}
                    </p>
                    <p className="mono" style={{ marginTop: 18, color: 'var(--fg-mute)', fontSize: 10.5 }}>
                      // source : {c.source}
                    </p>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--line-strong)', border: '1px solid var(--line-strong)', borderRadius: 12, overflow: 'hidden' }}>
                    {c.stats.map(([n, l], i) => (
                      <div key={i} style={{ background: 'var(--bg)', padding: '22px 18px' }}>
                        <div style={{ fontSize: 'clamp(24px, 2.2vw, 32px)', fontWeight: 500, letterSpacing: '-0.03em', color: i % 2 === 0 ? 'var(--fg)' : 'var(--cyan)' }}>{n}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--fg-dim)', marginTop: 6, lineHeight: 1.45 }}>{l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </section>

        {/* CTA — devenir la première étude de cas */}
        <section className="section band-light" style={{ borderTop: '1px solid var(--line)' }}>
          <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <h2 className="h-section">
                Votre processus pourrait être<br />
                <span className="serif" style={{ color: 'var(--cyan)' }}>la première étude publiée ici.</span>
              </h2>
              <p style={{ color: 'var(--fg-dim)', fontSize: 16, lineHeight: 1.6, marginTop: 20, maxWidth: 520 }}>
                Les premiers mandats documentés bénéficient d'une attention particulière :
                c'est notre vitrine autant que la vôtre. Parlez-nous d'un processus qui vous pèse.
              </p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <a href="index.html#contact" className="btn btn-cyan">
                Diagnostic gratuit
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer onOpenLegal={() => setLegalOpen(true)} onOpenPrivacy={() => setPrivacyOpen(true)} />
      <LegalModal open={legalOpen} kind="legal" onClose={() => setLegalOpen(false)} />
      <LegalModal open={privacyOpen} kind="privacy" onClose={() => setPrivacyOpen(false)} />
      <ConsentManager onOpenPrivacy={() => setPrivacyOpen(true)} />
      <FAQModal />
      <style>{`
        @media (max-width: 860px) {
          .case-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
};

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