/* Auditor portal — audit.attestia.ai/share/:token
   Lives OUTSIDE the app shell (no sidebar, no app topbar, no tenant context).
   This is what Sarah (external auditor) sees when she clicks the email link.

   Also includes the public daily-bulletin page — bulletins.attestia.ai/:date.
   Both are accessed via the tweaks panel or by clicking "Preview" in share. */

const AuditorPortal = ({ onExit, onOpenBulletin }) => {
  const t = SCENARIO.trace;
  const [verifyOpen, setVerifyOpen] = React.useState(false);

  // Mock expiry countdown
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const sharedAt = React.useMemo(() => new Date(Date.now() - 3600 * 1000 * 6), []);
  const expiresAt = React.useMemo(() => new Date(sharedAt.getTime() + 7 * 24 * 3600 * 1000), [sharedAt]);
  const remaining = expiresAt - Date.now();
  const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);

  return (
    <div className="auditor">
      {/* Chrome — much sparser than the app */}
      <header className="auditor__chrome">
        <div className="auditor__chrome-inner">
          <div className="auditor__brand">
            <span className="auditor__brand-mark">Attestia</span>
            <span className="auditor__brand-sub">Auditor portal</span>
          </div>
          <div className="spacer" />
          <div className="auditor__chrome-meta">
            <span className="muted text-xs">Shared by</span>
            <span className="fw-600">{SCENARIO.tenant.name}</span>
            <span className="muted text-xs">·</span>
            <span className="mono text-xs">audit.attestia.ai/share/eyJ…aZ4r</span>
          </div>
          <Button variant="ghost" size="sm" iconRight={window.Icon.external({ size: 11 })} onClick={onExit}>About Attestia</Button>
        </div>
      </header>

      <main className="auditor__main">
        {/* Cover — full document header */}
        <section className="auditor-cover">
          <div className="auditor-cover__eyebrow">
            <span className="mono">EXTERNAL · READ-ONLY · {days}D {hours}H REMAINING</span>
          </div>
          <h1 className="auditor-cover__title">
            <em>Verify</em> Trace <span className="mono">{t.short}</span>
          </h1>
          <p className="auditor-cover__sub">
            You have been granted access by <strong>{SCENARIO.tenant.name}</strong> to verify a single LLM call
            and its evidence chain. No account required. The signature can be checked offline.
          </p>

          <div className="auditor-cover__meta">
            <div>
              <span className="col-label">Sealed</span>
              <span className="col-value">{t.timestamp}</span>
            </div>
            <div>
              <span className="col-label">App</span>
              <span className="col-value">{t.app}</span>
            </div>
            <div>
              <span className="col-label">Purpose</span>
              <span className="col-value mono">{t.purpose}</span>
            </div>
            <div>
              <span className="col-label">Verdict</span>
              <span className="col-value"><Verdict kind="verified" size="lg" /></span>
            </div>
            <div>
              <span className="col-label">Sealed by</span>
              <span className="col-value">P. Sharma · Director, AI Risk</span>
            </div>
          </div>
        </section>

        {/* Headline trust action — verify offline */}
        <section className="auditor-verify">
          <div className="auditor-verify__layout">
            <div className="auditor-verify__copy">
              <div className="text-xs muted fw-600" style={{ letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "var(--font-mono)" }}>How to verify</div>
              <h2 className="auditor-verify__title">
                <em>Verify offline.</em> Sixty seconds, no internet.
              </h2>
              <p className="text-sm muted" style={{ marginTop: 8, lineHeight: 1.6, maxWidth: "52ch" }}>
                Download the signed bundle, install the CLI (one line of Homebrew or curl), and run a single command.
                The CLI checks the evidence hash, the Ed25519 signature, the Merkle path back to today's public
                bulletin, and the daily root anchored on GitHub. <strong>Attestia is not in the trust chain</strong> — only public-key cryptography is.
              </p>
              <div className="row gap-2" style={{ marginTop: 16 }}>
                <Button variant="primary" icon={window.Icon.download({ size: 14 })}
                  onClick={() => setVerifyOpen(true)}>
                  Download bundle &amp; verify
                </Button>
                <Button variant="ghost" icon={window.Icon.external({ size: 12 })}>
                  Read the verify-protocol spec
                </Button>
              </div>
            </div>

            <div className="auditor-verify__cli">
              <div className="cli-header">
                <span className="cli-dot" style={{ background: "#fa6262" }} />
                <span className="cli-dot" style={{ background: "#f8c451" }} />
                <span className="cli-dot" style={{ background: "#5fcd5b" }} />
                <span className="cli-title mono">verify · ~ /audits/meridian-q4</span>
              </div>
              <pre className="cli-body">
<span className="cli-prompt">$</span> <span className="cli-cmd">brew install attestia/tap/attestia</span>{"\n"}
<span className="cli-comment">  Installed attestia 0.9.2 (12.3 MB)</span>{"\n"}
<span className="cli-prompt">$</span> <span className="cli-cmd">attestia verify ./bundle.zip</span>{"\n"}
{"\n"}
<span className="cli-comment">  Bundle: trace af_x3k…7yv  ·  3 claims  ·  178 KB</span>{"\n"}
<span className="cli-ok">  ✓</span> Evidence hash matches{"  "}<span className="cli-mono">0xa3b9c4d2…7f201</span>{"\n"}
<span className="cli-ok">  ✓</span> Ed25519 signature valid{"  "}<span className="cli-mono">fp 5e8f…b21a</span>{"\n"}
<span className="cli-ok">  ✓</span> Merkle path verifies to root{"  "}<span className="cli-mono">af3c…91</span>{"\n"}
<span className="cli-ok">  ✓</span> Daily bulletin matches GitHub commit{"\n"}
<span className="cli-comment">    github.com/attestia-ai/bulletins · 2026-10-24</span>{"\n"}
<span className="cli-ok">  ✓</span> Source registry hashes match (3 of 3){"\n"}
{"\n"}
<span className="cli-ok">  Chain integrity verified.</span>{"\n"}
<span className="cli-comment">  All cryptographic checks pass. Trace can be relied upon.</span>{"\n"}
              </pre>
            </div>
          </div>
        </section>

        {/* Evidence seal — read-only, large, central */}
        <section className="auditor-seal">
          <div className="evidence-seal__layout">
            <div className="evidence-seal__mark" style={{ background: "var(--paper)" }}>
              <PortalSeal size={120} />
            </div>
            <div className="evidence-seal__content">
              <div className="evidence-seal__head-row">
                <span className="evidence-seal__title">Evidence signature</span>
                <span className="evidence-seal__head-meta">Ed25519 · public bulletin</span>
              </div>
              <div className="evidence-seal__rows">
                <div className="evidence-row">
                  <span className="evidence-row__label">Evidence hash</span>
                  <span className="evidence-row__value"><HashChip value={t.sealHash} short={t.sealHashShort} /></span>
                </div>
                <div className="evidence-row">
                  <span className="evidence-row__label">Merkle position</span>
                  <span className="evidence-row__value"><span className="mono">Block #{t.blockNumber.toLocaleString()}</span> <span className="muted text-xs">· leaf {t.leaf}</span></span>
                </div>
                <div className="evidence-row">
                  <span className="evidence-row__label">Daily bulletin</span>
                  <span className="evidence-row__value">
                    <Badge tone="verified" icon={window.Icon.checkSimple({ size: 11 })}>Verified {t.bulletinDate}</Badge>
                    <a href="#" onClick={(e) => { e.preventDefault(); onOpenBulletin(); }} className="text-xs">View bulletin {window.Icon.external({ size: 10 })}</a>
                  </span>
                </div>
                <div className="evidence-row">
                  <span className="evidence-row__label">Root key fingerprint</span>
                  <span className="evidence-row__value mono">5e8f9c…b21a</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Claim & sources — read-only summary */}
        <section>
          <div className="text-xs muted fw-600" style={{ letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "var(--font-mono)", marginBottom: 6 }}>
            What was claimed · what was checked
          </div>
          <h2 className="auditor-h2"><em>Three claims.</em> All verified by your sources.</h2>
          <p className="text-sm muted" style={{ maxWidth: "60ch", marginTop: 4 }}>
            Each claim was independently verified by three judge models. Cohen's κ measures inter-rater
            agreement — 1.0 is perfect, ≥ 0.8 is calibrated.
          </p>

          <div className="auditor-claims">
            {SCENARIO.claims.verified.map((c) => (
              <article key={c.idx} className="auditor-claim">
                <div className="auditor-claim__head">
                  <span className="auditor-claim__num mono">Claim {c.idx} of 3</span>
                  <Verdict kind="verified" />
                  <span className="spacer" />
                  <span className="mono text-xs muted">κ {c.kappa.toFixed(2)}</span>
                </div>
                <blockquote className="auditor-claim__quote">{c.text}</blockquote>
                {c.sources.map((s, i) => (
                  <div key={i} className="auditor-claim__source">
                    <span style={{ color: "var(--ink-3)" }}>{window.Icon.fileText({ size: 13 })}</span>
                    <span className="fw-600">{s.name}</span>
                    <span className="muted text-xs">·</span>
                    <span className="text-xs muted">{s.span}</span>
                    <span className="spacer" />
                    <span className="mono text-xs">{s.score}% match</span>
                  </div>
                ))}
              </article>
            ))}
          </div>
        </section>

        {/* What's in the bundle */}
        <section className="auditor-bundle">
          <h2 className="auditor-h2"><em>What's in the bundle.</em></h2>
          <div className="bundle-grid">
            <BundleItem icon="fileText" title="trace.json" sub="Full trace · all claims · multi-judge votes · signed manifest" />
            <BundleItem icon="folder" title="sources/" sub="Hashed copies of the source spans cited · with version metadata" />
            <BundleItem icon="lock" title="signature.ed25519" sub="Detached signature over trace.json · tenant root key fingerprint embedded" />
            <BundleItem icon="shield" title="merkle-proof.json" sub="Authentication path from the leaf to today's daily root" />
            <BundleItem icon="checkSimple" title="bulletin.txt" sub="Today's public bulletin commit · GitHub URL + commit SHA" />
            <BundleItem icon="cpu" title="verify" sub="The CLI itself · static binary · no Attestia internet calls" />
          </div>
        </section>

        {/* Why trust this */}
        <section className="auditor-trust">
          <div className="auditor-trust__head">
            <h2 className="auditor-h2"><em>Why this is trustworthy.</em></h2>
          </div>
          <div className="auditor-trust__grid">
            <TrustPoint
              n="01"
              title="The math doesn't need Attestia."
              body="Verification uses only public-key cryptography (Ed25519) and a public Merkle log committed to GitHub. If Attestia disappeared tomorrow, you could still verify every claim in this bundle with open-source tooling."
            />
            <TrustPoint
              n="02"
              title="The chain is tamper-evident."
              body="Changing any byte in the response, claim, source, or signature invalidates the hash. Substituting one block in the chain invalidates every block after it. The CLI surfaces exactly where any divergence occurred."
            />
            <TrustPoint
              n="03"
              title="The judges are auditable."
              body="Three independent models scored each claim. Their verbatim outputs are included in the bundle — signed. Cohen's κ quantifies inter-rater agreement; values below 0.7 are flagged as uncalibrated."
            />
            <TrustPoint
              n="04"
              title="The sources are pinned."
              body="The source registry is content-addressed. The Heart Failure Guideline this trace cites is identified by its hash, not its filename. Updating a source produces a new hash; the original trace remains verifiable against the original source version."
            />
          </div>
        </section>

        <footer className="auditor-footer">
          <span className="muted text-xs mono">© 2026 Attestia · audit.attestia.ai · this page is itself signed and tamper-evident</span>
          <div className="spacer" />
          <a href="#" onClick={(e) => { e.preventDefault(); onOpenBulletin(); }} className="text-xs">Today's bulletin {window.Icon.external({ size: 10 })}</a>
          <a href="#" onClick={(e) => e.preventDefault()} className="text-xs">Open-source verify CLI {window.Icon.external({ size: 10 })}</a>
          <a href="#" onClick={(e) => e.preventDefault()} className="text-xs">Cryptographic spec {window.Icon.external({ size: 10 })}</a>
        </footer>
      </main>

      <Modal open={verifyOpen} onClose={() => setVerifyOpen(false)} wide
        title="Download evidence bundle"
        sub="The bundle is ~178 KB. The CLI is ~12 MB (static, no dependencies, signed)."
        footer={<><Button variant="ghost" onClick={() => setVerifyOpen(false)}>Cancel</Button>
        <Button variant="primary" icon={window.Icon.download({ size: 14 })}>Download bundle.zip (178 KB)</Button></>}
      >
        <div className="col gap-4">
          <Field label="Install the CLI (choose one)">
            <div className="cli-install">
              <div className="cli-install__row">
                <span className="muted text-xs mono">homebrew</span>
                <span className="mono">brew install attestia/tap/attestia</span>
              </div>
              <div className="cli-install__row">
                <span className="muted text-xs mono">curl</span>
                <span className="mono">curl -sSL https://attestia.ai/verify.sh | sh</span>
              </div>
              <div className="cli-install__row">
                <span className="muted text-xs mono">docker</span>
                <span className="mono">docker run --rm -v $PWD:/v attestia/verify ./bundle.zip</span>
              </div>
            </div>
          </Field>
          <div className="onb-note">
            <span>{window.Icon.shield({ size: 14 })}</span>
            <div className="text-sm">
              The CLI's own binary hash is published in the daily bulletin. You can verify the CLI itself before trusting it.
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

const TrustPoint = ({ n, title, body }) => (
  <div className="trust-point">
    <div className="trust-point__num mono">{n}</div>
    <div>
      <div className="trust-point__title"><em style={{ fontFamily: "var(--font-display)", fontStyle: "italic" }}>{title}</em></div>
      <div className="trust-point__body">{body}</div>
    </div>
  </div>
);

const BundleItem = ({ icon, title, sub }) => (
  <div className="bundle-item">
    <div className="bundle-item__icon">{window.Icon[icon]({ size: 16 })}</div>
    <div>
      <div className="bundle-item__title mono">{title}</div>
      <div className="bundle-item__sub">{sub}</div>
    </div>
  </div>
);

const PortalSeal = ({ size = 120 }) => (
  <svg width={size} height={size} viewBox="0 0 120 120">
    <defs>
      <path id="portal-top" d="M 12 60 A 48 48 0 0 1 108 60" />
      <path id="portal-bot" d="M 12 60 A 48 48 0 0 0 108 60" />
    </defs>
    <circle cx="60" cy="60" r="58" fill="none" stroke="#2f6e47" strokeWidth="1" opacity="0.4" />
    <circle cx="60" cy="60" r="50" fill="none" stroke="#2f6e47" strokeWidth="1.5" />
    <circle cx="60" cy="60" r="48" fill="none" stroke="#2f6e47" strokeWidth="0.5" strokeDasharray="1 2" opacity="0.6" />
    <text fontFamily="Geist Mono, monospace" fontSize="7" fill="#2f6e47" letterSpacing="2.5">
      <textPath href="#portal-top" startOffset="50%" textAnchor="middle">ATTESTIA · EVIDENCE · ED25519</textPath>
    </text>
    <text fontFamily="Geist Mono, monospace" fontSize="7" fill="#2f6e47" letterSpacing="2.5">
      <textPath href="#portal-bot" startOffset="50%" textAnchor="middle">· BLOCK 1247 · LEAF 23 ·</textPath>
    </text>
    <text x="60" y="56" textAnchor="middle" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="32" fill="#2f6e47">A</text>
    <line x1="42" y1="68" x2="78" y2="68" stroke="#2f6e47" strokeWidth="0.6" />
    <text x="60" y="82" textAnchor="middle" fontFamily="Geist Mono, monospace" fontSize="5.5" fill="#2f6e47" letterSpacing="0.8">SEALED 2026-10-24</text>
  </svg>
);

/* ============================================================
   Public daily bulletin page
   bulletins.attestia.ai/:date  — anyone on the internet can view.
   ============================================================ */
const BulletinPage = ({ onExit }) => {
  const blocks = React.useMemo(() => [
    { n: 1244, time: "06:00", leaves: 412, hash: "9c2e6a1f…b4d2" },
    { n: 1245, time: "08:00", leaves: 387, hash: "7afe102d…11c8" },
    { n: 1246, time: "10:00", leaves: 419, hash: "44b1aa97…ee03" },
    { n: 1247, time: "12:00", leaves: 1024, hash: "a3b9c4d2…7f201", current: true },
    { n: 1248, time: "14:00", leaves: 821, hash: "3d8f0b22…9a17" },
    { n: 1249, time: "16:00", leaves: 938, hash: "ce21470a…dd03" },
    { n: 1250, time: "18:00", leaves: 614, hash: "11ff80b3…0a14" },
    { n: 1251, time: "20:00", leaves: 502, hash: "ee08a922…2c91" },
  ], []);
  const [search, setSearch] = React.useState("");

  return (
    <div className="bulletin">
      <header className="auditor__chrome">
        <div className="auditor__chrome-inner">
          <div className="auditor__brand">
            <span className="auditor__brand-mark">Attestia</span>
            <span className="auditor__brand-sub">Public bulletin</span>
          </div>
          <div className="spacer" />
          <span className="text-xs muted mono">bulletins.attestia.ai/2026-10-24</span>
          <Button variant="ghost" size="sm" iconRight={window.Icon.external({ size: 11 })} onClick={onExit}>About Attestia</Button>
        </div>
      </header>

      <main className="bulletin__main">
        <section className="bulletin-cover">
          <div className="text-xs mono muted" style={{ letterSpacing: "0.12em", textTransform: "uppercase" }}>2026-10-24 · daily root</div>
          <h1 className="bulletin-cover__title"><em>Today's bulletin.</em></h1>
          <p className="bulletin-cover__sub">
            Every wrapped LLM call from every Attestia tenant lands in a Merkle tree. The daily root is committed
            to a public GitHub repository at 00:00 UTC. Anyone — auditor, journalist, regulator — can verify
            any individual call back to this root, with no help from us.
          </p>

          <div className="bulletin-root">
            <div className="bulletin-root__layout">
              <div className="bulletin-root__num">
                <div className="muted mono text-xs" style={{ letterSpacing: "0.12em" }}>DAILY ROOT</div>
                <div className="bulletin-root__hash mono">af3c91d4 9b22c8e1 7f02a9bb ee3c4422</div>
                <div className="text-xs muted" style={{ marginTop: 6 }}>
                  <span className="mono">8 blocks</span> · <span className="mono">5,117 leaves</span> · committed <span className="mono">2026-10-25 00:00:14 UTC</span>
                </div>
              </div>
              <div className="bulletin-root__actions">
                <Button variant="primary" size="sm" icon={window.Icon.external({ size: 12 })}>View on GitHub</Button>
                <Button variant="secondary" size="sm" icon={window.Icon.copy({ size: 12 })}>Copy root</Button>
                <Button variant="ghost" size="sm" icon={window.Icon.download({ size: 12 })}>Download proof.json</Button>
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="row gap-2" style={{ marginBottom: 12 }}>
            <h2 className="auditor-h2" style={{ flex: 1 }}><em>Verify a specific call.</em></h2>
          </div>
          <p className="text-sm muted" style={{ maxWidth: "60ch", marginBottom: 12 }}>
            Paste any Attestia evidence hash. The page will show its Merkle path back to the daily root above,
            with the authentication siblings at each level.
          </p>
          <div className="bulletin-search">
            <span style={{ color: "var(--ink-3)" }}>{window.Icon.search({ size: 14 })}</span>
            <input className="mono" placeholder="0xa3b9c4d2…7f201" value={search} onChange={(e) => setSearch(e.target.value)} />
            <Button variant="primary" size="sm" onClick={() => setSearch("0xa3b9c4d2…7f201")}>Verify</Button>
          </div>

          {search && (
            <div className="bulletin-proof">
              <div className="row gap-2" style={{ marginBottom: 14 }}>
                <Badge tone="verified" icon={window.Icon.checkSimple({ size: 11 })}>Verified · 4 hops</Badge>
                <span className="muted text-xs">leaf → block 1247 → daily root</span>
              </div>
              <div className="merkle">
                <div className="merkle-row">
                  <div className="merkle-node merkle-node--leaf">
                    <div className="muted text-xs mono">LEAF · trace</div>
                    <div className="mono fw-600">0xa3b9c4d2…7f201</div>
                  </div>
                  <span className="merkle-arrow">↓ hash with sibling</span>
                  <div className="merkle-node">
                    <div className="muted text-xs mono">SIBLING</div>
                    <div className="mono text-xs">3d8f0b22…9a17</div>
                  </div>
                </div>
                <div className="merkle-row">
                  <div className="merkle-node">
                    <div className="muted text-xs mono">LEVEL 1</div>
                    <div className="mono text-xs">e9c4…11ab</div>
                  </div>
                  <div className="merkle-node">
                    <div className="muted text-xs mono">SIBLING</div>
                    <div className="mono text-xs">cc21…77fe</div>
                  </div>
                </div>
                <div className="merkle-row">
                  <div className="merkle-node merkle-node--block">
                    <div className="muted text-xs mono">BLOCK 1247 root</div>
                    <div className="mono fw-600">a3b9c4d2…7f201</div>
                  </div>
                  <span className="merkle-arrow">↓ block siblings (7)</span>
                </div>
                <div className="merkle-row">
                  <div className="merkle-node merkle-node--root">
                    <div className="muted text-xs mono">DAILY ROOT</div>
                    <div className="mono fw-600">af3c91d4…ee3c4422</div>
                    <Badge tone="verified" icon={window.Icon.checkSimple({ size: 10 })} style={{ marginTop: 4 }}>Matches GitHub commit</Badge>
                  </div>
                </div>
              </div>
            </div>
          )}
        </section>

        <section>
          <h2 className="auditor-h2" style={{ marginBottom: 12 }}><em>Today's blocks.</em></h2>
          <div className="card" style={{ overflow: "hidden" }}>
            <table className="table">
              <thead>
                <tr>
                  <th style={{ width: 80 }}>Block</th>
                  <th style={{ width: 100 }}>Time UTC</th>
                  <th>Block root</th>
                  <th style={{ width: 120, textAlign: "right" }}>Leaves</th>
                  <th style={{ width: 50 }} />
                </tr>
              </thead>
              <tbody>
                {blocks.map((b) => (
                  <tr key={b.n} className={`clickable ${b.current ? "bulletin-row--current" : ""}`}>
                    <td className="mono fw-600">#{b.n.toLocaleString()}</td>
                    <td className="mono text-sm muted">{b.time}</td>
                    <td><HashChip value={b.hash} short={b.hash} /></td>
                    <td className="mono tabular" style={{ textAlign: "right" }}>{b.leaves.toLocaleString()}</td>
                    <td>
                      {b.current && <Badge tone="info">Viewing</Badge>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section className="bulletin-trust">
          <h2 className="auditor-h2"><em>How this works.</em></h2>
          <div className="bulletin-explain">
            <ExplainStep n="01" title="Each call becomes a leaf"
              body="Every wrapped LLM call produces a content hash. The hash includes the request, the redacted response, the extracted claims, the source citations, and the multi-judge consensus." />
            <ExplainStep n="02" title="Leaves are grouped into blocks"
              body="Every 2 hours, all leaves across all tenants are combined into a Merkle tree. The block root is signed by Attestia's Ed25519 key." />
            <ExplainStep n="03" title="Blocks are anchored daily"
              body="At 00:00 UTC, the day's block roots are combined into a single daily root. The daily root is committed to a public GitHub repository and timestamped by GitHub's signing infrastructure." />
            <ExplainStep n="04" title="Anyone can verify"
              body="An auditor with an evidence bundle reproduces the Merkle path from their leaf to the daily root, then checks the root against GitHub. Attestia is not in the trust chain." />
          </div>
        </section>

        <footer className="auditor-footer">
          <span className="muted text-xs mono">© 2026 Attestia · this page itself is signed in tomorrow's bulletin</span>
          <div className="spacer" />
          <a href="#" onClick={(e) => e.preventDefault()} className="text-xs">Yesterday's bulletin {window.Icon.external({ size: 10 })}</a>
          <a href="#" onClick={(e) => e.preventDefault()} className="text-xs">Verify protocol spec {window.Icon.external({ size: 10 })}</a>
        </footer>
      </main>
    </div>
  );
};

const ExplainStep = ({ n, title, body }) => (
  <div className="explain-step">
    <div className="trust-point__num mono">{n}</div>
    <div>
      <div className="trust-point__title"><em style={{ fontFamily: "var(--font-display)", fontStyle: "italic" }}>{title}</em></div>
      <div className="trust-point__body">{body}</div>
    </div>
  </div>
);

window.AuditorPortal = AuditorPortal;
window.BulletinPage = BulletinPage;