/* Hi-fi · Conformité (CO1, CO2) + Administration (AD1-4) */

// ============================================================
// CO1 — Registre AI Act
// ============================================================
const HFScreenCO1 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Conformité · Registre AI Act · CO1"
      title="Registre AI Act."
      lead="Tenu et signé en continu. Exigé par AI Act art. 11 + annexe IV."
      actions={<>
        <button className="btn ghost">Reclassifier en lot</button>
        <button className="btn ghost"><Icon name="externalLink" size={14} />Partager (auditeur)</button>
        <button className="btn accent"><Icon name="download" size={14} />Exporter le registre</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Systèmes IA recensés" value="142" />
      <MetricCard label="Conformes" value="116" sub="82 %" variant="gold" />
      <MetricCard label="À reclassifier" value="14" />
      <MetricCard label="Échéance GPAI" value="68" unit="j" sub="2 août 2026" variant="dark" />
    </div>

    {/* Classification distribution */}
    <div className="card" style={{ marginBottom: 'var(--space-6)' }}>
      <div className="card-head">
        <div>
          <h3 className="card-title">Répartition par catégorie de risque AI Act</h3>
          <p className="card-subtitle">Quatre niveaux définis par le règlement européen.</p>
        </div>
        <span className="chip pos"><Icon name="check" size={11} />Validé par DPO le 24 mai</span>
      </div>
      <div className="grid-4" style={{ gap: 14, marginTop: 6 }}>
        {[
          { c: 'Inacceptable', n: 0, d: 'Pratiques interdites', bg: 'rgba(232,155,142,0.12)', fg: '#a55142' },
          { c: 'Élevé', n: 18, d: 'Annexe III · RH, crédit, biométrie…', bg: 'rgba(230,201,122,0.16)', fg: '#8b6f2c' },
          { c: 'Limité', n: 47, d: 'Transparence requise', bg: 'rgba(138,180,216,0.16)', fg: '#486f93' },
          { c: 'Minimal', n: 77, d: 'Pas d\'obligation spécifique', bg: 'rgba(122,201,168,0.16)', fg: '#4f8b71' },
        ].map((g, i) => (
          <div key={i} style={{ padding: 18, background: g.bg, borderRadius: 'var(--radius-md)' }}>
            <span className="label" style={{ color: g.fg }}>{g.c}</span>
            <div style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-5xl)', fontWeight: 600, lineHeight: 0.95, marginTop: 4, color: g.fg, fontFeatureSettings: '"tnum"' }}>{g.n}</div>
            <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 6 }}>{g.d}</div>
          </div>
        ))}
      </div>
    </div>

    <div className="filter-strip">
      <button className="filter-chip active">Élevé ✕</button>
      <button className="filter-chip">Finalité <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Fournisseur <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Statut <Icon name="chevronDown" size={10} /></button>
      <div style={{ flex: 1 }} />
      <button className="btn ghost sm">Multi-sélection</button>
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--space-6)' }}>
      <table className="tbl">
        <thead>
          <tr><th>Système IA</th><th>Catégorie</th><th>Finalité</th><th>Fournisseur</th><th>Données</th><th>Obligations</th><th>Statut</th></tr>
        </thead>
        <tbody>
          {[
            ['agent-rh-screening','Élevé','Pré-tri candidatures','OpenAI · Azure FR','CV, profils LinkedIn','Art. 9 → 15 + 26','À jour','warn','pos'],
            ['copilot-credit','Élevé','Évaluation solvabilité','Anthropic','Historique crédit, KYC','Art. 9 → 15 + 26','À jour','warn','pos'],
            ['agent-fraud-alert','Élevé','Détection fraude','Ascenzia (Mistral FR)','Logs transactions','Art. 9 → 15','À jour','warn','pos'],
            ['rag-juridique','Limité','Recherche jurisprudence','Ascenzia (Mistral FR)','Jurisprudence publique','Art. 50 transparence','À revoir','info','warn'],
            ['chatbot-helpdesk','Limité','Support N1 interne','OpenAI','Base KB interne','Art. 50','À jour','info','pos'],
            ['copilot-dev-tooling','Minimal','Aide au développement','Anthropic','Code base interne','Pas d\'oblig. spécifique','OK','pos','pos'],
            ['agent-cashflow','Limité','Anticipation trésorerie','Anthropic','SAP finance','Art. 50','À jour','info','pos'],
          ].map((r, i) => (
            <tr key={i}>
              <td><strong>{r[0]}</strong></td>
              <td><span className={`chip ${r[7]}`}><span className="dot"></span>{r[1]}</span></td>
              <td>{r[2]}</td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[3]}</td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[4]}</td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[5]}</td>
              <td><span className={`chip ${r[8]}`}><span className="dot"></span>{r[6]}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="card gold-frame">
      <div className="row between">
        <div>
          <span className="label">Vue auditeur externe</span>
          <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-md)', fontWeight: 600, margin: '6px 0 4px' }}>Générer un lien lecture seule sécurisé.</h4>
          <p style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', margin: 0, maxWidth: 560, lineHeight: 'var(--lh-relaxed)' }}>
            Durée paramétrable. Filtré sur le périmètre choisi. Watermark juridiction française sur chaque page.
          </p>
        </div>
        <button className="btn accent"><Icon name="link2" size={14} />Générer un lien auditeur</button>
      </div>
    </div>
  </div>
);

// ============================================================
// CO2 — DPIA et évaluations d'impact
// ============================================================
const HFScreenCO2 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Conformité · DPIA / AIPD · CO2"
      title="DPIA & évaluations d'impact."
      lead="RGPD art. 35 + AIPD AI Act — modèles pré-remplis depuis les données plateforme."
      actions={<>
        <button className="btn ghost"><Icon name="upload" size={14} />Importer modèle CNIL</button>
        <button className="btn accent"><Icon name="plus" size={14} />Lancer une DPIA</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="DPIA complétées" value="34" />
      <MetricCard label="En cours" value="6" variant="gold" />
      <MetricCard label="Requises non lancées" value="3" variant="dark" />
      <MetricCard label="Périmées > 12 mois" value="2" />
    </div>

    <div className="row" style={{ gap: 0, borderBottom: '1px solid var(--hairline)', marginBottom: 24 }}>
      {[['En cours · 6', true],['Complétées · 34'],['Requises · 3'],['Périmées · 2']].map(([t, active], i) => (
        <button key={i} style={{
          background: 'transparent', border: 0, padding: '12px 18px',
          fontFamily: 'var(--font-primary)', fontSize: 11, fontWeight: 600,
          letterSpacing: 'var(--track-label)', textTransform: 'uppercase',
          color: active ? 'var(--fg)' : 'var(--fg-muted)',
          borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
          cursor: 'pointer',
        }}>{t}</button>
      ))}
    </div>

    <div className="grid-2" style={{ gap: 14, marginBottom: 'var(--space-6)' }}>
      {[
        { a: 'agent-rh-screening', t: 'AIPD AI Act + DPIA RGPD', p: 'C. Roche · RH', pct: 78, nx: 'révision biais 28 mai', s: 'warn' },
        { a: 'copilot-credit', t: 'AIPD AI Act', p: 'N. Dubois · Crédit', pct: 92, nx: 'validation DPO 27 mai', s: 'pos' },
        { a: 'agent-fraud-alert', t: 'AIPD AI Act', p: 'RSSI', pct: 64, nx: 'tests robustesse', s: '' },
        { a: 'rag-juridique', t: 'DPIA RGPD (renouv.)', p: 'O. Petit · Juridique', pct: 41, nx: 'évaluation finalités', s: 'warn' },
        { a: 'agent-cashflow', t: 'DPIA RGPD', p: 'F. Lemoine · Trésorerie', pct: 22, nx: 'cartographie données', s: '' },
        { a: 'agent-onboarding-kyc', t: 'AIPD AI Act + DPIA RGPD', p: 'Risques', pct: 88, nx: 'consultation CSE', s: 'pos' },
      ].map((d, i) => (
        <div key={i} className="card">
          <div className="row between" style={{ alignItems: 'flex-start' }}>
            <div>
              <h4 style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-base)', fontWeight: 600, margin: 0 }}>{d.a}</h4>
              <p style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', margin: '4px 0 0' }}>{d.t} · {d.p}</p>
            </div>
            {d.s === 'pos' ? <span className="chip pos"><span className="dot"></span>à valider</span>
              : d.s === 'warn' ? <span className="chip warn"><span className="dot"></span>action requise</span>
              : <span className="chip"><span className="dot"></span>en cours</span>}
          </div>
          <div style={{ marginTop: 14 }}>
            <div className="row between" style={{ fontSize: 'var(--text-xs)' }}>
              <span className="label" style={{ margin: 0 }}>Avancement</span>
              <span className="mono" style={{ fontWeight: 600 }}>{d.pct} %</span>
            </div>
            <div style={{ height: 6, background: 'var(--bg-sunken)', borderRadius: 3, marginTop: 6 }}>
              <div style={{ width: `${d.pct}%`, height: '100%', background: d.s === 'pos' ? 'var(--signal-positive)' : d.s === 'warn' ? 'var(--signal-caution)' : 'var(--navy-700)', borderRadius: 3 }} />
            </div>
          </div>
          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 10 }}>↳ Prochaine étape : <strong style={{ color: 'var(--fg)' }}>{d.nx}</strong></div>
          <div className="row" style={{ gap: 6, marginTop: 12 }}>
            <button className="btn ghost sm">Ouvrir</button>
            <button className="btn ghost sm">Assigner</button>
          </div>
        </div>
      ))}
    </div>

    <div className="card sunken">
      <div className="card-head">
        <div>
          <h3 className="card-title">Modèles AIPD pré-remplis</h3>
          <p className="card-subtitle">Sections "traitement", "données", "mesures techniques" remplies depuis les données plateforme. Le DPO ne complète que les sections analytiques.</p>
        </div>
      </div>
      <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
        <span className="chip outline">AIPD AI Act Annexe III</span>
        <span className="chip outline">DPIA RGPD CNIL</span>
        <span className="chip outline">Évaluation biais (RH/Crédit)</span>
        <span className="chip outline">Évaluation robustesse</span>
        <span className="chip outline">Évaluation sécurité</span>
      </div>
    </div>
  </div>
);

// ============================================================
// AD1 — Utilisateurs & rôles
// ============================================================
const HFScreenAD1 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Administration · Utilisateurs · AD1"
      title="Utilisateurs & rôles."
      lead="RBAC granulaire — Admin, RSSI, DPO, Chief AI Officer, Métier, Lecteur."
      actions={<>
        <button className="btn ghost">Audit des accès</button>
        <button className="btn accent"><Icon name="plus" size={14} />Inviter</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Utilisateurs" value="84" sub="3 invités en attente" />
      <MetricCard label="Équipes" value="11" />
      <MetricCard label="Rôles standards" value="6" variant="dark" />
      <MetricCard label="MFA actif" value="100" unit="%" variant="gold" />
    </div>

    <div className="row" style={{ gap: 0, borderBottom: '1px solid var(--hairline)', marginBottom: 24 }}>
      {[['Utilisateurs · 84', true],['Rôles · 6'],['Équipes · 11'],['Audit des accès']].map(([t, active], i) => (
        <button key={i} style={{
          background: 'transparent', border: 0, padding: '12px 18px',
          fontFamily: 'var(--font-primary)', fontSize: 11, fontWeight: 600,
          letterSpacing: 'var(--track-label)', textTransform: 'uppercase',
          color: active ? 'var(--fg)' : 'var(--fg-muted)',
          borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
          cursor: 'pointer',
        }}>{t}</button>
      ))}
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--space-6)' }}>
      <table className="tbl">
        <thead>
          <tr><th>Utilisateur</th><th>Rôle</th><th>Équipe</th><th>SSO</th><th>MFA</th><th>Dernière connexion</th><th>Statut</th><th></th></tr>
        </thead>
        <tbody>
          {[
            ['LM','Léa Mercier','RSSI','Sécurité','Azure AD','TOTP','aujourd\'hui · 13:48','actif','pos'],
            ['CR','Claire Roche','DPO + Compliance','Conformité','Azure AD','TOTP','aujourd\'hui · 11:12','actif','pos'],
            ['ND','Nicolas Dubois','Chief AI Officer','Direction IA','Azure AD','FIDO2','aujourd\'hui · 09:31','actif','pos'],
            ['OP','Olivier Petit','Métier (Juridique)','Juridique','Azure AD','TOTP','hier · 18:02','actif','pos'],
            ['FL','François Lemoine','Métier (Trésorerie)','Finance','Azure AD','TOTP','il y a 3 j','actif','pos'],
            ['LC','Laurent Charlon','Admin','—','Azure AD','FIDO2','il y a 12 min','actif','pos'],
            ['AX','contact@auditeur-x.fr','Lecteur (ext.)','—','Lien temp.','—','—','invité','gold'],
          ].map((r, i) => (
            <tr key={i}>
              <td>
                <div className="agent">
                  <div className="avatar" style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--navy-900)', color: 'var(--fg-on-inverse)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-primary)', fontWeight: 700, fontSize: 10 }}>{r[0]}</div>
                  <strong>{r[1]}</strong>
                </div>
              </td>
              <td><span className="chip outline">{r[2]}</span></td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[3]}</td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[4]}</td>
              <td>{r[5] === '—' ? <span style={{ color: 'var(--fg-subtle)' }}>—</span> : <span className="chip pos"><span className="dot"></span>{r[5]}</span>}</td>
              <td className="mono" style={{ fontSize: 11 }}>{r[6]}</td>
              <td><span className={`chip ${r[8]}`}><span className="dot"></span>{r[7]}</span></td>
              <td><button className="btn ghost sm"><Icon name="more" size={14} /></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    {/* RBAC matrix */}
    <div className="card">
      <div className="card-head">
        <div>
          <h3 className="card-title">Matrice rôles × modules</h3>
          <p className="card-subtitle">R = lecture, W = écriture, A = action critique (suspension, export forensique).</p>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '170px repeat(7, 1fr)', gap: 6, marginTop: 8 }}>
        <div></div>
        {['Cockpit','Parc','Observe','Sécurité','Pilotage','Conformité','Admin'].map(h => <div key={h} className="label" style={{ margin: 0, textAlign: 'center' }}>{h}</div>)}
        {[
          ['Admin', ['R','RWA','R','RWA','RWA','RW','RWA']],
          ['RSSI', ['R','RW','R','RWA','RWA','R','-']],
          ['DPO', ['R','R','R','R','R','RWA','-']],
          ['Chief AI Officer', ['R','R','R','R','RW','R','-']],
          ['Métier (sponsor)', ['R','R','R','-','R','R','-']],
          ['Lecteur', ['R','R','R','R','-','R','-']],
        ].map(([n, perms], i) => (
          <React.Fragment key={i}>
            <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', fontWeight: 600, display: 'flex', alignItems: 'center' }}>{n}</div>
            {perms.map((p, j) => (
              <div key={j} style={{
                textAlign: 'center', padding: 8, borderRadius: 'var(--radius-xs)',
                background: p === '-' ? 'var(--bg-sunken)'
                  : p.includes('A') ? 'rgba(221,172,99,0.25)'
                  : p.includes('W') ? 'rgba(13,10,44,0.10)'
                  : 'rgba(122,201,168,0.18)',
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
              }}>{p}</div>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  </div>
);

// ============================================================
// AD2 — Settings tenant
// ============================================================
const HFScreenAD2 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Administration · Paramètres · AD2"
      title="Paramètres tenant."
      lead="Identité, SSO, notifications, branding, souveraineté."
      actions={<>
        <button className="btn ghost">Annuler</button>
        <button className="btn primary">Enregistrer</button>
      </>}
    />

    <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', gap: 'var(--space-6)' }}>
      <div className="col" style={{ gap: 2 }}>
        {[
          ['Identité organisation', true],
          ['SSO & authentification'],
          ['Notifications'],
          ['Branding & exports'],
          ['Connecteurs'],
          ['Souveraineté & juridiction'],
          ['Conservation des données'],
          ['Webhooks & API'],
        ].map(([s, active], i) => (
          <button key={i} className={`nav-item ${active ? 'active' : ''}`} style={{
            background: active ? 'var(--bg-sunken)' : 'transparent',
            color: active ? 'var(--fg)' : 'var(--fg-muted)',
            justifyContent: 'flex-start', border: 0, cursor: 'pointer',
            fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)',
            padding: '8px 12px', borderRadius: 'var(--radius-sm)',
            borderLeft: active ? '2px solid var(--accent)' : '2px solid transparent',
            textAlign: 'left',
          }}>{s}</button>
        ))}
      </div>

      <div className="col" style={{ gap: 'var(--space-5)' }}>
        <div className="card">
          <span className="label">Identité organisation</span>
          <h3 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, margin: '4px 0 16px' }}>Banque Aurore SA</h3>
          <div className="grid-2" style={{ gap: 14 }}>
            {[
              ['Raison sociale', 'Banque Aurore SA'],
              ['SIREN', '782 410 982'],
              ['Secteur', 'Banque · Finance'],
              ['Effectif', '1 200 collaborateurs'],
              ['Juridiction principale', 'France · Paris'],
              ['DPO désigné', 'Claire Roche'],
            ].map(([k, v], i) => (
              <div key={i} style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)' }}>
                <span className="label">{k}</span>
                <div style={{ fontSize: 'var(--text-sm)', marginTop: 4, fontFamily: k === 'SIREN' ? 'var(--font-mono)' : 'var(--font-standard)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <span className="label">SSO & authentification</span>
          <div className="row between" style={{ marginTop: 12 }}>
            <div className="row" style={{ gap: 14 }}>
              <ProviderMarkHF name="Azure OpenAI" size={40} radius={8} />
              <div>
                <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-md)', fontWeight: 600, margin: 0 }}>Azure AD · activé</h4>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 2 }}>Tenant ID 8f2c…91 · SAML 2.0 · MFA forcé</div>
              </div>
            </div>
            <span className="chip pos"><span className="dot"></span>actif</span>
          </div>
          <div className="row" style={{ gap: 6, marginTop: 16 }}>
            <button className="btn ghost sm">Reconfigurer</button>
            <button className="btn ghost sm">Tester la connexion</button>
          </div>
        </div>

        <div className="card">
          <span className="label">Branding · rapports exportés</span>
          <div className="grid-2" style={{ gap: 14, marginTop: 12 }}>
            <div style={{ padding: 24, background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)', display: 'grid', placeItems: 'center', minHeight: 140 }}>
              <Icon name="upload" size={24} className="" />
              <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 8, textAlign: 'center' }}>Logo client (.svg ou .png)</div>
            </div>
            <div className="col" style={{ gap: 10 }}>
              <div style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)' }}>
                <span className="label">Couleur d'accent</span>
                <div className="row" style={{ gap: 8, marginTop: 6 }}>
                  <div style={{ width: 20, height: 20, borderRadius: 4, background: '#0d0a2c' }} />
                  <span className="mono">#0d0a2c</span>
                </div>
              </div>
              <div style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)' }}>
                <span className="label">Pied de page exports</span>
                <div style={{ fontSize: 'var(--text-xs)', marginTop: 4, color: 'var(--fg-muted)' }}>« Données hébergées en France · SecNumCloud · Banque Aurore SA »</div>
              </div>
            </div>
          </div>
        </div>

        <div className="card gold-frame">
          <span className="label"><Icon name="shield" size={11} /> Souveraineté & juridiction · transparence</span>
          <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-lg)', fontWeight: 600, margin: '6px 0 6px' }}>Fiche transparence opposable.</h4>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-relaxed)', maxWidth: 620 }}>
            Datacenter, certifications, sous-traitants, registre des transferts. Présente dans le header de l'app et dans chaque export PDF.
          </p>
          <div className="row" style={{ gap: 8, marginTop: 14 }}>
            <span className="chip gold"><span className="dot"></span>OVHcloud · Roubaix</span>
            <span className="chip outline">SecNumCloud</span>
            <span className="chip outline">ISO 27001</span>
            <span className="chip outline">HDS</span>
          </div>
          <button className="btn ghost" style={{ marginTop: 14 }}><Icon name="externalLink" size={14} />Voir la fiche complète</button>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// AD3 — Facturation & usage
// ============================================================
const HFScreenAD3 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Administration · Facturation · AD3"
      title="Facturation & usage."
      lead="Consommation Sentinel · plan actif · factures."
      actions={<>
        <button className="btn ghost"><Icon name="download" size={14} />Télécharger factures</button>
        <button className="btn primary">Modifier le plan</button>
      </>}
    />

    <div className="grid-3" style={{ marginBottom: 'var(--space-6)' }}>
      <div className="card dark lg">
        <span className="label">Plan actif</span>
        <h3 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-2xl)', fontWeight: 600, color: 'var(--fg-on-inverse)', margin: '4px 0 4px' }}>Sentinel Enterprise</h3>
        <div style={{ color: 'rgba(237,237,242,0.7)', fontSize: 'var(--text-sm)' }}>Annuel · 12 mois · renouv. 02.01.2027</div>
        <div className="divider-strong" style={{ background: 'rgba(237,237,242,0.1)', margin: '16px 0' }} />
        <div className="grid-2" style={{ gap: 12 }}>
          <div>
            <span className="label" style={{ color: 'rgba(237,237,242,0.6)' }}>Agents inclus</span>
            <div style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-3xl)', fontWeight: 600, color: 'var(--fg-on-inverse)', fontFeatureSettings: '"tnum"' }}>250</div>
          </div>
          <div>
            <span className="label" style={{ color: 'rgba(237,237,242,0.6)' }}>Évén. / mois</span>
            <div style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-3xl)', fontWeight: 600, color: 'var(--fg-on-inverse)', fontFeatureSettings: '"tnum"' }}>10 M</div>
          </div>
        </div>
      </div>

      <div className="card lg">
        <span className="label">Consommation MTD</span>
        <h3 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-2xl)', fontWeight: 600, margin: '4px 0 12px' }}>57 % du plan</h3>
        <div className="col" style={{ gap: 12 }}>
          {[
            ['Agents supervisés', 142, 250, ''],
            ['Événements traités', 4.8, 10, 'M'],
            ['Stockage piste audit', 38, 100, 'GB'],
            ['Connecteurs', 11, 25, ''],
          ].map(([n, v, max, u], i) => {
            const pct = (v / max) * 100;
            return (
              <div key={i}>
                <div className="row between" style={{ fontSize: 'var(--text-xs)' }}>
                  <span>{n}</span>
                  <span className="mono" style={{ fontWeight: 600 }}>{v}{u} / {max}{u}</span>
                </div>
                <div style={{ height: 5, background: 'var(--bg-sunken)', borderRadius: 3, marginTop: 4 }}>
                  <div style={{ width: `${pct}%`, height: '100%', background: pct > 80 ? 'var(--signal-caution)' : 'var(--navy-700)', borderRadius: 3 }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card gold-frame lg">
        <span className="label">Modèle de tarification</span>
        <h3 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-md)', fontWeight: 600, margin: '4px 0 6px' }}>À trancher — compteurs prêts.</h3>
        <p style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-relaxed)' }}>
          Par agent supervisé, par événement, ou par siège. Les compteurs ci-contre sont déjà compatibles avec les trois.
        </p>
        <div className="row" style={{ gap: 6, marginTop: 12 }}>
          <span className="chip gold"><span className="dot"></span>par agent</span>
          <span className="chip outline">par évén.</span>
          <span className="chip outline">par siège</span>
        </div>
      </div>
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--hairline)' }}>
        <h3 className="card-title">Factures & reçus</h3>
      </div>
      <table className="tbl">
        <thead>
          <tr><th>Période</th><th>N° facture</th><th className="num">Montant HT</th><th>Statut</th><th>Émise le</th><th></th></tr>
        </thead>
        <tbody>
          {[
            ['Mai 2026','FR-2026-05-AURORE','24 800 €','À régler','01 juin','warn'],
            ['Avril 2026','FR-2026-04-AURORE','24 800 €','Réglée','01 mai','pos'],
            ['Mars 2026','FR-2026-03-AURORE','24 800 €','Réglée','01 avr.','pos'],
            ['Février 2026','FR-2026-02-AURORE','24 800 €','Réglée','01 mars','pos'],
            ['Janvier 2026','FR-2026-01-AURORE','24 800 €','Réglée','01 fév.','pos'],
          ].map((r, i) => (
            <tr key={i}>
              <td><strong>{r[0]}</strong></td>
              <td className="mono">{r[1]}</td>
              <td className="num" style={{ fontWeight: 600 }}>{r[2]}</td>
              <td><span className={`chip ${r[5]}`}><span className="dot"></span>{r[3]}</span></td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[4]}</td>
              <td><button className="btn ghost sm"><Icon name="download" size={12} />PDF</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

// ============================================================
// AD4 — Audit log admin
// ============================================================
const HFScreenAD4 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Administration · Audit log · AD4"
      title="Journal des actions admin."
      lead="Toute action admin tracée · hash chain · export signé."
      actions={<>
        <button className="btn ghost"><Icon name="lock" size={14} />Vérifier intégrité</button>
        <button className="btn accent"><Icon name="download" size={14} />Export signé</button>
      </>}
    />

    <div className="filter-strip">
      <button className="filter-chip active">30 jours</button>
      <button className="filter-chip">Acteur <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Type <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Sévérité <Icon name="chevronDown" size={10} /></button>
      <div style={{ flex: 1 }} />
      <div className="row" style={{ padding: '6px 12px', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-full)', gap: 8 }}>
        <Icon name="search" size={12} className="" />
        <span style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>Rechercher…</span>
      </div>
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--space-5)' }}>
      <table className="tbl">
        <thead>
          <tr><th className="num">#</th><th>Timestamp</th><th>Acteur</th><th>Type</th><th>Cible</th><th>Détail</th><th>IP</th><th>Hash</th></tr>
        </thead>
        <tbody>
          {[
            [9824,'26.05 · 04:12:33','L. Mercier','agent.suspend','agent-rh-screening','justif. incident P1 prompt injection','82.65.•.•','1c4d…ae'],
            [9823,'26.05 · 03:58:02','C. Roche','policy.attach','rag-juridique','+ pii-detection-eu','78.41.•.•','9f2a…b7'],
            [9822,'25.05 · 18:14:01','L. Charlon','user.invite','contact@auditeur-x.fr','rôle Lecteur · expire 7 j','82.65.•.•','8e19…3b'],
            [9821,'25.05 · 17:22:14','C. Roche','export.audit','agent-rh-screening','dossier audit ZIP signé','78.41.•.•','7d04…11'],
            [9820,'25.05 · 14:02:09','N. Dubois','workflow.activate','wf_auto_suspend_v2','+ kill switch sur 3 P1 / 1 h','78.41.•.•','6c91…f2'],
            [9819,'25.05 · 11:30:48','L. Mercier','secret.rotate','azure-openai-prod-key','rotation manuelle','82.65.•.•','5b80…aa'],
            [9818,'24.05 · 09:14:32','L. Charlon','config.tenant','branding','màj logo client','82.65.•.•','4a73…99'],
            [9817,'24.05 · 08:02:18','C. Roche','agent.classify','copilot-credit','reclassif Élevé → Élevé','78.41.•.•','3990…87'],
          ].map((r, i) => (
            <tr key={i}>
              <td className="num mono">#{r[0]}</td>
              <td className="mono">{r[1]}</td>
              <td>{r[2]}</td>
              <td className="mono">{r[3]}</td>
              <td><strong>{r[4]}</strong></td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[5]}</td>
              <td className="mono" style={{ fontSize: 11 }}>{r[6]}</td>
              <td className="mono" style={{ fontSize: 10, color: 'var(--fg-subtle)' }}>{r[7]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="card gold-frame">
      <div className="row between">
        <div className="row" style={{ gap: 12 }}>
          <Icon name="lock" size={20} className="" />
          <div>
            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>Hash chain vérifiée</div>
            <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 2 }}>9 824 entrées contiguës sans rupture.</div>
          </div>
        </div>
        <span className="mono" style={{ fontSize: 'var(--text-xs)' }}>dernier hash · 1c4d…ae</span>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  HFScreenCO1, HFScreenCO2,
  HFScreenAD1, HFScreenAD2, HFScreenAD3, HFScreenAD4,
});