// Primust proof-chain product visuals. No external images; the artifact is the brand.

function VisualFrame({ alt, children, caption }) {
  const { C, F } = window.PT;
  return (
    <figure
      role="img"
      aria-label={alt}
      style={{
        margin: 0,
        border: `1px solid ${C.line}`,
        background: C.paper,
        borderRadius: 8,
        width: '100%',
        maxWidth: '100%',
        overflow: 'hidden',
        boxShadow: '0 18px 48px -34px rgba(20,17,13,0.34)',
      }}
    >
      <div style={{ padding: 20, overflowX: 'auto' }}>{children}</div>
      {caption && (
        <figcaption style={{
          borderTop: `1px solid ${C.lineSoft}`,
          padding: '12px 16px',
          fontFamily: F.mono,
          fontSize: 11,
          color: C.dim,
          letterSpacing: 0,
        }}>
          {caption}
        </figcaption>
      )}
    </figure>
  );
}

function StatusPill({ children, tone = 'warn' }) {
  const { C, F } = window.PT;
  const color = tone === 'good' ? C.good : tone === 'fail' ? '#7A2E2E' : C.warn;
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 7,
      border: `1px solid ${color}`,
      color,
      borderRadius: 999,
      padding: '5px 10px',
      fontFamily: F.mono,
      fontSize: 11,
      fontWeight: 600,
      letterSpacing: 0,
      whiteSpace: 'nowrap',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 6, background: color }} />
      {children}
    </span>
  );
}

function EvidenceNode({ title, sub, step }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      minWidth: 0,
      border: `1px solid ${C.line}`,
      background: '#FBFAF6',
      borderRadius: 6,
      padding: 14,
      position: 'relative',
      zIndex: 1,
      minHeight: 118,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', marginBottom: 10 }}>
        <div style={{
          fontFamily: F.mono,
          fontSize: 9,
          color: C.dim,
          border: `1px solid ${C.line}`,
          background: C.paper,
          borderRadius: 999,
          padding: '3px 7px',
        }}>0{step}</div>
        <div style={{ width: 16, height: 16, border: `1px solid ${C.line}`, background: C.paper }}>
          <div style={{ width: 9, height: 1, background: C.accent, margin: '7px auto 0' }} />
        </div>
      </div>
      <div style={{
        fontFamily: F.serif,
        fontSize: 18,
        lineHeight: 1.15,
        color: C.ink,
        wordBreak: 'normal',
        overflowWrap: 'normal',
        hyphens: 'none',
      }}>{title}</div>
      {sub && (
        <div style={{
          marginTop: 8,
          fontFamily: F.mono,
          fontSize: 11,
          color: C.dim,
          letterSpacing: 0,
          lineHeight: 1.35,
        }}>{sub}</div>
      )}
    </div>
  );
}

function HeroProofChainVisual() {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  const nodes = [
    ['Scope Authorization', 'allowed work'],
    ['Control Receipts', 'controls ran'],
    ['Runtime Evidence', 'events + gaps'],
    ['Outcome Binding', 'result bound'],
    ['Governed-Execution Credential', 'signed chain'],
    ['Evidence Pack', 'portable artifact'],
    ['Offline Verifier', 'third-party check'],
  ];
  return (
    <VisualFrame
      alt="Evidence chain showing Scope Authorization, Control Receipts, Runtime Evidence, Outcome Binding, Governed-Execution Credential, Evidence Pack, and Offline Verifier."
      caption="From approved work to verifier-readable proof."
    >
      <div style={{ paddingBottom: 2 }}>
        {narrow ? (
          <div style={{ display: 'grid', gap: 8 }}>
            {nodes.map((n, i) => (
              <div key={n[0]} style={{
                border: `1px solid ${C.line}`,
                background: '#FBFAF6',
                borderRadius: 6,
                padding: '11px 12px',
                display: 'grid',
                gridTemplateColumns: '42px minmax(0, 1fr) 18px',
                gap: 10,
                alignItems: 'center',
              }}>
                <div style={{
                  fontFamily: F.mono,
                  fontSize: 10,
                  color: C.dim,
                  border: `1px solid ${C.line}`,
                  background: C.paper,
                  borderRadius: 999,
                  padding: '3px 7px',
                  textAlign: 'center',
                }}>0{i + 1}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontFamily: F.serif, fontSize: 18, lineHeight: 1.12, color: C.ink }}>{n[0]}</div>
                  <div style={{ marginTop: 3, fontFamily: F.mono, fontSize: 10.5, color: C.dim }}>{n[1]}</div>
                </div>
                <div style={{ fontFamily: F.mono, color: C.accent, fontSize: 15 }}>{i < nodes.length - 1 ? '↓' : '✓'}</div>
              </div>
            ))}
          </div>
        ) : (
          <>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
              gap: 12,
              position: 'relative',
              alignItems: 'stretch',
            }}>
              {nodes.map((n, i) => <EvidenceNode key={n[0]} title={n[0]} sub={n[1]} step={i + 1} />)}
            </div>
            <div style={{
              marginTop: 12,
              padding: '10px 12px',
              border: `1px solid ${C.lineSoft}`,
              borderRadius: 6,
              background: C.accentSoft,
              fontFamily: F.mono,
              fontSize: 11,
              color: C.accentDeep,
              display: 'flex',
              flexWrap: 'wrap',
              gap: '6px 8px',
            }}>
              {nodes.map((n, i) => (
                <span key={`summary-${n[0]}`}>
                  {n[0]}{i < nodes.length - 1 && <span style={{ color: C.dim }}> →</span>}
                </span>
              ))}
            </div>
          </>
        )}
      </div>
    </VisualFrame>
  );
}

function MetricRow({ k, v, strong }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(92px, 0.85fr) minmax(0, 1.15fr)',
      gap: 10,
      alignItems: 'baseline',
      padding: '9px 0',
      borderBottom: `1px dotted ${C.line}`,
      fontFamily: F.sans,
      fontSize: 13,
      lineHeight: 1.4,
    }}>
      <div style={{ color: C.dim }}>{k}</div>
      <div style={{ color: strong ? C.ink : C.inkSoft, fontFamily: strong ? F.mono : F.sans, minWidth: 0, overflowWrap: 'break-word', wordBreak: 'normal' }}>{v}</div>
    </div>
  );
}

function ProofMixBar({ compact = false }) {
  const { C, F } = window.PT;
  const segments = [
    ['Mathematical', 24, C.good],
    ['Verified Model', 18, C.accent],
    ['Execution', 42, '#B09468'],
    ['Witnessed', 8, '#5B7A8B'],
    ['Attestation', 8, C.dim],
  ];
  return (
    <div style={{ margin: compact ? '8px 0' : '14px 0 10px' }}>
      <div style={{
        display: 'flex',
        height: compact ? 10 : 14,
        borderRadius: 999,
        overflow: 'hidden',
        border: `1px solid ${C.line}`,
        background: C.bgAlt,
      }}>
        {segments.map(([label, pct, color]) => (
          <div key={label} aria-label={`${label} ${pct}%`} style={{ width: `${pct}%`, background: color }} />
        ))}
      </div>
      {!compact && (
        <div style={{ display: 'grid', gap: 6, marginTop: 10 }}>
          {segments.map(([label, pct, color]) => (
            <div key={label} style={{
              display: 'grid',
              gridTemplateColumns: '10px 1fr auto',
              gap: 8,
              alignItems: 'center',
              fontFamily: F.mono,
              fontSize: 10.5,
              color: C.dim,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 8, background: color }} />
              <span>{label}</span>
              <span>{pct}%</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function GovernedCredentialCard({ result = 'PARTIAL', gaps = '2', tone = 'warn' } = {}) {
  const { C, F } = window.PT;
  const rows = [
    ['Credential ID', 'gec_7F4A'],
    ['Scope', 'GitHub issue #418'],
    ['Outcome', 'PR #1842'],
    ['Control Receipts', '17'],
    ['Gaps', gaps],
    ['Signature', 'Ed25519'],
    ['Timestamp', 'RFC 3161'],
    ['Content', 'commitments only'],
  ];
  return (
    <VisualFrame alt="Mock Governed-Execution Credential card showing result, proof mix, gaps, signature, timestamp, and offline verification status.">
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'center', marginBottom: 18 }}>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 11, color: C.dim, letterSpacing: 0, textTransform: 'uppercase' }}>
            Governed-Execution Credential
          </div>
          <h3 style={{ margin: '8px 0 0', fontFamily: F.serif, fontSize: 26, lineHeight: 1.05, color: C.ink, fontWeight: 400 }}>
            Result: {result}
          </h3>
        </div>
        <StatusPill tone={tone}>{result}</StatusPill>
      </div>
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 6, padding: 14, background: '#FBFAF6', marginBottom: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline' }}>
          <div style={{ fontFamily: F.mono, fontSize: 10.5, color: C.dim, textTransform: 'uppercase' }}>Proof Mix</div>
        </div>
        <ProofMixBar />
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        columnGap: 18,
        rowGap: 0,
      }}>
        {rows.map(([k, v], i) => <MetricRow key={k} k={k} v={v} strong={i < 2} />)}
      </div>
      <div style={{
        marginTop: 14,
        padding: '10px 12px',
        background: C.accentSoft,
        borderRadius: 6,
        fontFamily: F.mono,
        fontSize: 12,
        color: C.accentDeep,
      }}>
        Offline-verifiable
      </div>
    </VisualFrame>
  );
}

function CodingAgentPrCheckMock() {
  const { C, F } = window.PT;
  const rows = [
    ['Scope Authorization', 'GitHub issue #418 bound'],
    ['Control Receipts', '17 observed'],
    ['Proof Mix', 'Mathematical 24% · Verified Model 18% · Execution 42%'],
    ['Outcome Binding', 'PR #1842 and CI result bound'],
    ['Gaps', 'network egress unattributed\ndetector unreachable'],
    ['Merge policy', 'warning'],
  ];
  return (
    <VisualFrame
      alt="Mock pull request check showing Primust chain verification result, proof mix, control receipts, gaps, and merge policy."
      caption="Policy decides whether PARTIAL blocks, warns, or exports for review."
    >
      <div style={{
        border: `1px solid ${C.line}`,
        borderRadius: 6,
        overflow: 'hidden',
        background: '#FBFAF6',
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          gap: 16,
          alignItems: 'center',
          padding: '15px 16px',
          borderBottom: `1px solid ${C.line}`,
        }}>
          <div style={{ fontFamily: F.sans, fontWeight: 650, color: C.ink }}>
            Primust Chain Verification: PARTIAL
          </div>
          <StatusPill>PARTIAL</StatusPill>
        </div>
        <div style={{ padding: '8px 16px 14px' }}>
          {rows.map(([k, v]) => (
            <div key={k} style={{
              display: 'grid',
              gridTemplateColumns: '160px 1fr',
              gap: 18,
              padding: '10px 0',
              borderBottom: `1px solid ${C.lineSoft}`,
              fontFamily: F.sans,
              fontSize: 13.5,
            }}>
              <div style={{ color: C.dim }}>{k}</div>
              <div style={{ color: C.ink, whiteSpace: 'pre-line' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </VisualFrame>
  );
}

function SiemEventMock({ scenario = 'agent' } = {}) {
  const { C, F } = window.PT;
  const eventText = scenario === 'coding' ? `{
  "event_type": "primust.chain_verification.completed",
  "system_id": "developer-tools",
  "workflow_id": "coding-agent-pr",
  "scope_authorization_ref": "github_issue_418",
  "outcome_ref": "github_pr_1842",
  "result": "PARTIAL",
  "proof_mix": {
    "mathematical": 0.24,
    "verified_model": 0.18,
    "execution": 0.42,
    "witnessed": 0.08,
    "attestation": 0.08
  },
  "gap_count": 2,
  "top_gap_types": [
    "network_egress_unattributed",
    "detector_unreachable"
  ],
  "credential_id": "gec_7F4A",
  "evidence_pack_ref": "pack_2026_05_04_001"
}` : `{
  "event_type": "primust.chain_verification.completed",
  "system_id": "enterprise-agents",
  "workflow_id": "agent-workflow",
  "scope_authorization_ref": "workflow_approval_418",
  "outcome_ref": "case_update_1842",
  "result": "PARTIAL",
  "proof_mix": {
    "mathematical": 0.24,
    "verified_model": 0.18,
    "execution": 0.42,
    "witnessed": 0.08,
    "attestation": 0.08
  },
  "gap_count": 2,
  "top_gap_types": [
    "network_egress_unattributed",
    "detector_unreachable"
  ],
  "credential_id": "gec_7F4A",
  "evidence_pack_ref": "pack_2026_05_04_001"
}`;
  return (
    <VisualFrame alt="Mock SIEM event containing Primust chain verification result with metadata, proof mix, gaps, credential ID, and evidence pack reference.">
      <pre style={{
        margin: 0,
        overflowX: 'auto',
        whiteSpace: 'pre',
        fontFamily: F.mono,
        fontSize: 12.5,
        lineHeight: 1.65,
        color: C.ink,
      }}>{eventText}</pre>
    </VisualFrame>
  );
}

function EvidencePackCard() {
  const rows = [
    ['Pack ID', 'pack_2026_05_04_001'],
    ['Period', 'May 2026'],
    ['Systems covered', 'enterprise-agents'],
    ['Credentials included', '128'],
    ['Proof Mix', 'Mathematical 21% · Verified Model 17% · Execution 44%'],
    ['Open gaps', '7'],
    ['Trust roots', 'pinned'],
  ];
  return (
    <VisualFrame alt="Mock Evidence Pack card showing pack ID, period, systems covered, credentials included, proof mix, open gaps, trust roots, and offline verification command.">
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'center', marginBottom: 18 }}>
        <h3 style={{ margin: 0, fontFamily: window.PT.F.serif, fontSize: 28, fontWeight: 400 }}>Evidence Pack</h3>
        <StatusPill tone="good">portable</StatusPill>
      </div>
      {rows.map(([k, v]) => <MetricRow key={k} k={k} v={v} strong={k === 'Pack ID'} />)}
      <CodeLine label="Offline verify" command="primust verify pack.json --type pack --no-fetch-keys" />
    </VisualFrame>
  );
}

function CodeLine({ label, command }) {
  const { C, F } = window.PT;
  return (
    <div style={{ marginTop: 14 }}>
      <div style={{ fontFamily: F.mono, fontSize: 10.5, color: C.dim, textTransform: 'uppercase', marginBottom: 6 }}>
        {label}
      </div>
      <div style={{
        border: `1px solid ${C.line}`,
        background: '#FBFAF6',
        borderRadius: 6,
        padding: '10px 12px',
        fontFamily: F.mono,
        fontSize: 12,
        color: C.ink,
        overflowX: 'auto',
        whiteSpace: 'nowrap',
      }}>{command}</div>
    </div>
  );
}

function PlaneCard({ title, subtitle, lines }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      border: `1px solid ${C.line}`,
      background: '#FBFAF6',
      borderRadius: 6,
      padding: 16,
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
      gap: 18,
      alignItems: 'start',
    }}>
      <div>
        <div style={{ fontFamily: F.serif, fontSize: 22, color: C.ink, marginBottom: 6 }}>{title}</div>
        <div style={{ fontFamily: F.mono, fontSize: 11, color: C.accent }}>{subtitle}</div>
      </div>
      <div>
        {lines.map(line => (
          <div key={line} style={{ fontFamily: F.sans, fontSize: 13, color: C.inkSoft, lineHeight: 1.45, padding: '4px 0', borderBottom: `1px solid ${C.lineSoft}` }}>
            {line}
          </div>
        ))}
      </div>
    </div>
  );
}

function LabeledArrow({ label }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '34px 1fr',
      gap: 10,
      alignItems: 'center',
      padding: '4px 12px',
      color: C.dim,
      fontFamily: F.mono,
      fontSize: 11,
      lineHeight: 1.4,
    }}>
      <div style={{ fontSize: 20, color: C.accent, textAlign: 'center' }}>↓</div>
      {label}
    </div>
  );
}

function ThreePlaneTrustVisual() {
  const { C, F } = window.PT;
  return (
    <VisualFrame
      alt="Three-plane trust diagram showing customer Execution Plane, Primust Credential Plane, and Reliance Plane, with only commitments, pointers, metadata, and verification results sent to Primust."
      caption="Raw governed content stays in the Execution Plane."
    >
      <div style={{ display: 'grid', gap: 10 }}>
        <PlaneCard title="Execution Plane" subtitle="Customer environment" lines={['Raw content', 'tools, agents, controls', 'customer logs']} />
        <LabeledArrow label="commitments, pointers, metadata, verification results" />
        <PlaneCard title="Credential Plane" subtitle="Primust" lines={['signing', 'timestamping', 'credential issuance']} />
        <LabeledArrow label="signed credential, evidence pack, public keys" />
        <PlaneCard title="Reliance Plane" subtitle="Deployer, vendor, auditor, carrier, regulator" lines={['counterparty review', 'offline verification', 'portable proof']} />
      </div>
    </VisualFrame>
  );
}

function ChainDetailMock({
  title = 'Agent run #418 completed governed workflow #1842',
  result = 'PARTIAL',
  rows = [
    ['Scope Authorization', 'workflow approval #418 bound'],
    ['Actor / agent / model', 'AI agent, runtime, and model identity observed'],
    ['Control Receipts', '17'],
    ['Runtime Evidence', 'tool calls, retrievals, record writes, detector results'],
    ['Outcome Binding', 'workflow outcome #1842 bound'],
    ['Proof Mix', 'Mathematical 24% · Verified Model 18% · Execution 42%'],
    ['Gaps', 'network egress unattributed, detector unreachable'],
    ['Exports', 'SIEM event sent, audit export queued, Evidence Pack generated'],
    ['Offline verify', 'primust verify pack.json --type pack --no-fetch-keys'],
  ],
} = {}) {
  const { C, F } = window.PT;
  return (
    <VisualFrame alt="Mock Chain Detail screen showing verdict, proof mix, authorization, control receipts, runtime evidence, outcome binding, gaps, exports, and offline verification command.">
      <div style={{
        border: `1px solid ${C.line}`,
        borderRadius: 6,
        overflow: 'hidden',
        background: '#FBFAF6',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'flex-start', padding: 18, borderBottom: `1px solid ${C.line}` }}>
          <div>
            <div style={{ fontFamily: F.mono, fontSize: 11, color: C.dim, textTransform: 'uppercase' }}>Chain Detail</div>
            <h3 style={{ margin: '7px 0 0', fontFamily: F.serif, fontSize: 26, lineHeight: 1.08, fontWeight: 400, color: C.ink }}>
              {title}
            </h3>
          </div>
          <div style={{ display: 'grid', gap: 8, justifyItems: 'end' }}>
            <StatusPill>{result}</StatusPill>
            <div style={{ width: 132 }}><ProofMixBar compact /></div>
          </div>
        </div>
        <div style={{ padding: '8px 18px 18px' }}>
          {rows.map(([k, v]) => (
            <div key={k} style={{
              display: 'grid',
              gridTemplateColumns: '180px 1fr',
              gap: 18,
              padding: '10px 0',
              borderBottom: `1px solid ${C.lineSoft}`,
              fontFamily: F.sans,
              fontSize: 13.5,
              lineHeight: 1.45,
            }}>
              <div style={{ color: C.dim }}>{k}</div>
              <div style={{ color: C.ink }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </VisualFrame>
  );
}

function IntegrationsHubVisual() {
  const { C, F } = window.PT;
  const left = ['Agent runtime', 'Tickets / approvals', 'Tools / MCP', 'IAM', 'scanners', 'CI/CD', 'logs / events'];
  const arrows = ['commitment', 'hash', 'pointer', 'metadata', 'allowlisted event metadata', 'verification result'];
  const right = ['SIEM event', 'PR check', 'CI/CD gate', 'webhook', 'Evidence Pack', 'audit export', 'data lake event', 'Offline Verifier'];
  const panelStyle = {
    border: `1px solid ${C.line}`,
    borderRadius: 6,
    background: '#FBFAF6',
    padding: 14,
    minWidth: 0,
  };
  return (
    <VisualFrame
      alt="Integration diagram showing customer tools sending commitments, hashes, pointers, metadata, and verification results to Primust, which emits SIEM events, PR checks, CI/CD gates, webhooks, Evidence Packs, audit exports, and offline verifier results."
      caption="Your tools keep the raw events. Primust binds verifier-readable evidence."
    >
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
        gap: 12,
        alignItems: 'stretch',
      }}>
        <div style={panelStyle}>
          <div style={{ fontFamily: F.mono, fontSize: 10.5, color: C.dim, textTransform: 'uppercase', marginBottom: 6 }}>Customer tools</div>
          <div style={{ fontFamily: F.serif, fontSize: 20, color: C.ink, marginBottom: 8 }}>Raw events stay here</div>
          {left.map(item => <MiniItem key={item}>{item}</MiniItem>)}
        </div>
        <div style={{ ...panelStyle, display: 'grid', gap: 7, alignContent: 'start' }}>
          <div style={{ fontFamily: F.mono, fontSize: 10.5, color: C.dim, textTransform: 'uppercase', marginBottom: 2 }}>Primust receives</div>
          {arrows.map(item => (
            <div key={item} style={{ display: 'grid', gridTemplateColumns: '1fr 20px', gap: 7, alignItems: 'center', fontFamily: F.mono, fontSize: 10.5, color: C.dim, padding: '5px 0', borderBottom: `1px solid ${C.lineSoft}` }}>
              <span>{item}</span><span style={{ color: C.accent, fontSize: 15, textAlign: 'right' }}>→</span>
            </div>
          ))}
        </div>
        <div style={panelStyle}>
          <div style={{ fontFamily: F.mono, fontSize: 10.5, color: C.dim, textTransform: 'uppercase', marginBottom: 6 }}>Outputs</div>
          <div style={{ fontFamily: F.serif, fontSize: 20, color: C.ink, marginBottom: 8 }}>Verifier results travel</div>
          {right.map(item => <MiniItem key={item}>{item}</MiniItem>)}
        </div>
        <div style={{
          gridColumn: '1 / -1',
          border: `1px solid ${C.line}`,
          borderRadius: 6,
          background: C.accentSoft,
          padding: '12px 14px',
          display: 'flex',
          justifyContent: 'space-between',
          gap: 14,
          alignItems: 'center',
          flexWrap: 'wrap',
        }}>
          <div style={{ fontFamily: F.serif, fontSize: 22, color: C.ink }}>Primust Chain Verifier</div>
          <div style={{ fontFamily: F.mono, fontSize: 11, color: C.accentDeep }}>PASS / PARTIAL / FAIL · signed evidence chain · offline-verifiable outputs</div>
        </div>
      </div>
    </VisualFrame>
  );
}

function MiniItem({ children }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      fontFamily: F.sans,
      fontSize: 13,
      color: C.inkSoft,
      padding: '6px 0',
      borderBottom: `1px solid ${C.lineSoft}`,
    }}>{children}</div>
  );
}

Object.assign(window, {
  HeroProofChainVisual,
  GovernedCredentialCard,
  CodingAgentPrCheckMock,
  SiemEventMock,
  EvidencePackCard,
  ThreePlaneTrustVisual,
  ChainDetailMock,
  IntegrationsHubVisual,
});