// AsymmetryBand — the argument that makes everything else on the page follow.
//
// From the executive summary: code production, vulnerability introduction and
// exploit development have all moved onto the compute curve, while validation
// is the last function still on the hiring curve. It is not a product claim,
// so there is nothing for a sceptical reader to argue with — and once they
// accept it, continuous autonomous testing is the only conclusion left.
//
// It sits directly under the hero rather than in it: the hero makes the promise,
// this justifies it. Stats live in data/asymmetry.js, each one attributed —
// on a page whose whole argument is about evidence, an unsourced number is a
// liability.

function AsymmetryBand() {
  const { React } = window;
  const stats = window.AsymmetryStats || [];

  return (
    <section className="ah-asym" data-screen-label="02 The asymmetry">
      <div className="ah-asym-inner">
        <div className="ah-asym-grid">
          <div className="ah-asym-copy">
            <p className="ah-eyebrow">Why now</p>
            <h2 className="ah-h2 ah-asym-thesis">
              Offense scales with compute.<br />
              <span className="ah-asym-em">Defense still scales with headcount.</span>
            </h2>
            <p className="ah-body ah-asym-body">
              Three quarters of new code is written by a machine, nearly half of it
              insecure, shipped four times faster at ten times the defect rate — against
              a security workforce that is millions of people short and falling further
              behind every year.
            </p>
            <p className="ah-body ah-asym-body">
              Writing, breaking, and exploiting code all run on the compute curve now.
              Testing is the last thing still on the hiring curve. No hiring plan closes
              that gap; it has to be closed the same way it was opened.
            </p>
          </div>

          <figure className="ah-asym-fig">
            <window.AsymmetryChart />
            <figcaption className="ah-asym-key">
              <span><i className="ah-key-dot ah-key-dot--rise" />Scales with compute</span>
              <span><i className="ah-key-dot ah-key-dot--flat" />Scales with headcount</span>
            </figcaption>
          </figure>
        </div>

        <dl className="ah-asym-stats">
          {stats.map((s) => (
            <div className="ah-asym-stat" key={s.v + s.label}>
              <dt className="ah-asym-stat-v">{s.v}</dt>
              <dd>
                <span className="ah-asym-stat-l">{s.label}</span>
                <span className="ah-asym-stat-s">{s.src}</span>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

// Two diverging curves. Deliberately unlabelled on the axes — there is no unit
// that honestly spans "commits", "vulnerabilities" and "headcount", and faking
// one would undercut the point. The shape is the argument.
function AsymmetryChart() {
  const { React } = window;
  return (
    <svg
      className="ah-asym-chart"
      viewBox="0 0 560 300"
      role="img"
      aria-labelledby="asym-t asym-d"
      preserveAspectRatio="xMidYMid meet"
    >
      <title id="asym-t">Two diverging curves</title>
      <desc id="asym-d">
        Code output, vulnerability introduction and exploit development rise steeply
        together, while testing capacity stays almost flat. The widening area between
        the two is the exposure gap.
      </desc>

      <path
        d="M40 246 C 240 226, 360 150, 528 30 L528 214 C 340 228, 220 238, 40 242 Z"
        className="ah-chart-gap"
      />
      <line x1="40" y1="256" x2="536" y2="256" className="ah-chart-axis" />
      <line x1="40" y1="18" x2="40" y2="256" className="ah-chart-axis" />

      <path d="M40 242 C 220 238, 340 228, 528 214" className="ah-chart-flat" />
      <path d="M40 246 C 240 226, 360 150, 528 30" className="ah-chart-rise" />

      <circle cx="528" cy="30" r="4.5" className="ah-chart-cap-rise" />
      <circle cx="528" cy="214" r="4.5" className="ah-chart-cap-flat" />

      <text x="518" y="60" textAnchor="end" className="ah-chart-lab ah-chart-lab--rise">
        code · vulnerabilities · exploits
      </text>
      <text x="518" y="238" textAnchor="end" className="ah-chart-lab ah-chart-lab--flat">
        testing capacity
      </text>
      <text x="300" y="170" textAnchor="middle" className="ah-chart-lab ah-chart-lab--gap">
        the exposure gap
      </text>
    </svg>
  );
}

window.AsymmetryChart = AsymmetryChart;
window.AsymmetryBand = AsymmetryBand;