// Benchmark.jsx — recall against a human-auditor baseline.
//
// ─────────────────────────────────────────────────────────────────────────────
// !! DRAFT NUMBERS, AND THE PAGE NO LONGER SAYS SO. !!
// Every value in RESULTS is invented placeholder data for layout. The visible
// "draft figures" disclaimer was removed on request, so nothing on the site
// marks these as provisional any more — they read as measured fact.
// Replace them with the real benchmark before this ships, and put the method
// (corpus, sample size, date) in METHOD. An unsourced benchmark is worth less
// than no benchmark; an unsourced benchmark presented as final is worse.
// ─────────────────────────────────────────────────────────────────────────────

const METHOD = 'Recall against a fixed corpus of previously disclosed Solana vulnerabilities. Human-auditor recall is the 100% baseline.';

const RESULTS = [
  { label: 'Human auditors',         value: 100, note: 'baseline',              baseline: true },
  { label: 'Hackhack',               value: 80,  note: 'autonomous review',     subject: true },
  { label: 'Frontier model, guided', value: 65,  note: 'with a security prompt' },
  { label: 'Frontier model, raw',    value: 50,  note: 'single-pass prompt' },
  { label: 'Static analysis',        value: 18,  note: 'off-the-shelf tooling' },
];

function Benchmark() {
  return (
    <section id="benchmark" className="section section-rule">
      <div className="container">
        {/* Tighter than the standard intro gap: the chart is compact now, and
            the default clamp leaves it stranded below the copy. */}
        <div className="section-intro" style={{ maxWidth: 720, marginBottom: 'clamp(36px, 4vw, 56px)' }}>
          <span className="eyebrow">benchmark</span>
          <h2 className="h-section">
            80% of what a human auditor finds.<br />
            <span className="h-quiet">In hours, not weeks.</span>
          </h2>
          <p className="lead">
            We measure recall against findings that senior auditors confirmed on the same code.
            Hackhack is not a replacement for a human review. It is the layer that gets you most of
            the way there before one starts.
          </p>
        </div>

        <div className="bench">
          {RESULTS.map((r) => <Bar key={r.label} {...r} />)}
          <p className="bench-method">{METHOD}</p>
        </div>
      </div>
    </section>
  );
}

function Bar({ label, value, note, baseline, subject }) {
  // Subject gets the accent; the baseline is a quiet reference; everything else
  // is neutral. The value is always labelled, so colour is never load-bearing.
  const fill = subject ? 'var(--hh-mint)' : baseline ? 'var(--hh-text-muted)' : 'var(--hh-border-strong)';

  return (
    <div className="bench-row" data-subject={subject ? 'true' : 'false'}>
      <span className="bench-label">{label}</span>
      <span className="bench-note">{note}</span>
      <span className="bench-track" role="img" aria-label={`${label}: ${value} percent recall`}>
        <span
          className="bench-fill"
          style={{ display: 'block', width: `${value}%`, background: fill, opacity: baseline ? 0.55 : 1 }}
        />
      </span>
      <span className="bench-value hh-tabular">{value}%</span>
    </div>
  );
}

window.Benchmark = Benchmark;