/* Hi-fi · Auth (A1, A2) + Cockpit variants (DPO, CAIO, COMEX) */

// ============================================================
// A1 — LOGIN (standalone, no app shell)
// ============================================================
const HFScreenA1 = () => (
  <div style={{
    minHeight: '100vh',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    background: 'var(--navy-900)',
  }}>
    {/* Left brand panel */}
    <div style={{
      padding: '64px 72px',
      color: 'var(--fg-on-inverse)',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '20%', right: '-25%', width: 460, height: 460,
        background: 'radial-gradient(circle, rgba(221,172,99,0.10) 0%, transparent 65%)',
        pointerEvents: 'none',
      }} />
      <div>
        <img src="assets/brand/logo-ascenzia-white.svg" alt="Ascenzia" style={{ height: 28 }} />
        <div style={{
          fontFamily: 'var(--font-primary)',
          fontSize: 10,
          letterSpacing: 'var(--track-label)',
          textTransform: 'uppercase',
          color: 'var(--gold-400)',
          marginTop: 8,
        }}>Sentinel · tour de contrôle IA</div>
      </div>

      <div style={{ position: 'relative' }}>
        <div style={{
          fontFamily: 'var(--font-accent)',
          fontSize: 'var(--text-5xl)',
          fontWeight: 'var(--fw-semibold)',
          lineHeight: 'var(--lh-tight)',
          letterSpacing: 'var(--track-display)',
        }}>
          La sentinelle silencieuse<br />
          de votre flotte d'agents&nbsp;IA.
        </div>
        <p style={{
          fontFamily: 'var(--font-standard)',
          fontSize: 'var(--text-md)',
          color: 'rgba(237,237,242,0.65)',
          lineHeight: 'var(--lh-relaxed)',
          margin: '20px 0 0',
          maxWidth: 440,
        }}>Surveiller. Sécuriser. Attester. Hébergé en France, qualifié SecNumCloud.</p>
      </div>

      <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
        <span className="chip gold">SecNumCloud</span>
        <span className="chip outline" style={{ color: 'rgba(237,237,242,0.7)', borderColor: 'rgba(237,237,242,0.18)' }}>AI Act</span>
        <span className="chip outline" style={{ color: 'rgba(237,237,242,0.7)', borderColor: 'rgba(237,237,242,0.18)' }}>ISO 27001</span>
        <span className="chip outline" style={{ color: 'rgba(237,237,242,0.7)', borderColor: 'rgba(237,237,242,0.18)' }}>RGPD</span>
        <span className="chip outline" style={{ color: 'rgba(237,237,242,0.7)', borderColor: 'rgba(237,237,242,0.18)' }}>HDS</span>
      </div>
    </div>

    {/* Right auth panel */}
    <div style={{
      background: 'var(--bg)',
      padding: '64px 80px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
    }}>
      <span className="label">Connexion</span>
      <h2 style={{
        fontFamily: 'var(--font-accent)',
        fontSize: 'var(--text-4xl)',
        fontWeight: 'var(--fw-semibold)',
        letterSpacing: 'var(--track-display)',
        lineHeight: 'var(--lh-tight)',
        margin: '6px 0 8px',
      }}>Bon retour.</h2>
      <p style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-md)', margin: '0 0 32px' }}>
        Connectez-vous à votre tenant Sentinel.
      </p>

      <div className="col" style={{ gap: 10, maxWidth: 380 }}>
        <button className="btn primary" style={{ padding: '14px 16px', justifyContent: 'flex-start', gap: 12 }}>
          <ProviderMarkHF name="Azure OpenAI" size={20} radius={4} />Continuer avec Azure AD
        </button>
        <button className="btn" style={{ padding: '14px 16px', justifyContent: 'flex-start', gap: 12 }}>
          <div style={{ width: 20, height: 20, borderRadius: 4, background: '#0066ff', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}>O</div>
          Okta
        </button>
        <button className="btn" style={{ padding: '14px 16px', justifyContent: 'flex-start', gap: 12 }}>
          <div style={{ width: 20, height: 20, borderRadius: 4, background: '#fff', border: '1px solid var(--hairline-strong)', color: '#4285F4', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}>G</div>
          Google Workspace
        </button>
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
        margin: '32px 0 24px', maxWidth: 380,
      }}>
        <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
        <span className="label" style={{ margin: 0 }}>ou mot de passe + MFA</span>
        <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
      </div>

      <div className="col" style={{ gap: 12, maxWidth: 380 }}>
        <div className="row" style={{ padding: '12px 14px', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)', gap: 10 }}>
          <Icon name="user" size={16} className="" />
          <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-sm)' }}>prenom.nom@entreprise.fr</span>
        </div>
        <div className="row" style={{ padding: '12px 14px', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)', gap: 10 }}>
          <Icon name="lock" size={16} className="" />
          <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-sm)' }}>••••••••••••</span>
        </div>
        <div className="row between">
          <a href="#" style={{ fontSize: 'var(--text-sm)', color: 'var(--fg-muted)' }}>Mot de passe oublié ?</a>
          <button className="btn primary">Se connecter</button>
        </div>
      </div>

      <div style={{
        marginTop: 48,
        paddingTop: 20,
        borderTop: '1px solid var(--hairline)',
        display: 'flex', alignItems: 'center', gap: 12,
        maxWidth: 380,
      }}>
        <SovBadge />
        <span style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>
          Données françaises, juridiction française.
        </span>
      </div>
    </div>
  </div>
);

// ============================================================
// A2 — ONBOARDING WIZARD (standalone)
// ============================================================
const HFScreenA2 = () => (
  <div style={{ minHeight: '100vh', background: 'var(--bg)' }}>
    {/* Lite topbar */}
    <div style={{
      padding: '20px 48px',
      borderBottom: '1px solid var(--hairline)',
      display: 'flex', alignItems: 'center', gap: 16,
    }}>
      <img src="assets/brand/logo-ascenzia-navy.svg" alt="Ascenzia" style={{ height: 22 }} />
      <span style={{
        fontFamily: 'var(--font-primary)',
        fontSize: 10,
        letterSpacing: 'var(--track-label)',
        textTransform: 'uppercase',
        color: 'var(--accent)',
        fontWeight: 600,
      }}>Sentinel</span>
      <div style={{ flex: 1 }} />
      <SovBadge />
      <div className="avatar" style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--navy-900)', color: 'var(--fg-on-inverse)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-primary)', fontWeight: 700, fontSize: 11 }}>LC</div>
    </div>

    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 48px 96px' }}>
      <span className="label">Première connexion</span>
      <h1 style={{
        fontFamily: 'var(--font-accent)',
        fontSize: 'var(--text-4xl)',
        fontWeight: 'var(--fw-semibold)',
        letterSpacing: 'var(--track-display)',
        lineHeight: 'var(--lh-tight)',
        margin: '6px 0 8px',
      }}>Mise en route de Sentinel.</h1>
      <p style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-md)', margin: '0 0 32px', maxWidth: 560 }}>
        Quatre étapes — environ 8 minutes. À l'issue, votre parc IA réel est cartographié, shadow compris.
      </p>

      {/* Stepper */}
      <div className="row" style={{ gap: 12, marginBottom: 40 }}>
        {[
          { n: '01', t: 'Organisation', s: 'done' },
          { n: '02', t: 'Équipe initiale', s: 'done' },
          { n: '03', t: 'Connecteurs', s: 'current' },
          { n: '04', t: 'Découverte', s: 'next' },
        ].map((step, i) => (
          <React.Fragment key={i}>
            <div className="row" style={{ gap: 10 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 'var(--radius-full)',
                background: step.s === 'done' ? 'var(--navy-900)' : step.s === 'current' ? 'var(--bg-elevated)' : 'transparent',
                color: step.s === 'done' ? 'var(--fg-on-inverse)' : step.s === 'current' ? 'var(--fg)' : 'var(--fg-subtle)',
                border: step.s === 'current' ? '2px solid var(--accent)' : step.s === 'next' ? '1px solid var(--hairline-strong)' : 'none',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
              }}>{step.s === 'done' ? <Icon name="check" size={12} /> : step.n}</div>
              <span style={{
                fontFamily: 'var(--font-standard)',
                fontSize: 'var(--text-sm)',
                fontWeight: step.s === 'current' ? 'var(--fw-semibold)' : 'var(--fw-regular)',
                color: step.s === 'next' ? 'var(--fg-subtle)' : 'var(--fg)',
              }}>{step.t}</span>
            </div>
            {i < 3 && <div style={{ flex: 1, height: 1, background: 'var(--hairline-strong)', maxWidth: 80 }} />}
          </React.Fragment>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)' }}>
        <div className="col" style={{ gap: 'var(--space-5)' }}>
          <div>
            <h3 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-2xl)', fontWeight: 600, margin: '0 0 6px' }}>Connectez vos sources d'agents IA.</h3>
            <p style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-relaxed)' }}>
              Sentinel se branche en lecture seule sur vos fournisseurs LLM, plateformes d'orchestration et LLM locaux pour recenser tout ce qui existe — y compris ce que la DSI ne sait pas encore.
            </p>
          </div>

          {/* Ascenzia local LLMs — featured */}
          <div className="card gold-frame">
            <div className="row between" style={{ alignItems: 'flex-start' }}>
              <div>
                <span className="label">LLM locaux · hébergés par Ascenzia</span>
                <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-lg)', fontWeight: 600, margin: '4px 0 4px' }}>Souverain par défaut.</h4>
                <p style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-normal)' }}>
                  Modèles open-weights tournant dans le SecNumCloud Ascenzia. Aucune sortie hors frontière française.
                </p>
              </div>
              <span className="chip gold"><span className="dot"></span>SecNumCloud</span>
            </div>
            <div className="grid-2" style={{ marginTop: 16, gap: 8 }}>
              {[
                { n: 'Mistral Large · FR', s: 'active' },
                { n: 'Mistral Small · FR', s: 'active' },
                { n: 'Llama 3.1 70B · FR', s: 'available' },
                { n: 'Qwen 2.5 32B · FR', s: 'available' },
              ].map((m, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: 10,
                  background: m.s === 'active' ? 'rgba(221,172,99,0.06)' : 'var(--bg-elevated)',
                  borderRadius: 'var(--radius-sm)',
                  border: '1px solid ' + (m.s === 'active' ? 'rgba(221,172,99,0.25)' : 'var(--hairline)'),
                }}>
                  <ProviderMarkHF name="Ascenzia" size={32} radius={6} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', fontWeight: 600 }}>{m.n}</div>
                    <div style={{ fontFamily: 'var(--font-standard)', fontSize: 11, color: 'var(--fg-muted)' }}>hébergé Roubaix</div>
                  </div>
                  {m.s === 'active'
                    ? <span className="chip pos"><span className="dot"></span>actif</span>
                    : <button className="btn ghost sm">activer</button>}
                </div>
              ))}
            </div>
          </div>

          <div>
            <span className="label">Fournisseurs LLM tiers</span>
            <div className="grid-3" style={{ marginTop: 8, gap: 8 }}>
              {[
                { n: 'OpenAI', s: 'connected' },
                { n: 'Anthropic', s: 'connected' },
                { n: 'Mistral AI', s: 'connected' },
                { n: 'Azure OpenAI', s: '' },
                { n: 'Google Vertex', s: '' },
                { n: 'AWS Bedrock', s: '' },
              ].map(p => (
                <div key={p.n} className="card" style={{ padding: 12, boxShadow: 'none', border: '1px solid var(--hairline)' }}>
                  <div className="row" style={{ gap: 10 }}>
                    <ProviderMarkHF name={p.n} size={28} radius={6} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', fontWeight: 600 }}>{p.n}</div>
                      <div style={{ fontSize: 10, color: 'var(--fg-muted)' }}>{p.s === 'connected' ? 'connecté' : 'non lié'}</div>
                    </div>
                    {p.s === 'connected' ? <Icon name="check" size={14} className="" /> : <Icon name="plus" size={14} className="" />}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <span className="label">Orchestrateurs</span>
            <div className="grid-3" style={{ marginTop: 8, gap: 8 }}>
              {['LangChain','LangGraph','n8n','Make','Azure AI Foundry','IDUN'].map(n => (
                <div key={n} className="card" style={{ padding: 12, boxShadow: 'none', border: '1px dashed var(--hairline-strong)' }}>
                  <div className="row" style={{ gap: 10 }}>
                    <ProviderMarkHF name={n} size={28} radius={6} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', fontWeight: 600 }}>{n}</div>
                      <div style={{ fontSize: 10, color: 'var(--fg-muted)' }}>non lié</div>
                    </div>
                    <Icon name="plus" size={14} className="" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="col" style={{ gap: 'var(--space-5)' }}>
          <div className="card dark">
            <span className="label">Aperçu de la découverte</span>
            <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, color: 'var(--fg-on-inverse)', margin: '6px 0 8px' }}>3 sources + 2 LLM Ascenzia</h4>
            <p style={{ color: 'rgba(237,237,242,0.65)', fontSize: 'var(--text-sm)', margin: 0, lineHeight: 'var(--lh-relaxed)' }}>
              Sentinel va interroger ces sources en lecture seule pendant ~6 min.
            </p>
            <div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid rgba(237,237,242,0.1)' }}>
              {[
                ['Agents attendus','~ 47',''],
                ['Dont shadow probables','~ 12','gold'],
                ['Dont sur LLM Ascenzia','~ 8','gold'],
              ].map(([k, v, c], i) => (
                <div key={i} className="row between" style={{ padding: '8px 0', borderBottom: i < 2 ? '1px solid rgba(237,237,242,0.06)' : 'none' }}>
                  <span style={{ color: 'rgba(237,237,242,0.7)', fontSize: 'var(--text-sm)' }}>{k}</span>
                  <span style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, color: c === 'gold' ? 'var(--accent)' : 'var(--fg-on-inverse)', fontFeatureSettings: '"tnum"' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card gold-frame">
            <div className="row" style={{ gap: 12, alignItems: 'flex-start' }}>
              <ProviderMarkHF name="Ascenzia" size={40} radius={8} />
              <div>
                <span className="label">Recommandation</span>
                <h5 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-md)', fontWeight: 600, margin: '4px 0 6px' }}>Migrer les cas sensibles vers les LLM Ascenzia.</h5>
                <p style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-relaxed)' }}>
                  Pour RH, crédit et juridique, nos modèles open-weights hébergés FR garantissent l'absence de transfert hors UE.
                </p>
              </div>
            </div>
          </div>

          <div className="card">
            <span className="label">Souveraineté · vue rapide</span>
            <div className="col" style={{ gap: 8, marginTop: 12 }}>
              {[
                'Lecture seule sur sources tierces',
                'Métadonnées stockées en FR uniquement',
                'Aucune donnée d\'agent ne quitte la frontière',
              ].map((t, i) => (
                <div key={i} className="row between">
                  <span style={{ fontSize: 'var(--text-sm)' }}>{t}</span>
                  <Icon name="check" size={14} className="" style={{ color: 'var(--signal-positive)' }} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="row between" style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--hairline)' }}>
        <button className="btn ghost">Passer l'étape</button>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn">Retour</button>
          <button className="btn accent">Continuer vers la découverte<Icon name="arrowRight" size={14} /></button>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// C1-DPO — Cockpit DPO
// ============================================================
const HFScreenC1DPO = () => (
  <div className="page">
    <PageHeader
      eyebrow="Cockpit · DPO · C1"
      title="Cockpit DPO."
      lead="Conformité AI Act + RGPD, échéances réglementaires, registre incidents notifiables."
      actions={<>
        <button className="btn ghost"><Icon name="filter" size={14} />30 jours</button>
        <button className="btn accent"><Icon name="fileText" size={14} />Préparer rapport mensuel</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Conformité AI Act" value="82" unit="%" sub="116 / 142 agents conformes" variant="gold" />
      <MetricCard label="DPIA en cours" value="6" sub="2 à valider · 1 en retard" />
      <MetricCard label="Incidents notifiables" value="0" sub="aucun délai CNIL en cours" variant="dark" />
      <MetricCard label="Doc. article 11" value="94" unit="%" sub="auto-générée, à jour" />
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 'var(--space-6)' }}>
      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Échéances réglementaires</h3>
            <p className="card-subtitle">Compte à rebours des obligations applicables au tenant.</p>
          </div>
        </div>
        <div className="col" style={{ gap: 10 }}>
          {[
            { d: '02 août 2026', t: 'GPAI — obligations de transparence', sub: '68 j · 3 agents concernés', v: 'crit' },
            { d: '02 février 2027', t: 'High-risk — évaluation conformité', sub: '254 j · 11 agents à classer', v: 'warn' },
            { d: 'T3 2026', t: 'Revue trimestrielle interne', sub: 'Préparation à lancer', v: 'info' },
            { d: 'novembre 2026', t: 'Renouvellement ISO 27001', sub: '180 j · documentation à jour', v: 'pos' },
          ].map((e, i) => (
            <div key={i} className="doc-tile">
              <div style={{
                width: 40, height: 40, borderRadius: 'var(--radius-sm)',
                background: 'var(--bg-sunken)',
                display: 'grid', placeItems: 'center',
                color: 'var(--fg-muted)',
                flexShrink: 0,
              }}><Icon name="fileCheck" size={18} /></div>
              <div style={{ flex: 1 }}>
                <span className="label" style={{ margin: 0, marginBottom: 4 }}>{e.d}</span>
                <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>{e.t}</div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 2 }}>{e.sub}</div>
              </div>
              <span className={`chip ${e.v}`}><span className="dot"></span>{e.v === 'crit' ? 'urgent' : e.v === 'warn' ? 'à planifier' : e.v === 'pos' ? 'OK' : 'à prévoir'}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="col" style={{ gap: 'var(--space-5)' }}>
        <div className="card">
          <div className="card-head">
            <h3 className="card-title">Statut DPIA / AIPD</h3>
          </div>
          <div className="grid-2" style={{ gap: 12 }}>
            {[
              ['Complétées', 34, ''],
              ['En cours', 6, ''],
              ['Requises non lancées', 3, 'accent'],
              ['Périmées', 2, 'crit'],
            ].map(([k, v, c], i) => (
              <div key={i} style={{ padding: 12, background: c === 'accent' ? 'rgba(221,172,99,0.08)' : c === 'crit' ? 'rgba(232,155,142,0.08)' : 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)' }}>
                <span className="label">{k}</span>
                <div style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-3xl)', fontWeight: 600, marginTop: 4, color: c === 'accent' ? 'var(--gold-700)' : c === 'crit' ? 'var(--signal-critical)' : 'var(--fg)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card dark">
          <span className="label">Registre incidents notifiables</span>
          <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, color: 'var(--fg-on-inverse)', margin: '6px 0 8px' }}>0 incident à notifier CNIL</h4>
          <p style={{ color: 'rgba(237,237,242,0.65)', fontSize: 'var(--text-sm)', margin: 0, lineHeight: 'var(--lh-relaxed)' }}>
            Aucun délai 72 h en cours. 4 quasi-incidents documentés à titre préventif.
          </p>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// C1-CAIO — Cockpit Chief AI Officer
// ============================================================
const HFScreenC1CAIO = () => (
  <div className="page">
    <PageHeader
      eyebrow="Cockpit · Chief AI Officer · C1"
      title="Cockpit IA — pilotage flotte."
      lead="Inventaire, performance, coûts, valeur métier. Vision globale du programme."
      actions={<>
        <button className="btn ghost"><Icon name="filter" size={14} />Direction</button>
        <button className="btn ghost"><Icon name="filter" size={14} />MTD</button>
        <button className="btn primary"><Icon name="download" size={14} />Exporter</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Agents en production" value="142" sub="+ 18 ce mois" />
      <MetricCard label="Health score moyen" value="74" unit="/ 100" trend={{ dir: 'down', label: '-3 pts' }} />
      <MetricCard label="Coûts cumulés MTD" value="38.4" unit="k€" sub="projection mois 52 k€" variant="dark" />
      <MetricCard label="Valeur métier estimée" value="312" unit="k€" sub="ROI ×6.1 (hypothèse)" variant="gold" />
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)', marginBottom: 'var(--space-6)' }}>
      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Inventaire · direction × criticité</h3>
            <p className="card-subtitle">Distribution des agents par direction métier et niveau de criticité.</p>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr><th>Direction</th><th className="num">C1</th><th className="num">C2</th><th className="num">C3</th><th className="num">C4</th><th className="num">Total</th></tr>
          </thead>
          <tbody>
            {[
              ['Risques & crédit',4,9,3,2,18],
              ['RH & paie',2,5,6,4,17],
              ['Service client',1,6,12,9,28],
              ['Marketing & ventes',0,2,8,14,24],
              ['Juridique & conformité',3,4,2,1,10],
              ['Tech & dev (copilots)',0,3,15,27,45],
            ].map((r, i) => (
              <tr key={i}>
                <td><strong>{r[0]}</strong></td>
                {r.slice(1, 5).map((n, j) => (
                  <td key={j} className="num" style={{ color: n === 0 ? 'var(--fg-subtle)' : 'var(--fg)' }}>{n}</td>
                ))}
                <td className="num" style={{ fontWeight: 700 }}>{r[5]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Coûts par modèle · MTD</h3>
            <p className="card-subtitle">k€ consommés depuis le 1er du mois.</p>
          </div>
        </div>
        <div className="col" style={{ gap: 10, marginTop: 6 }}>
          {[
            ['gpt-4o', 12.4, 'OpenAI'],
            ['claude-3.7', 9.8, 'Anthropic'],
            ['mistral-large (Ascenzia)', 6.4, 'Ascenzia'],
            ['gpt-4o-mini', 4.8, 'OpenAI'],
            ['azure-gpt-4', 3.5, 'Azure OpenAI'],
            ['vertex-gemini', 1.5, 'Google Vertex'],
          ].map(([m, v, p], i) => (
            <div key={i} className="row" style={{ gap: 10, alignItems: 'center' }}>
              <ProviderMarkHF name={p} size={24} radius={5} />
              <div style={{ flex: 1 }}>
                <div className="row between">
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', fontWeight: 600 }}>{m}</span>
                  <span className="mono" style={{ fontWeight: 600 }}>{v} k€</span>
                </div>
                <div style={{ height: 5, background: 'var(--bg-sunken)', borderRadius: 3, marginTop: 4 }}>
                  <div style={{ width: `${(v / 12.4) * 100}%`, height: '100%', background: p === 'Ascenzia' ? 'var(--accent)' : 'var(--navy-700)', borderRadius: 3 }} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 'var(--space-6)' }}>
      <div className="card lg" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <span className="label" style={{ alignSelf: 'flex-start' }}>Santé moyenne flotte</span>
        <div style={{ position: 'relative', display: 'inline-block', marginTop: 8 }}>
          <ActivityRingsHF size={220} dimensions={dims([81, 68, 72, 64, 82])} />
          <div style={{
            position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-accent)', fontSize: 'var(--text-5xl)', fontWeight: 600,
            pointerEvents: 'none', fontFeatureSettings: '"tnum"',
          }}>74</div>
        </div>
        <p style={{ marginTop: 20, fontSize: 'var(--text-sm)', color: 'var(--fg-muted)', textAlign: 'center', maxWidth: 280 }}>
          5 dimensions agrégées : qualité, dérive, coût, sécurité, conformité.
        </p>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Top 5 par valeur métier</h3>
            <p className="card-subtitle">Hypothèse — estimation à partir des cas d'usage déclarés.</p>
          </div>
          <span className="chip outline">hypothèse [H]</span>
        </div>
        <table className="tbl">
          <thead><tr><th>Agent</th><th>Cas d'usage</th><th className="num">Valeur estimée</th></tr></thead>
          <tbody>
            {[
              ['copilot-credit','Évaluation crédit accélérée','72 k€'],
              ['rag-juridique','Recherche jurisprudence','54 k€'],
              ['agent-cashflow','Anticipation trésorerie','38 k€'],
              ['chatbot-helpdesk','Tickets N1 absorbés','31 k€'],
              ['agent-rh-screening','— suspendu —','—'],
            ].map((r, i) => (
              <tr key={i}>
                <td><strong>{r[0]}</strong></td>
                <td style={{ color: 'var(--fg-muted)' }}>{r[1]}</td>
                <td className="num" style={{ fontWeight: 600, color: r[2] === '—' ? 'var(--fg-subtle)' : 'var(--fg)' }}>{r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

// ============================================================
// C1-COMEX — Cockpit COMEX
// ============================================================
const HFScreenC1COMEX = () => (
  <div className="page">
    <PageHeader
      eyebrow="Cockpit · COMEX · C1"
      title="Tour de contrôle exécutive."
      lead="Quatre repères. Une phrase. Un rapport."
      actions={<>
        <button className="btn ghost">Mai 2026</button>
        <button className="btn accent"><Icon name="fileText" size={14} />Voir le rapport mensuel</button>
      </>}
    />

    {/* Macro 4-tile */}
    <div className="grid-4" style={{ gap: 'var(--space-6)', marginBottom: 'var(--space-6)' }}>
      {[
        { l: 'Parc IA', v: '142', s: 'agents supervisés', t: '' },
        { l: 'Posture sécurité', v: '78', u: '/ 100', s: '▲ +4 vs avril', t: 'dark' },
        { l: 'Conformité AI Act', v: '82', u: '%', s: '116 / 142 agents', t: 'gold' },
        { l: 'Coûts MTD', v: '38.4', u: 'k€', s: 'projection 52 k€', t: '' },
      ].map((tile, i) => (
        <div key={i} className={`card lg ${tile.t === 'dark' ? 'dark' : ''} ${tile.t === 'gold' ? 'gold-frame' : ''}`} style={{ minHeight: 160 }}>
          <span className="label">{tile.l}</span>
          <div style={{
            fontFamily: 'var(--font-accent)',
            fontSize: 'var(--text-6xl)',
            fontWeight: 'var(--fw-semibold)',
            lineHeight: 0.95,
            letterSpacing: 'var(--track-display)',
            marginTop: 8,
            color: tile.t === 'dark' ? 'var(--fg-on-inverse)' : 'var(--fg)',
            fontFeatureSettings: '"tnum"',
          }}>{tile.v}{tile.u && <span style={{ fontSize: 'var(--text-xl)', color: 'var(--fg-muted)', marginLeft: 6 }}>{tile.u}</span>}</div>
          <div style={{ marginTop: 8, color: tile.t === 'dark' ? 'rgba(237,237,242,0.65)' : 'var(--fg-muted)', fontSize: 'var(--text-sm)' }}>{tile.s}</div>
        </div>
      ))}
    </div>

    {/* Auto synthesis */}
    <div className="card gold-frame lg" style={{ marginBottom: 'var(--space-6)' }}>
      <span className="label"><Icon name="sparkle" size={11} /> Synthèse rédigée automatiquement</span>
      <p style={{
        fontFamily: 'var(--font-accent)',
        fontSize: 'var(--text-2xl)',
        fontWeight: 'var(--fw-medium)',
        lineHeight: 'var(--lh-snug)',
        margin: '12px 0 16px',
        maxWidth: 920,
        color: 'var(--fg)',
      }}>
        « Le parc IA progresse de manière maîtrisée — 18 nouveaux agents ce mois, posture en hausse de 4 points. Trois incidents critiques ont été résolus en moins de 7 minutes en moyenne. Conformité AI Act stable à 82 %&nbsp;; 3 DPIA restent à lancer pour atteindre l'objectif fin de trimestre. »
      </p>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn primary"><Icon name="fileText" size={14} />Rapport mensuel signé</button>
        <button className="btn ghost">Partager au conseil</button>
      </div>
    </div>

    {/* Three gauges */}
    <div className="grid-3" style={{ gap: 'var(--space-5)' }}>
      {[
        { l: 'Risque IA résiduel', v: 22, color: '#7ac9a8', sub: 'faible · objectif < 30' },
        { l: 'Couverture conformité', v: 82, color: '#ddac63', sub: 'AI Act + RGPD' },
        { l: 'Maturité gouvernance', v: 67, color: '#8ab4d8', sub: 'vs. cible 80' },
      ].map((g, i) => (
        <div key={i} className="card" style={{ textAlign: 'center', padding: 'var(--space-6)' }}>
          <span className="label">{g.l}</span>
          <div style={{ marginTop: 12, position: 'relative', display: 'inline-block' }}>
            <ActivityRingsHF size={140} strokeRatio={0.12} dimensions={[{ label: g.l, value: g.v, color: g.color }]} glow={false} />
            <div style={{
              position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
              fontFamily: 'var(--font-accent)', fontSize: 'var(--text-3xl)', fontWeight: 600,
              fontFeatureSettings: '"tnum"',
            }}>{g.v}{g.l.includes('Risque') ? '' : '%'}</div>
          </div>
          <div style={{ marginTop: 8, fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>{g.sub}</div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { HFScreenA1, HFScreenA2, HFScreenC1DPO, HFScreenC1CAIO, HFScreenC1COMEX });
