// ── Veritee · Guarantees (what you can verify vs. what you'd otherwise trust) ──

/* render a string with markdown-style `inline code` as mono chips */
const InlineCode = ({ children }) => (
  <code style={{
    fontFamily: "var(--font-mono)", fontSize: "0.86em", letterSpacing: 0, color: "var(--v-ink)",
    background: "var(--v-canvas)", border: "1px solid var(--v-ink)", padding: "0 5px", whiteSpace: "nowrap",
  }}>{children}</code>
);
const renderMd = (str) =>
  String(str).split(/(`[^`]+`)/g).map((part, i) =>
    part.startsWith("`") && part.endsWith("`")
      ? <InlineCode key={i}>{part.slice(1, -1)}</InlineCode>
      : <React.Fragment key={i}>{part}</React.Fragment>
  );

const GROUPS = [
  {
    g: "A",
    title: "Reproducible, verifiable OS image",
    lede: "You can independently rebuild and inspect the system, instead of trusting a vendor-supplied black box.",
    rows: [
      {
        name: "Reproducible OS",
        trust: "the image you attest is built from the source they claim.",
        verify: "Deterministic `mkosi` build (frozen apt snapshots, `SOURCE_DATE_EPOCH`, pinned UUIDs / toolchain); rebuild from source and match `SHA-256` + PCRs.",
      },
      {
        name: "Independently knowable expected measurements",
        trust: "the expected PCR values they hand you are the legitimate ones.",
        verify: "Expected values derived from reproducible source, not the vendor; the verifier computes them independently.",
      },
      {
        name: "Only approved base OS releases are admitted",
        trust: "the base OS under an application is a release Veritee actually approved.",
        verify: "Developer-signed release manifest → Warden registry entry in the contract's `os_releases` map → `put_dapp` rejects any image whose `PCR 4` differs from the linked release.",
      },
      {
        name: "Minimized, hardened attack surface",
        trust: "their default image isn't shipping extra services / modules you can't see.",
        verify: "Module blacklist, default-drop `INPUT` firewall, removed GPT auto-generator, ephemeral `tmpfs`, minimal TCB.",
      },
    ],
  },
  {
    g: "B",
    title: "Measured runtime state",
    lede: "What was measured at boot still corresponds to what's running, down to the application.",
    rows: [
      {
        name: "Measurements don't drift after boot",
        trust: "packages / agents didn't silently change the system after it was measured.",
        verify: "Immutable `squashfs` root + `systemd.volatile=overlay`; updates only via whole-image replacement.",
      },
      {
        name: "Runtime filesystem integrity",
        trust: "no disk block was tampered with between the boot measurement and now.",
        verify: "`dm-verity` checks every block read against a Merkle root on the OS root and app disk; tamper → read failure.",
      },
      {
        name: "Which application is attested",
        trust: "the attested platform is actually running the app binary they claim.",
        verify: "`PCR 15` binds the app disk + attestation-endpoint CA into the extension chain; Warden recomputes and rejects mismatches.",
      },
    ],
  },
  {
    g: "C",
    title: "Trustless attestation",
    lede: "TEE execution is bound to an on-chain action without a cloud intermediary vouching for it.",
    rows: [
      {
        name: "Bare-bones / raw attestation report",
        trust: "their attestation service (Azure MAA) faithfully verified the raw SNP report before re-signing it.",
        verify: "Consume the raw 1,184-byte `SNP` report directly and verify the `VCEK` chain yourself, removing the cloud service from the trust path.",
      },
      {
        name: "TEE execution bound to an on-chain action",
        trust: "an off-chain claim that \u201cthis result came from the enclave\u201d is honest.",
        verify: "Warden translates the SNP attestation into a JubJub Schnorr signature verified inside a `ZK circuit` and checked on-chain.",
      },
    ],
  },
  {
    g: "D",
    title: "On-chain verifiable audit trail",
    lede: "Every Warden decision is stored immutably and committed through an on-chain Merkle anchor.",
    rows: [
      {
        name: "Tamper-evident audit trail",
        trust: "their logs of which apps were verified and what they computed are complete and unaltered.",
        verify: "Registrations and revocations remain on-chain; immutable decision records are committed in append-only Merkle batches.",
      },
      {
        name: "Audit self-sufficiency",
        trust: "you can reconstruct an attestation later from data only they hold.",
        verify: "A decision record can be checked against its immutable blob, batch manifest, and on-chain Merkle root.",
      },
    ],
  },
];

const GUA_COLS = "240px 1fr 1.18fr";

const GuaranteeRow = ({ row }) => (
  <div className="tem-gua-row v-wash" style={{
    display: "grid", gridTemplateColumns: GUA_COLS, gap: 28, alignItems: "start",
    padding: "16px 24px", borderTop: "1px solid var(--v-hair)",
  }}>
    <h4 style={{ fontSize: 15.5, fontWeight: 600, lineHeight: 1.3 }}>{row.name}</h4>

    {/* without Veritee */}
    <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
      <span style={{ marginTop: 2, lineHeight: 0 }}><Icon.X size={18} color="var(--v-danger)" /></span>
      <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--v-ink-78)" }}>
        <span style={{ fontWeight: 600, color: "var(--v-ink)" }}>You trust the cloud that</span> {row.trust}
      </p>
    </div>

    {/* how Veritee verifies */}
    <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
      <span style={{ marginTop: 2, lineHeight: 0 }}><Icon.Check size={18} color="var(--v-teal)" /></span>
      <p style={{ fontSize: 14, lineHeight: 1.6 }}>{renderMd(row.verify)}</p>
    </div>
  </div>
);

const Guarantees = ({ goExplorer }) => {
  return (
    <section>
    <div className="tem-section" style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 56px 96px" }}>
      <p style={{ fontSize: 15.5, lineHeight: 1.65, margin: "0 0 44px", maxWidth: 900, opacity: 0.9 }}>
        Every Build-Reproduced TEE Image carries the guarantees below. For each property, <strong style={{ color: "var(--v-danger)", fontWeight: 600 }}>without Veritee</strong> is the cloud provider's word; <strong style={{ color: "var(--v-teal)", fontWeight: 600 }}>with Veritee</strong> is proof you can re-check yourself.
      </p>

      <div style={{ display: "flex", flexDirection: "column", gap: 44 }}>
        {GROUPS.map((grp) => (
          <section key={grp.g}>
            <div className="tem-gua-head" style={{ display: "grid", gridTemplateColumns: "48px 1fr", gap: 16, alignItems: "center", marginBottom: 14 }}>
              <GlyphTile glyph={grp.g} size={48} fontSize={26} shadow="3px 3px 0 var(--v-teal-tint)" />
              <div>
                <h2 style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: 1, margin: "0 0 4px" }}>{grp.title}</h2>
                <p style={{ fontSize: 13.5, lineHeight: 1.5, opacity: 0.75, maxWidth: 760 }}>{grp.lede}</p>
              </div>
            </div>

            <div style={vCard}>
              <div className="tem-gua-colhead" style={{ ...vLabel, display: "grid", gridTemplateColumns: GUA_COLS, gap: 28, padding: "10px 24px", background: "var(--v-canvas)", borderBottom: "var(--v-border)" }}>
                <span>Guarantee</span>
                <span style={{ color: "var(--v-danger)" }}>Without Veritee</span>
                <span style={{ color: "var(--v-teal)" }}>How Veritee verifies it, so you can re-check</span>
              </div>
              {grp.rows.map((row, i) => <GuaranteeRow key={i} row={row} />)}
            </div>
          </section>
        ))}
      </div>

      {/* closing */}
      <div style={{ marginTop: 56, paddingTop: 32, borderTop: "var(--v-border)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
        <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: 640 }}>See these guarantees land on-chain, in real records.</p>
        <Button variant="primary" onClick={goExplorer}>Open the on-chain explorer <Icon.ArrowRight /></Button>
      </div>
    </div>
    </section>
  );
};
window.Guarantees = Guarantees;