/* =============================================================
   Sentinel Hi-Fi — Screens
   CO3 · C1-RSSI · AG1 · OB2
   ============================================================= */

// === Activity ring dimension definitions (consistent across screens) ===
const RING_DIMS = [
  { label: 'Qualité',    key: 'q', color: '#7ac9a8' }, // sage
  { label: 'Dérive',     key: 'd', color: '#e6c97a' }, // wheat
  { label: 'Coût',       key: 'c', color: '#ddac63' }, // gold
  { label: 'Sécurité',   key: 's', color: '#e89b8e' }, // terracotta
  { label: 'Conformité', key: 'f', color: '#8ab4d8' }, // slate
];

const dims = (vals) => RING_DIMS.map((d, i) => ({ ...d, value: vals[i] }));

// ============================================================
// CO3 — Dossier d'audit ★ (HI-FI)
// ============================================================
const HFScreenCO3 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Conformité · Documentation & preuves · CO3"
      title="Coffre de preuves d'audit."
      lead="Article 11 AI Act, annexe IV. Documentation continue, hash-chaînée, opposable. Vous validez le dossier — vous ne l'écrivez plus."
      actions={<>
        <button className="btn ghost"><Icon name="upload" size={14} />Documenter</button>
        <button className="btn accent"><Icon name="package" size={14} />Constituer un dossier</button>
      </>}
    />

    {/* Premium banner */}
    <div className="card gold-frame lg" style={{ marginBottom: 'var(--space-8)', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: -40, right: -40, width: 240, height: 240,
        background: 'radial-gradient(circle, rgba(221,172,99,0.12) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div className="row between" style={{ alignItems: 'flex-start', position: 'relative', gap: 'var(--space-8)' }}>
        <div style={{ maxWidth: 580 }}>
          <span className="label">Promesse opérationnelle</span>
          <h2 style={{
            fontFamily: 'var(--font-accent)',
            fontSize: 'var(--text-3xl)',
            fontWeight: 'var(--fw-semibold)',
            letterSpacing: 'var(--track-heading)',
            lineHeight: 'var(--lh-tight)',
            margin: '0 0 12px',
            color: 'var(--fg)',
          }}>Un dossier d'audit AI Act constitué en moins d'une heure.</h2>
          <p style={{
            fontFamily: 'var(--font-standard)',
            fontSize: 'var(--text-md)',
            color: 'var(--fg-muted)',
            lineHeight: 'var(--lh-relaxed)',
            margin: 0,
          }}>Sentinel agrège, hash-chaîne et signe automatiquement la documentation, les logs et les attestations exigés par AI Act. Là où la concurrence livre en semaines, vous livrez en minutes.</p>
          <div className="row" style={{ gap: 8, marginTop: 'var(--space-5)' }}>
            <span className="chip outline"><Icon name="lock" size={11} />SHA-3 hash chain</span>
            <span className="chip outline"><Icon name="check" size={11} />RFC 3161 timestamp</span>
            <span className="chip gold"><Icon name="shield" size={11} />SecNumCloud</span>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{
            fontFamily: 'var(--font-accent)',
            fontSize: 'var(--text-6xl)',
            fontWeight: 'var(--fw-semibold)',
            letterSpacing: 'var(--track-display)',
            lineHeight: 0.95,
            color: 'var(--accent)',
            fontFeatureSettings: '"tnum"',
          }}>47<span style={{ fontSize: 'var(--text-2xl)', color: 'var(--fg-muted)', marginLeft: 4 }}>min</span></div>
          <div className="label" style={{ marginTop: 6 }}>temps moyen — 12 derniers dossiers</div>
        </div>
      </div>
    </div>

    {/* Main layout: vault left + builder right */}
    <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 'var(--space-6)' }}>
      {/* Coffre */}
      <div className="card lg">
        <div className="card-head">
          <div>
            <h3 className="card-title">Coffre — agent-rh-screening</h3>
            <p className="card-subtitle">Documentation tenue à jour en continu depuis la mise en production. 8 éléments, intégrité vérifiée.</p>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <span className="chip warn"><span className="dot"></span>High-risk · annexe III §4</span>
          </div>
        </div>

        <div className="col" style={{ gap: 10 }}>
          {[
            { name: 'Documentation technique · article 11', meta: '8 sections · 14 pages', sub: 'mise à jour 26.05 · 04:00', s: 'sealed' },
            { name: 'Logs de conformité · 90 jours', meta: '142 818 entrées · 12.4 MB', sub: 'hash chain vérifiée', s: 'sealed' },
            { name: 'AIPD signée par DPO', meta: 'valide jusqu\'au 17 mars 2027', sub: 'signature 17.03.2026', s: 'sealed' },
            { name: 'Tests de robustesse', meta: '24 scénarios évalués', sub: 'dernier passage 21.05', s: 'sealed' },
            { name: 'Tests de biais', meta: '12 critères protégés', sub: 'échec mineur 22.05 · à corriger', s: 'attention' },
            { name: 'Politique de gouvernance', meta: 'signée comex · 02.01.2026', sub: 'renouvellement annuel', s: 'sealed' },
            { name: 'Historique incidents', meta: '7 entrées · 3 résolus', sub: '1 P1 actif', s: 'attention' },
            { name: 'Notice d\'information sujets', meta: 'FR + EN · version 2.1', sub: 'diffusée RH le 14.03', s: 'sealed' },
          ].map((doc, i) => (
            <div key={i} className="doc-tile">
              <div className="doc-icon">PDF</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="doc-title">{doc.name}</div>
                <div className="doc-meta">{doc.meta}</div>
                <div className="doc-sub">↳ {doc.sub}</div>
              </div>
              {doc.s === 'sealed'
                ? <span className="chip pos"><span className="dot"></span>scellé</span>
                : <span className="chip warn"><span className="dot"></span>action recommandée</span>}
            </div>
          ))}
        </div>

        <div className="divider" style={{ margin: '24px 0 16px' }} />
        <div className="row between">
          <div className="row" style={{ gap: 10, color: 'var(--fg-muted)', fontSize: 'var(--text-sm)' }}>
            <Icon name="lock" size={14} />
            <span>Intégrité de la chaîne vérifiée à 04:14:02 · 0 anomalie</span>
          </div>
          <button className="btn ghost sm"><Icon name="externalLink" size={12} />Voir la preuve cryptographique</button>
        </div>
      </div>

      {/* Builder column */}
      <div className="col" style={{ gap: 'var(--space-5)' }}>
        {/* 3-step builder */}
        <div className="card dark lg">
          <span className="label">Constituer le dossier</span>
          <h3 style={{
            fontFamily: 'var(--font-accent)',
            fontSize: 'var(--text-2xl)',
            fontWeight: 'var(--fw-semibold)',
            margin: '4px 0 20px',
            color: 'var(--fg-on-inverse)',
            lineHeight: 'var(--lh-tight)',
          }}>Trois étapes. Un ZIP signé.</h3>

          <div className="col" style={{ gap: 16 }}>
            {[
              { n: '01', t: 'Périmètre', d: 'Agents, direction, criticité' },
              { n: '02', t: 'Plage temporelle', d: '12 derniers mois par défaut' },
              { n: '03', t: 'Signature cryptographique', d: 'RFC 3161 timestamp · SHA-3' },
            ].map(s => (
              <div key={s.n} className="row" style={{ alignItems: 'flex-start', gap: 14 }}>
                <div style={{
                  width: 32, height: 32,
                  borderRadius: 'var(--radius-full)',
                  background: 'rgba(221,172,99,0.15)',
                  color: 'var(--accent)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                  flexShrink: 0,
                }}>{s.n}</div>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-standard)',
                    fontSize: 'var(--text-base)',
                    color: 'var(--fg-on-inverse)',
                    fontWeight: 'var(--fw-semibold)',
                  }}>{s.t}</div>
                  <div style={{
                    fontFamily: 'var(--font-standard)',
                    fontSize: 'var(--text-xs)',
                    color: 'rgba(237,237,242,0.6)',
                    marginTop: 2,
                  }}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>

          <button className="btn accent" style={{ width: '100%', marginTop: 20, padding: '12px 16px' }}>
            <Icon name="package" size={14} />Lancer la constitution
          </button>
        </div>

        {/* Preview */}
        <div className="card">
          <span className="label">Dossier prévisualisé</span>
          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 'var(--text-sm)',
            color: 'var(--fg)',
            fontWeight: 'var(--fw-medium)',
            marginTop: 4,
          }}>audit_aurore_rh_2026.zip</div>

          <div style={{
            marginTop: 14,
            padding: 14,
            background: 'var(--bg-sunken)',
            borderRadius: 'var(--radius-sm)',
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            lineHeight: 1.7,
            color: 'var(--fg-muted)',
          }}>
            <div style={{ color: 'var(--fg)' }}>📁 /registre/</div>
            <div style={{ paddingLeft: 16 }}>└ registre_ai_act.pdf</div>
            <div style={{ color: 'var(--fg)', marginTop: 4 }}>📁 /documentation/</div>
            <div style={{ paddingLeft: 16 }}>├ doc_technique_art11.pdf</div>
            <div style={{ paddingLeft: 16 }}>└ aipd_signée.pdf</div>
            <div style={{ color: 'var(--fg)', marginTop: 4 }}>📁 /logs/</div>
            <div style={{ paddingLeft: 16 }}>└ logs_142818.jsonl</div>
            <div style={{ color: 'var(--fg)', marginTop: 4 }}>📁 /attestations/</div>
            <div style={{ paddingLeft: 16 }}>├ robustesse.pdf</div>
            <div style={{ paddingLeft: 16 }}>└ biais.pdf</div>
            <div style={{ color: 'var(--fg)', marginTop: 4 }}>📁 /incidents/</div>
            <div style={{ paddingLeft: 16 }}>└ historique.pdf</div>
            <div style={{ color: 'var(--fg)', marginTop: 6, paddingTop: 6, borderTop: '1px dashed var(--hairline-strong)' }}>📄 manifest.json + signature.sig</div>
          </div>

          <div className="row between" style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--hairline)' }}>
            <span style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>Taille estimée</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-sm)', fontWeight: 600 }}>18.7 MB</span>
          </div>
        </div>

        {/* Auditor share */}
        <div className="card gold-frame">
          <div className="row" style={{ gap: 12, alignItems: 'flex-start' }}>
            <div style={{
              width: 40, height: 40,
              borderRadius: 'var(--radius-sm)',
              background: 'var(--gold-50)',
              color: 'var(--gold-700)',
              display: 'grid', placeItems: 'center',
              flexShrink: 0,
            }}>
              <Icon name="link2" size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)' }}>
                Partage auditeur externe
              </div>
              <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 2, lineHeight: 1.5 }}>
                Lien temporaire en lecture seule. Durée 7 j. Watermark juridiction française sur chaque page.
              </div>
              <button className="btn ghost sm" style={{ marginTop: 10 }}>
                <Icon name="link2" size={12} />Générer un lien
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// C1-RSSI — Cockpit (HI-FI)
// ============================================================
const HFScreenC1RSSI = () => (
  <div className="page">
    {/* Alert banner */}
    <div style={{
      background: 'rgba(232,155,142,0.08)',
      border: '1px solid rgba(232,155,142,0.3)',
      borderRadius: 'var(--radius-sm)',
      padding: '12px 16px',
      marginBottom: 'var(--space-6)',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <Icon name="alertTriangle" size={18} className="" />
      <div style={{ flex: 1, fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)' }}>
        <strong>3 incidents critiques actifs.</strong>{' '}
        <span style={{ color: 'var(--fg-muted)' }}>agent-rh-screening suspendu il y a 4 min.</span>
      </div>
      <button className="btn ghost sm">Ouvrir<Icon name="arrowRight" size={12} /></button>
    </div>

    <PageHeader
      eyebrow="Cockpit · RSSI · C1"
      title="Bonjour Léa."
      lead="Tour de contrôle sécurité — parc IA de Banque Aurore, vue 24 h."
      actions={<>
        <button className="btn ghost"><Icon name="filter" size={14} />24 heures</button>
        <button className="btn primary"><Icon name="fileText" size={14} />Rapport hebdo</button>
      </>}
    />

    {/* KPI strip */}
    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Score de posture" value="78" unit="/ 100" variant="dark"
        trend={{ dir: 'up', label: '+4 sem.' }} />
      <MetricCard label="Agents en parc" value="142" sub="9 shadow détectés · 7 j" />
      <MetricCard label="Incidents ouverts" value="14" sub="3 P1 · 6 P2 · 5 P3" />
      <MetricCard label="Couverture policies" value="86" unit="%" variant="gold"
        trend={{ dir: 'up', label: '+2 pts' }} />
    </div>

    {/* Row 2 */}
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)', marginBottom: 'var(--space-6)' }}>
      {/* Incidents table */}
      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Top 5 incidents ouverts</h3>
            <p className="card-subtitle">Triés par SLA, P1 d'abord. Cliquez une ligne pour ouvrir l'inspection forensique.</p>
          </div>
          <button className="btn ghost sm">Tout voir<Icon name="arrowRight" size={12} /></button>
        </div>
        <table className="tbl">
          <thead>
            <tr><th>Sév.</th><th>Agent</th><th>Type</th><th className="num">SLA</th><th>Assigné</th></tr>
          </thead>
          <tbody>
            {[
              ['P1','agent-rh-screening','Prompt injection · exfil tentée','04:12','L. Mercier','crit'],
              ['P1','copilot-credit','Sortie sensible non masquée','11:38','N. Dubois','crit'],
              ['P2','rag-juridique','Dérive qualité > seuil','22:01','O. Petit','warn'],
              ['P2','chatbot-helpdesk','Anomalie volumétrique','31:44','Non assigné','warn'],
              ['P3','agent-cashflow','Token spike · coût','2 j','F. Lemoine',''],
            ].map((r, i) => (
              <tr key={i}>
                <td><span className={`chip ${r[5]}`}><span className="dot"></span>{r[0]}</span></td>
                <td><div className="agent"><strong>{r[1]}</strong></div></td>
                <td>{r[2]}</td>
                <td className="num">{r[3]}</td>
                <td style={{ color: r[4] === 'Non assigné' ? 'var(--fg-subtle)' : 'var(--fg-muted)' }}>{r[4]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Surface d'attaque */}
      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Surface d'attaque</h3>
            <p className="card-subtitle">Agents instrumentés + vecteurs OWASP LLM Top 10 · 30 j.</p>
          </div>
        </div>
        <div style={{ color: 'var(--navy-900)' }}>
          <SparkHF data={[60, 64, 68, 65, 72, 70, 78, 82, 79, 86, 88, 92, 95, 102, 108, 112]} h={120} stroke={2.5} />
        </div>
        <div className="row between" style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--hairline)' }}>
          <div>
            <div className="label">Agents</div>
            <div style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-2xl)', fontWeight: 600 }}>112</div>
          </div>
          <div>
            <div className="label">Vecteurs · 30 j</div>
            <div style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-2xl)', fontWeight: 600, color: 'var(--signal-critical)' }}>+18</div>
          </div>
        </div>
      </div>
    </div>

    {/* Row 3 — Health ring snapshot + shortcuts */}
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)' }}>
      <div className="card lg">
        <div className="card-head">
          <div>
            <h3 className="card-title">Santé du parc</h3>
            <p className="card-subtitle">5 dimensions, score consolidé. Plus l'anneau est plein, mieux c'est.</p>
          </div>
          <div className="row" style={{ gap: 4 }}>
            <button className="filter-chip active">30 j</button>
            <button className="filter-chip">90 j</button>
            <button className="filter-chip">365 j</button>
          </div>
        </div>
        <div className="row" style={{ gap: 32, alignItems: 'center' }}>
          <ActivityRingsHF size={220} dimensions={dims([81, 68, 72, 64, 82])} />
          <div style={{ flex: 1 }}>
            <div className="label">Score global parc</div>
            <div style={{
              fontFamily: 'var(--font-accent)',
              fontSize: 'var(--text-6xl)',
              fontWeight: 'var(--fw-semibold)',
              lineHeight: 0.95,
              marginTop: 4,
              marginBottom: 8,
              fontFeatureSettings: '"tnum"',
            }}>74</div>
            <div className="row" style={{ gap: 6, marginBottom: 16 }}>
              <span className="chip pos"><Icon name="trendingDown" size={11} />-3 sur 30 j</span>
              <span className="chip outline">objectif 80</span>
            </div>
            <div className="divider" style={{ margin: '8px 0' }} />
            {RING_DIMS.map((d, i) => {
              const v = [81, 68, 72, 64, 82][i];
              return (
                <div key={i} className="ring-legend-item">
                  <div className="row" style={{ gap: 8 }}>
                    <span className="swatch" style={{ background: d.color }} />
                    <span className="name">{d.label}</span>
                  </div>
                  <span className="val">{v}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="col" style={{ gap: 'var(--space-5)' }}>
        <div className="card">
          <span className="label">Raccourcis RSSI</span>
          <div className="col" style={{ gap: 8, marginTop: 12 }}>
            <button className="btn ghost" style={{ justifyContent: 'flex-start' }}><Icon name="shield" size={14} />Lancer un scan policy</button>
            <button className="btn ghost" style={{ justifyContent: 'flex-start' }}><Icon name="power" size={14} />Suspendre un agent</button>
            <button className="btn ghost" style={{ justifyContent: 'flex-start' }}><Icon name="package" size={14} />Constituer dossier d'audit</button>
            <button className="btn ghost" style={{ justifyContent: 'flex-start' }}><Icon name="download" size={14} />Export forensique signé</button>
          </div>
        </div>
        <div className="card gold-frame">
          <span className="label">Synthèse hebdomadaire</span>
          <p style={{
            fontFamily: 'var(--font-accent)',
            fontSize: 'var(--text-lg)',
            fontWeight: 'var(--fw-medium)',
            lineHeight: 'var(--lh-snug)',
            color: 'var(--fg)',
            margin: '8px 0 0',
          }}>+2 pts de posture, 1 P1 résolu, 9 shadow découverts.</p>
          <div className="row" style={{ marginTop: 14, gap: 8, color: 'var(--fg-subtle)', fontSize: 'var(--text-xs)' }}>
            <Icon name="sparkle" size={12} />
            <span>Généré le 26.05 · 07:00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// AG1 — Inventaire du parc (HI-FI)
// ============================================================
const HFScreenAG1 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Agréger · Parc d'agents · AG1"
      title="Inventaire du parc."
      lead="142 agents recensés. 9 shadow détectés cette semaine."
      actions={<>
        <button className="btn ghost"><Icon name="zap" size={14} />Lancer une découverte</button>
        <button className="btn accent"><Icon name="plus" size={14} />Déclarer un agent</button>
      </>}
    />

    {/* Stat strip */}
    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Agents en parc" value="142" />
      <MetricCard label="Shadow · 7 j" value="9" variant="gold" />
      <MetricCard label="Sans propriétaire" value="6" />
      <MetricCard label="Sans policy" value="11" />
    </div>

    {/* Filter strip */}
    <div className="filter-strip">
      <span className="label" style={{ margin: 0, marginRight: 4 }}>Filtres</span>
      <button className="filter-chip">Criticité <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Direction <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Modèle <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Statut <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip active">Origine · shadow ✕</button>
      <div style={{ flex: 1 }} />
      <button className="btn ghost sm"><Icon name="download" size={12} />Export CSV</button>
    </div>

    {/* Main table */}
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <table className="tbl">
        <thead>
          <tr>
            <th style={{ width: 32 }}></th>
            <th>Agent</th>
            <th>Type</th>
            <th>Modèle</th>
            <th>Propriétaire</th>
            <th>Crit.</th>
            <th>Santé</th>
            <th>Conformité</th>
            <th>Origine</th>
            <th>Découvert</th>
          </tr>
        </thead>
        <tbody>
          {[
            { id:'agent-rh-screening', type:'Agent autonome', model:'gpt-4o', provider:'OpenAI', owner:'C. Roche · RH', crit:'C1', critV:'crit', h:[61,38,52,24,34], score:42, conf:'à revoir', confV:'crit', orig:'Déclaré', date:'12.03.2026' },
            { id:'copilot-credit', type:'Copilot', model:'claude-3.7', provider:'Anthropic', owner:'N. Dubois · Crédit', crit:'C1', critV:'crit', h:[78,68,65,72,80], score:71, conf:'Conforme', confV:'pos', orig:'Déclaré', date:'04.02.2026' },
            { id:'rag-juridique', type:'RAG', model:'mistral-large', provider:'Ascenzia', owner:'O. Petit · Juridique', crit:'C2', critV:'warn', h:[72,55,70,58,52], score:68, conf:'À revoir', confV:'warn', orig:'Déclaré', date:'11.01.2026' },
            { id:'chatbot-helpdesk', type:'Chatbot', model:'gpt-4o-mini', provider:'OpenAI', owner:'Helpdesk', crit:'C3', critV:'', h:[82,75,80,78,84], score:81, conf:'Conforme', confV:'pos', orig:'Déclaré', date:'08.11.2025' },
            { id:'agent-cashflow', type:'Agent autonome', model:'claude-3.7', provider:'Anthropic', owner:'F. Lemoine · Trésorerie', crit:'C2', critV:'warn', h:[74,60,68,62,58], score:64, conf:'En cours', confV:'warn', orig:'Déclaré', date:'22.10.2025' },
            { id:'shadow-marketing-bot', type:'Agent ?', model:'gpt-4o', provider:'OpenAI', owner:'—', crit:'—', critV:'', h:[75,62,70,64,55], score:65, conf:'Non évalué', confV:'crit', orig:'Shadow · Slack', date:'21.05.2026', shadow:true },
            { id:'shadow-rag-procurement', type:'RAG ?', model:'mistral-7b', provider:'Mistral', owner:'—', crit:'—', critV:'', h:[55,42,68,38,40], score:47, conf:'Non évalué', confV:'crit', orig:'Shadow · LangChain', date:'19.05.2026', shadow:true },
            { id:'copilot-dev-tooling', type:'Copilot', model:'claude-3.5', provider:'Anthropic', owner:'DSI', crit:'C4', critV:'', h:[80,75,76,78,76], score:77, conf:'N/A', confV:'', orig:'Déclaré', date:'05.09.2025' },
            { id:'agent-fraud-alert', type:'Agent autonome', model:'mistral-large', provider:'Ascenzia', owner:'Sécurité', crit:'C1', critV:'crit', h:[86,82,84,88,85], score:85, conf:'Conforme', confV:'pos', orig:'Déclaré', date:'17.08.2025' },
          ].map((r, i) => (
            <tr key={i}>
              <td><input type="checkbox" style={{ accentColor: 'var(--navy-900)' }} /></td>
              <td>
                <div className="agent">
                  <ProviderMarkHF name={r.provider} size={28} radius={6} />
                  <div>
                    <strong>{r.id}</strong>
                    <div className="meta">{r.provider}</div>
                  </div>
                </div>
              </td>
              <td style={{ color: 'var(--fg-muted)' }}>{r.type}</td>
              <td className="mono">{r.model}</td>
              <td style={{ color: 'var(--fg-muted)' }}>{r.owner}</td>
              <td>{r.crit !== '—' ? <span className={`chip ${r.critV}`}><span className="dot"></span>{r.crit}</span> : <span style={{ color: 'var(--fg-subtle)' }}>—</span>}</td>
              <td>
                <div className="row" style={{ gap: 8 }}>
                  <ActivityRingsHF size={28} dimensions={dims(r.h)} strokeRatio={0.16} gap={1} glow={false} />
                  <span className="mono" style={{ fontWeight: 600, color: 'var(--fg)' }}>{r.score}</span>
                </div>
              </td>
              <td><span className={`chip ${r.confV}`}><span className="dot"></span>{r.conf}</span></td>
              <td>{r.shadow ? <span className="chip gold"><span className="dot"></span>{r.orig}</span> : <span style={{ color: 'var(--fg-muted)' }}>{r.orig}</span>}</td>
              <td className="mono">{r.date}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="row between" style={{ marginTop: 'var(--space-4)' }}>
      <span style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>
        9 sur 142 — filtres actifs
      </span>
      <div className="row" style={{ gap: 4 }}>
        <button className="btn ghost sm">‹ Préc.</button>
        <button className="btn ghost sm">1</button>
        <button className="btn primary sm">2</button>
        <button className="btn ghost sm">3</button>
        <button className="btn ghost sm">Suiv. ›</button>
      </div>
    </div>
  </div>
);

// ============================================================
// OB2 — Scores de santé (HI-FI)
// ============================================================
const HFScreenOB2 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Observabilité · Scores de santé · OB2"
      title="Santé opérationnelle."
      lead="Score parc + décomposition par dimension. Anneaux d'activité — une dimension par anneau, plein = sain."
      actions={<>
        <button className="btn ghost"><Icon name="filter" size={14} />30 jours</button>
        <button className="btn ghost"><Icon name="download" size={14} />Exporter</button>
      </>}
    />

    {/* Hero: ring + decomposition */}
    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 'var(--space-6)', marginBottom: 'var(--space-6)' }}>
      <div className="card lg">
        <div className="card-head">
          <div>
            <h3 className="card-title">Score moyen du parc</h3>
            <p className="card-subtitle">5 anneaux concentriques. Plus l'anneau est plein, mieux la dimension se porte.</p>
          </div>
          <div className="row" style={{ gap: 4 }}>
            <button className="filter-chip active">30 j</button>
            <button className="filter-chip">90 j</button>
            <button className="filter-chip">365 j</button>
          </div>
        </div>
        <div className="row" style={{ gap: 36, alignItems: 'center' }}>
          <ActivityRingsHF size={260} dimensions={dims([81, 68, 72, 64, 82])} />
          <div style={{ flex: 1 }}>
            <div className="label">Score global parc</div>
            <div className="row" style={{ alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily: 'var(--font-accent)',
                fontSize: 'var(--text-6xl)',
                fontWeight: 'var(--fw-semibold)',
                lineHeight: 0.95,
                fontFeatureSettings: '"tnum"',
              }}>74</span>
              <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-lg)' }}>/ 100</span>
            </div>
            <div className="row" style={{ gap: 6, marginTop: 8 }}>
              <span className="chip crit"><Icon name="trendingDown" size={11} />-3 sur 30 j</span>
              <span className="chip outline">objectif 80</span>
            </div>
            <div style={{ marginTop: 20, color: 'var(--navy-700)' }}>
              <SparkHF data={[78,80,79,78,77,76,76,75,75,74,73,72,72,71,72,73,73,74,74,73,72,72,71,70,71,72,73,74,74,73]} h={70} stroke={2} />
              <div className="row between" style={{ marginTop: 4, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-subtle)' }}>
                <span>30 j ago</span><span>aujourd'hui</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card lg">
        <div className="card-head">
          <div>
            <h3 className="card-title">Décomposition</h3>
            <p className="card-subtitle">Chaque dimension détaille ce que mesure son anneau.</p>
          </div>
        </div>
        <div className="col" style={{ gap: 18 }}>
          {[
            { ...RING_DIMS[0], v: 81, d: 'pertinence, hallucination, format' },
            { ...RING_DIMS[1], v: 68, d: 'écart vs. baseline de mise en prod' },
            { ...RING_DIMS[2], v: 72, d: 'tokens, latence, infrastructure' },
            { ...RING_DIMS[3], v: 64, d: 'OWASP LLM Top 10' },
            { ...RING_DIMS[4], v: 82, d: 'AI Act, RGPD, documentation' },
          ].map((d, i) => (
            <div key={i} className="row" style={{ gap: 14, alignItems: 'center' }}>
              <ActivityRingsHF size={56} dimensions={[{ label: d.label, value: d.v, color: d.color }]} strokeRatio={0.18} glow={false} />
              <div style={{ flex: 1 }}>
                <div className="row between" style={{ alignItems: 'baseline' }}>
                  <span style={{
                    fontFamily: 'var(--font-standard)',
                    fontSize: 'var(--text-sm)',
                    fontWeight: 'var(--fw-semibold)',
                  }}>{d.label}</span>
                  <span style={{
                    fontFamily: 'var(--font-mono)',
                    fontSize: 'var(--text-sm)',
                    fontWeight: 'var(--fw-medium)',
                    fontFeatureSettings: '"tnum"',
                    color: d.v < 70 ? d.color : 'var(--fg)',
                  }}>{d.v} <span style={{ color: 'var(--fg-subtle)', fontWeight: 400 }}>/ 100</span></span>
                </div>
                <div style={{
                  fontFamily: 'var(--font-standard)',
                  fontSize: 'var(--text-xs)',
                  color: 'var(--fg-muted)',
                  marginTop: 2,
                }}>{d.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Top 10 lowest with mini-rings per agent */}
    <div className="card">
      <div className="card-head">
        <div>
          <h3 className="card-title">Top 10 — score le plus bas</h3>
          <p className="card-subtitle">Anneaux miniatures = profil de santé par agent. À glisser-déposer pour ouvrir la fiche.</p>
        </div>
        <button className="btn ghost sm">Top 10 dégradés<Icon name="arrowRight" size={12} /></button>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Agent</th>
            <th>Direction</th>
            <th>Crit.</th>
            <th>Profil de santé</th>
            <th>Score</th>
            <th>Δ 30 j</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {[
            { id:'agent-rh-screening', dir:'RH', crit:'C1', critV:'crit', h:[61,38,52,24,34], s:42, delta:-36 },
            { id:'shadow-rag-procurement', dir:'Achats', crit:'—', critV:'', h:[55,42,68,38,40], s:47, delta:'—' },
            { id:'agent-fraud-tier2', dir:'Risques', crit:'C2', critV:'warn', h:[68,54,58,52,48], s:54, delta:-6 },
            { id:'chatbot-onboarding-fr', dir:'RH', crit:'C3', critV:'', h:[72,60,62,56,52], s:58, delta:-3 },
            { id:'rag-juridique', dir:'Juridique', crit:'C2', critV:'warn', h:[72,55,70,58,52], s:61, delta:-14 },
            { id:'copilot-treso', dir:'Trésorerie', crit:'C2', critV:'warn', h:[70,58,68,60,56], s:62, delta:-4 },
            { id:'agent-cashflow', dir:'Trésorerie', crit:'C2', critV:'warn', h:[74,60,68,62,58], s:64, delta:-11 },
            { id:'shadow-marketing-bot', dir:'Marketing', crit:'—', critV:'', h:[75,62,70,64,55], s:65, delta:'—' },
          ].map((r, i) => (
            <tr key={i}>
              <td><strong>{r.id}</strong></td>
              <td style={{ color: 'var(--fg-muted)' }}>{r.dir}</td>
              <td>{r.crit !== '—' ? <span className={`chip ${r.critV}`}><span className="dot"></span>{r.crit}</span> : <span style={{ color: 'var(--fg-subtle)' }}>—</span>}</td>
              <td>
                <ActivityRingsHF size={44} dimensions={dims(r.h)} strokeRatio={0.13} gap={1.5} glow={false} />
              </td>
              <td>
                <span style={{
                  fontFamily: 'var(--font-accent)',
                  fontSize: 'var(--text-xl)',
                  fontWeight: 'var(--fw-semibold)',
                  color: r.s < 50 ? 'var(--signal-critical)' : 'var(--fg)',
                  fontFeatureSettings: '"tnum"',
                }}>{r.s}</span>
              </td>
              <td>
                {r.delta === '—'
                  ? <span style={{ color: 'var(--fg-subtle)' }}>—</span>
                  : <span className="chip crit"><Icon name="trendingDown" size={11} />{r.delta}</span>}
              </td>
              <td><button className="btn ghost sm">Ouvrir<Icon name="arrowRight" size={12} /></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

Object.assign(window, { HFScreenCO3, HFScreenC1RSSI, HFScreenAG1, HFScreenOB2 });