/* global React */

function ArtifactProof() {
  return (
    <section className="xp-scene xp-artifact-scene">
      <div className="xp-scene-index"><span className="n">04</span> · better than your evals</div>
      <div className="xp-artifact-head">
        <h2 className="xp-statement xp-statement--full">
          <span className="dim">The default move is a pile of harness code and meetings.</span><br/>
          Give me the skill. I run the bake.
        </h2>
      </div>

      <div className="xp-artifact-grid">
        <article className="xp-artifact-card xp-artifact-card--muted">
          <div className="xp-card-kicker">your eval loop</div>
          <h3>It never stays small.</h3>
          <p>
            Harness sprawl, flaky fixtures, another spreadsheet tracking which prompt version beat which. Plenty lands in the harness metrics. The skill that needed fixing on Tuesday is still wrong on Thursday.
          </p>
          <div className="xp-artifact-stat-row">
            <span>nights lost</span>
            <span>to infra</span>
          </div>
        </article>

        <article className="xp-artifact-card xp-artifact-card--active">
          <div className="xp-card-kicker">SkillsCake bake</div>
          <h3>I stress the file.</h3>
          <p>
            I run the candidates, failure modes, the boring retries. The alternative is usually a shadow harness nobody wants to own.
          </p>
          <div className="xp-artifact-score" aria-label="Bake score changed from 0.62 to 0.81">
            <span className="before">0.62</span>
            <span className="arrow">→</span>
            <span className="after">0.81</span>
            <span className="time">~5 min</span>
          </div>
        </article>
      </div>
    </section>
  );
}

window.ArtifactProof = ArtifactProof;