// ProofArtifact — ONE real, anonymized finding shown end-to-end: target →
// proof (reachability + trigger) → impact → one-line fix. The literal
// "proof, not probability." Data in data/proofArtifact.js.

function ProofArtifact() {
  const { React } = window;
  const d = window.ProofArtifactData;
  if (!d) return null;

  return (
    <section className="proof-section" data-screen-label="Proof — real anonymized finding">
      <div className="proof-inner">
        <p className="proof-eyebrow">proof, not probability</p>
        <h2 className="proof-heading">
          a real finding from a design partner — <em>proven</em>, not guessed.
        </h2>
        <p className="proof-target">
          <span className={`proof-sev proof-sev--${(d.severity || '').toLowerCase()}`}>{d.severity}</span>
          {' '}{d.title}
          <br />
          <span className="proof-target-sub">{d.target}</span>
        </p>

        <pre className="proof-terminal" aria-label="proof of exploit trace">
          <code>{(d.proof || []).join('\n')}</code>
        </pre>

        <div className="proof-grid">
          <div className="proof-cell">
            <h3 className="proof-cell-title">impact</h3>
            <p className="proof-cell-body">{d.impact}</p>
          </div>
          <div className="proof-cell">
            <h3 className="proof-cell-title">fix</h3>
            <p className="proof-cell-body proof-fix">{d.fix}</p>
          </div>
        </div>

        <p className="proof-note">
          Findings are shown with evidence and a verdict — not a severity score and a shrug.
        </p>
      </div>
    </section>
  );
}

window.ProofArtifact = ProofArtifact;