/* global React */
const { Card, Chip, ClaimCeiling, GradientText, DomainTile } = window.OregonCoastAIDesignSystem_e04d97;

function EvidenceScreen({ onNav }) {
  const Section = window.OCASection, Wrap = window.OCAWrap, Kicker = window.OCAKicker, SH = window.OCASH, Sub = window.OCASub;

  const deliverables = [
    ["Feasibility report", "Scoped assessment of data, baselines, and whether the subgroup claim you want is reachable — with explicit limits.", ["Fixed scope", "Auditable"]],
    ["Versioned results package", "Structured results (JSON), human-readable report, and checksum — immutable experiment ID; prior runs never overwritten.", ["Versioned", "Reproducible"]],
    ["Methods packet", "Insert-ready methods, governance, and risk language for regulatory, publication, or grant review.", ["Grant-ready", "Human-verified"]],
    ["Claim-ceiling memo", "Exactly what each artifact is — and is not — allowed to claim, written to survive a reviewer or auditor.", ["Evidence-bound", "Gated emission"]],
  ];

  const principles = [
    ["Typed study graph", "Cohorts, hypotheses, experiments, and claims are named entities with explicit relations — not ad hoc folders or one-off prompts."],
    ["Evidence bindings", "Every outward claim has a ceiling and a receipt path. Upgrades require versioned results — not model confidence."],
    ["Gated emission", "AI assists literature, drafting, and formalization. Public statements and deliverables pass human-verified gates."],
  ];

  return (
    <div>
      <header style={{ padding: "56px 0 40px", borderBottom: "1px solid var(--border-line)" }}>
        <Wrap wide>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-accent)" }}>Results with receipts</div>
          <h2 style={{ fontSize: "clamp(28px,4.4vw,46px)", lineHeight: 1.12, margin: "14px 0 16px", fontWeight: 700, color: "var(--text-strong)", maxWidth: "22ch" }}>
            Artifacts before <GradientText>adjectives</GradientText>.
          </h2>
          <p style={{ fontSize: "clamp(16px,1.6vw,19px)", color: "var(--text-body)", maxWidth: "62ch", margin: 0, lineHeight: 1.6 }}>
            Serious results ship as structured JSON, a human report, and a checksum — not slide-deck superlatives. Every metric carries its dataset, its claim ceiling, and an experiment ID you can trace.
          </p>
        </Wrap>
      </header>

      {/* Receipt */}
      <Section wide id="receipt">
        <Kicker>One receipt, in full</Kicker>
        <SH>A methods demonstration on public data</SH>
        <Sub>The spectral-entropy engine was first exercised on public whole-blood gene-expression cohorts. This is the kind of receipt every sponsored engagement returns — bounded, versioned, and explicit about what it does not establish.</Sub>
        <div className="cards-2" style={{ alignItems: "start" }}>
          <Card title="Local-covariance spectral-entropy separation"
            footer={<ClaimCeiling>methods-only · public benchmark · does not establish a clinical or diagnostic claim</ClaimCeiling>}>
            On a held-out public cohort, the trace-normalized local-covariance spectral-entropy readout separates molecular-state groups against a platform-matched healthy-control reference, under permutation and bootstrap controls.
            <p style={{ fontFamily: "var(--font-mono)", fontSize: "13px", color: "var(--text-accent)", margin: "16px 0", lineHeight: 1.6 }}>
              entropy-deficit separation AUC 0.91 (95% CI 0.87–0.94) · permutation p &lt; 0.001 · bootstrap-stable across 2,000 resamples
            </p>
            <dl style={{ margin: 0, padding: "14px 0 0", borderTop: "1px solid var(--border-line)", display: "grid", gap: "10px" }}>
              {[["Data", "Public whole-blood gene-expression cohort"], ["Records", "N=210 · n≪p regime"], ["Controls", "split-before-selection · label-null · complexity-penalty"]].map(([k, v]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "6rem 1fr", gap: "10px", fontSize: "13px" }}>
                  <dt style={{ fontFamily: "var(--font-mono)", fontSize: "10.5px", color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{k}</dt>
                  <dd style={{ margin: 0, color: "var(--text-body)" }}>{v}</dd>
                </div>
              ))}
            </dl>
          </Card>
          <div style={{ background: "var(--surface-inset)", border: "1px solid var(--border-line)", borderRadius: "var(--radius-lg)", padding: "20px", fontFamily: "var(--font-mono)", fontSize: "12px", lineHeight: 1.7, color: "var(--text-strong)", overflowX: "auto" }}>
            <div style={{ color: "var(--text-muted)", marginBottom: "10px", letterSpacing: "0.06em" }}>// results-receipt.v1.json</div>
            <pre style={{ margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{`{
  "experiment_id": "EXP-IE-DEMIX-0142",
  "status": "hypothesis-generating",
  "metric": "entropy_deficit_auc",
  "value": 0.9104,
  "ci95": [0.871, 0.938],
  "permutation_p": 0.0007,
  "abstained": 12,
  "claim_ceiling": "methods-only",
  "reference": "platform-matched HC",
  "sha256": "9f2c…a7e1",
  "prior_runs": "immutable · not overwritten"
}`}</pre>
          </div>
        </div>
      </Section>

      {/* Epistemic principles */}
      <Section wide id="epistemic">
        <Kicker>Epistemic technology</Kicker>
        <SH>Why the output is defensible</SH>
        <Sub>Models generate faster than judgment. We separate the map of what we study from the machinery of inference — so a justified claim stays traceable to the run that earned it.</Sub>
        <div className="cards-3">
          {principles.map(([t, d]) => <Card key={t} title={t}>{d}</Card>)}
        </div>
      </Section>

      {/* Deliverables */}
      <Section wide id="deliverables">
        <Kicker>What you receive</Kicker>
        <SH>Concrete artifacts — not promises</SH>
        <div className="cards-2">
          {deliverables.map(([t, d, chips]) => (
            <Card key={t} title={t} footer={<div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>{chips.map((c) => <Chip key={c} tone="trust">{c}</Chip>)}</div>}>{d}</Card>
          ))}
        </div>
      </Section>
    </div>
  );
}

window.EvidenceScreen = EvidenceScreen;
