/* Comparison (4 cols, 5 sins, no triangulation), DontClaim (yet), Mishire-cost + Gains */

/* Comparison ─────────────────────────────────────────────── */
function Comparison() {
  /* Rows reflect each tool's actual 2026 positioning. The category has moved
     on AI (HackerRank's AI IDE + AI Fluency grade, CodeSignal's Cosmo +
     agentic assessments, CoderPad's AI-aware monitored IDE, TestGorilla's
     AI Fluency battery). NextHire's edge is the work happens in the
     candidate's *own* IDE on a *real* OSS bug, with reasoning captured
     per-action — async, public-priced. */
  const rows = [
    {
      dim: 'Where work happens',
      nh: "The candidate's own machine. Their IDE, their AI tools, and their browser.",
      others: [
        "HackerRank's web sandbox (their AI IDE).",
        "CodeSignal's web platform (Cosmo-powered).",
        "TestGorilla's test interface, in-browser.",
        "CoderPad's monitored web IDE.",
      ],
    },
    {
      dim: 'What it tests',
      nh: 'A real bug-fix matched to the role. The work day 0 looks like.',
      others: [
        '7,500+ curated questions; Puzzles + AI-IDE drills.',
        'Cosmo-generated simulation tasks + agentic coding assessments.',
        '400+ off-the-shelf tests; AI Fluency battery of 27.',
        'Project takes + live pair-coding inside their IDE.',
      ],
    },
    {
      dim: 'AI policy',
      nh: 'Permitted by design. Measured.',
      others: [
        'Guarded AI inside their IDE; AI Fluency grade + plagiarism detection.',
        'Cosmo-assisted assessments and AI co-coding sessions.',
        'AI Fluency framework; live-voice interviews resistant to LLM scripts.',
        'AI-aware coding inside their monitored IDE.',
      ],
    },
    {
      dim: 'What you can see',
      nh: 'Every prompt, edit, command, search, and the reasoning behind.',
      others: [
        'Final code · AI Fluency grade · plagiarism score · proctor flags.',
        'Candidate↔Cosmo transcripts · session replay.',
        'Per-test scores · video transcripts · cheat-flags.',
        'Full typing-and-run session replay.',
      ],
    },
    {
      dim: 'Time per candidate',
      nh: 'Async · candidate picks the time · 5-minute read for you.',
      others: [
        '60–90 min · proctored window.',
        '60–120 min · timed task.',
        'Stacked tests, 10–60 min each.',
        'Live (60 min) or scheduled take-home.',
      ],
    },
    {
      dim: 'Pricing posture',
      nh: 'Public · per role · no escalator.',
      others: [
        'Enterprise sales-gated · 2,500+ customers.',
        'SaaS tiered, sales-gated.',
        'Per-seat SaaS · free trial.',
        'Per-seat SaaS tiers.',
      ],
    },
  ];

  return (
    <section className="section section--alt" id="compare">
      <div className="nh-container">
        <Reveal className="section__head">
          <p className="eyebrow">Compare</p>
          <h2 className="display-xl">Every other tool was built for a world where AI didn't write the code.</h2>
          <p className="body-l" style={{ maxWidth: '60ch', marginTop: 16 }}>
            HackerRank, CodeSignal, TestGorilla, CoderPad. Every one of them was built for a job that no longer exists. Here's where they each fall short, side by side.
          </p>
        </Reveal>

        <Reveal>
          <div className="compare-wrap">
            <table className="compare">
              <thead>
                <tr>
                  <th></th>
                  <th className="us">NextHire</th>
                  <th>HackerRank</th>
                  <th>CodeSignal</th>
                  <th>TestGorilla</th>
                  <th>CoderPad</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r, i) => (
                  <tr key={i}>
                    <td>{r.dim}</td>
                    <td className="us-cell">{r.nh}</td>
                    {r.others.map((cell, j) => (
                      <td key={j} className="dont">{cell}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* Don't-claim — first item now "yet" with founding-customer signup ─ */
function DontClaim() {
  const items = [
    {
      t: 'We do not predict job performance, yet.',
      d: 'Founding customers can opt in to share post-hire performance data; that\'s how we become the first to publish it.',
    },
    {
      t: 'We do not detect cheating.',
      d: 'AI is permitted. We measure how it\'s used, not whether it\'s used. Suspicion-scoring is a different category, run by other vendors.',
    },
    {
      t: 'We do not replace your loop.',
      d: 'We feed your interview rounds better candidates with auditable evidence. Your senior engineers still decide, every time.',
    },
    {
      t: 'We do not cover the whole role.',
      d: 'Communication, ownership, and system design live in your interview rounds. We measure roughly 25% of the engineering job; that 25% is the part nothing else captures.',
    },
  ];
  return (
    <section className="section" id="dontclaim">
      <div className="nh-container">
        <Reveal>
          <div className="dontclaim__block">
            <p className="eyebrow eyebrow--forest">What we don't claim</p>
            <h2 className="display-xl">Founders who concede limits<br />are trusted faster.</h2>
            <ol className="dontclaim__list">
              {items.map((i) => (
                <li key={i.t}>
                  <strong>{i.t}</strong>
                  <span>{i.d}</span>
                </li>
              ))}
            </ol>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* Mishire-cost + Gains — paired section ─────────────────────── */
function MishireGain() {
  const losses = [
    { n: '01', t: 'Two quarters of team velocity.' },
    { n: '02', t: 'A pipeline your reviewers stop trusting.' },
    { n: '03', t: 'Bugs your team inherits long after the offboard.' },
    { n: '04', t: 'Replacement cost: sourcing, screening, ramp, again.' },
  ];
  const gains = [
    { n: '01', t: 'The best engineer in your pipeline. Surfaced, not gambled on.' },
    { n: '02', t: 'Hire with confidence. Don\'t let the vibe coders in.' },
    { n: '03', t: 'Senior-engineer time saved.' },
    { n: '04', t: 'Day 0, they ship. Week 3, they\'re still trusted.' },
  ];
  return (
    <section className="section section--alt" id="cost">
      <div className="nh-container">
        <div className="mishire">
          <Reveal className="mishire__col mishire__col--loss">
            <h2 className="display-xl mishire__h">
              A <span className="italic-emphasis">mishire </span> never
              <br />
              costs just a<br />
              salary.
            </h2>
            <ol className="mishire__list">
              {losses.map((x) => (
                <li key={x.n}>
                  <span className="mishire__num">{x.n}</span>
                  <span className="mishire__copy">{x.t}</span>
                </li>
              ))}
            </ol>
            <p className="mishire__close">
              One wrong hire is enough to corrupt the signal.
              <br />
              Senior, mid, junior. <em>The math doesn't care</em>.
            </p>
          </Reveal>

          <Reveal className="mishire__col mishire__col--gain">
            <h2 className="display-xl mishire__h">
              The{" "}
              <span className="italic-emphasis">
                right hire </span> pays
                <br />
                back every
              <br />
              sprint after.
            </h2>
            <ol className="mishire__list mishire__list--gain">
              {gains.map((x) => (
                <li key={x.n}>
                  <span className="mishire__num mishire__num--gain">{x.n}</span>
                  <span className="mishire__copy">{x.t}</span>
                </li>
              ))}
            </ol>
            <p className="mishire__close">
              Evidence over vibes. Reliability over résumé.
              <br />
              <em>Hire the engineer who fixes the 2&nbsp;a.m. bug.</em>
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Comparison, DontClaim, MishireGain });