// ComparisonTable — "Without Sekura / With Sekura" 5-row comparison.
// Lives on /product/ between AttackGraphReveal and ScanYourRepo. Maps the
// status-quo (scanners + manual pentests) to Sekura's behavior on five
// dimensions: output, false positives, scope, cadence, triage burden.
//
// Closes with "read the full comparison →" links to the dedicated /vs/
// pages so visitors who want depth on either side can dive in.

function ComparisonTable() {
  const { React } = window;

  const ROWS = [
    {
      dim: 'Output',
      without: 'Ranked list of potential issues; CVSS scores divorced from your environment',
      withSekura: 'List of exploited issues, each with a deterministic proof-of-exploit',
    },
    {
      dim: 'False positives',
      without: 'Inherent — scanners flag what might be vulnerable, your team validates each',
      withSekura: 'Eliminated by construction — Sekura only reports findings it has actually exploited',
    },
    {
      dim: 'Scope',
      without: 'SAST or DAST or SCA — one surface per tool, one tool per vendor',
      withSekura: 'SAST + DAST + exploit chaining + LLM-security + post-quantum crypto in one scan',
    },
    {
      dim: 'Cadence',
      without: 'On-demand or scheduled — weekly at best, annually for manual pentests',
      withSekura: 'Continuous — every push, every PR, optionally every hour',
    },
    {
      dim: 'Triage burden',
      without: 'Hours per finding to validate, prioritize, and fix',
      withSekura: 'Zero — every finding ships with the payload that demonstrates it',
    },
  ];

  return (
    <section className="compare-section" aria-labelledby="compare-heading">
      <div className="compare-inner">
        <p className="compare-eyebrow">comparison</p>
        <h2 id="compare-heading" className="compare-heading">
          Without Sekura <span className="compare-heading-sep">·</span> <em>With Sekura</em>
        </h2>
        <p className="compare-sub">
          What changes when you replace the scan-and-triage loop with continuous, proof-first
          autonomous pentesting.
        </p>

        <div className="compare-table-wrap">
          <table className="compare-table">
            <thead>
              <tr>
                <th scope="col" className="compare-th-dim">&nbsp;</th>
                <th scope="col" className="compare-th-without">Without Sekura</th>
                <th scope="col" className="compare-th-with">With Sekura</th>
              </tr>
            </thead>
            <tbody>
              {ROWS.map((r, i) => (
                <tr key={i}>
                  <th scope="row" className="compare-td-dim">{r.dim}</th>
                  <td className="compare-td-without">{r.without}</td>
                  <td className="compare-td-with">{r.withSekura}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="compare-deeper">
          <a href="/vs/scanners/" className="compare-deeper-link">
            Read the full comparison vs scanners <span className="cta-arrow">→</span>
          </a>
          <a href="/vs/manual-pentest/" className="compare-deeper-link">
            Read the full comparison vs manual pentests <span className="cta-arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.ComparisonTable = ComparisonTable;