// OnCatch comparison page — honest competitive matrix.
// Updated 2026-05-24 (Wave 2): refreshed for current competitive reality.
// - Bird Eats Bug → Bug Capture by BrowserStack (acquired Aug 2024 for $20M)
// - Gleap repositioned as customer-support OS with Kai AI agent
// - Marker.io console+network now gated to $149/mo Team
// - Userback, BugHerd, Jam.dev refreshed
// - OnCatch column reflects locked tier gating (Free/Solo $19/Team $49/SDLC)
// - "We are not these" section added for adjacent competitors

const COMPETITORS = ["OnCatch", "Userback", "Marker.io", "BugHerd", "Bug Capture", "Jam.dev", "Gleap", "FeedBear"];

// Cell legend (rendered visually at the top of the matrix):
// "✓"  / "✓ Free"   = present at all tiers including Free
// "Solo $19" / "Team $49" / "SDLC" = tier-specific (OnCatch column)
// "$" / "$$"        = competitors' paid mid / top tier
// "—"               = not present
// "partial"         = partially supported
// "roadmap"         = on OnCatch's roadmap (not shipped under sprint cutoff)
// "enterprise"     = competitor requires enterprise contract
const CAPTURE_ROWS = [
  ["Embeddable JS widget",                ["✓", "✓", "✓", "✓", "extension", "extension", "✓", "—"]],
  ["Whole-page screenshot",               ["✓ Free", "✓", "✓", "✓", "✓", "✓", "✓", "—"]],
  ["Region-select screenshot",            ["✓ Free", "✓", "✓", "✓", "✓", "✓", "✓", "—"]],
  ["Annotations (draw / arrow / text)",   ["✓ Free", "✓", "✓", "✓", "✓", "✓", "✓", "—"]],
  ["Pin-to-element bug reporting",        ["Solo $19", "✓", "✓", "✓", "—", "—", "✓", "—"]],
  ["Console + network logs (auto)",       ["Solo $19", "$", "$149/mo Team", "$", "enterprise", "✓ free", "✓", "—"]],
  ["Screen recording",                    ["Solo $19", "$", "$", "✓", "✓", "✓", "✓", "—"]],
  ["Session replay (rrweb-style)",        ["roadmap", "$", "$", "—", "✓", "✓", "✓", "—"]],
  ["Reporter identification SDK",         ["Solo $19", "✓", "✓", "✓", "—", "✓", "✓", "—"]],
  ["Custom metadata from page",           ["Solo $19", "✓", "$", "✓", "✓", "✓", "✓", "—"]],
  ["Privacy masking (PII scrub)",         ["✓ Free", "$$", "$", "—", "✓", "✓", "✓", "—"]],
  ["Browser extension capture mode",      ["by design no", "✓", "✓", "—", "✓", "✓ (primary)", "—", "—"]],
  ["Widget state preserved on close",     ["✓", "?", "?", "?", "n/a", "n/a", "?", "n/a"]],
];

const TRIAGE_ROWS = [
  ["Submission inbox + filters",          ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Triage state / status",               ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Comments / @mentions",                ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Assignee + tags",                     ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Bulk actions (transactional audit)",  ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "—"]],
  ["Saved views / custom filters",        ["✓", "✓", "✓", "✓", "—", "—", "✓", "—"]],
  ["Priority sort",                       ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Custom workspace statuses",           ["✓", "$", "✓", "—", "✓", "—", "$", "—"]],
  ["Duplicate detection (console fp)",    ["✓", "$", "✓", "—", "—", "—", "✓", "—"]],
  ["AI triage / severity scoring",        ["✓ Solo", "$", "✓ beta", "✓ beta", "✓", "✓", "✓", "—"]],
  ["Multi-admin + ownership transfer",    ["Team $49", "$$", "$$", "$$", "enterprise", "✓", "$$", "$$"]],
];

const INTEGRATIONS_ROWS = [
  ["Webhooks (additive-only contract)",   ["✓", "$", "$", "✓", "$", "—", "✓", "—"]],
  ["REST API",                            ["Solo $19", "$", "$", "✓", "✓", "✓", "$", "—"]],
  ["Slack",                               ["Solo $19", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["GitHub Issues — two-way sync",        ["Team $49", "one-way", "one-way", "one-way", "enterprise", "—", "one-way", "—"]],
  ["Linear — two-way sync",               ["Team $49", "one-way", "one-way", "$", "enterprise", "—", "one-way", "—"]],
  ["Jira Cloud — two-way sync",           ["Team $49", "$", "$ Team", "$", "enterprise", "—", "$", "—"]],
  ["Zapier",                              ["Team $49", "✓", "✓", "✓", "✓", "—", "✓", "—"]],
  ["MCP server (Claude / Cursor / Windsurf)", ["Solo $19", "banner", "banner", "✓", "—", "✓ free", "—", "—"]],
];

const COLLAB_ROWS = [
  ["Multi-workspace / multi-project",     ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Per-project member permissions",      ["✓", "✓", "✓", "✓", "✓", "✓", "✓", "✓"]],
  ["Guest reviewers (read-only)",         ["✓", "—", "✓", "✓", "—", "—", "—", "—"]],
  ["Reporter portal (public roadmap)",    ["—", "$", "—", "—", "—", "—", "✓", "✓"]],
];

const ADMIN_ROWS = [
  ["Stripe billing",                      ["✓", "✓", "✓", "✓", "enterprise", "✓", "✓", "✓"]],
  ["Custom domain",                       ["Team $49", "$$", "$", "$", "—", "—", "$", "$"]],
  ["White-label widget",                  ["Team $49", "$$", "$", "$", "enterprise", "—", "$", "$"]],
  ["SSO / SAML",                          ["v2.0", "$$ 25-seat min", "$$ custom", "$$", "enterprise", "$$ \"Call Us\"", "$$", "$$"]],
  ["Audit logs",                          ["v2.0", "—", "$", "—", "enterprise", "$$", "$$ Ent", "—"]],
  ["GDPR data subject rights",            ["✓ Free", "✓", "✓", "✓", "enterprise", "✓", "✓", "✓"]],
  ["Western-launch compliance",           ["✓ Free", "enterprise", "enterprise", "enterprise", "enterprise", "enterprise", "enterprise", "partial"]],
  ["GPC universal opt-out, end-to-end",   ["✓ Free", "partial", "partial", "partial", "partial", "partial", "partial", "partial"]],
  ["WCAG 2.1 AA verified",                ["✓", "partial", "partial", "partial", "partial", "partial", "partial", "partial"]],
  ["Breach notification (4 jurisdictions)", ["✓", "—", "—", "—", "partial", "—", "—", "—"]],
  ["20-state US privacy disclosures",     ["✓", "—", "—", "—", "partial", "—", "—", "—"]],
  ["7-locale i18n on widget",             ["✓", "$$", "$$", "$$", "n/a", "n/a", "$$", "$$"]],
  ["Strong abuse defense (Turnstile + rate limits)", ["✓", "partial", "partial", "partial", "partial", "partial", "partial", "partial"]],
  ["SOC 2 Type 2",                        ["in progress", "✓ enterprise", "?", "?", "✓", "?", "$999/mo Ent", "?"]],
];

const PRICING_ROWS = [
  ["Free tier",                           ["✓ 10/mo", "✓ limited", "—", "—", "✓ Chrome ext", "✓ unlimited", "✓", "—"]],
  ["Entry tier price",                    ["$0 → $19 Solo", "$7-9/seat", "$39/mo (3 seats)", "$50/mo (5 seats)", "enterprise", "$0 free", "$31-39/mo", "$19-49/mo"]],
  ["Console + network at lowest paid tier", ["Solo $19 flat", "$15-19/seat", "$149/mo Team", "$ paid", "enterprise", "✓ free", "✓", "—"]],
  ["Custom domain / white-label",         ["Team $49", "—", "—", "—", "enterprise", "—", "—", "—"]],
  ["AI triage at entry",                  ["Solo $19", "—", "—", "—", "enterprise", "✓ free", "$", "—"]],
  ["Two-way Jira / Linear / GitHub",      ["Team $49", "—", "—", "—", "enterprise", "—", "$", "—"]],
  ["SSO seat minimum",                    ["n/a (v2.0)", "25 seats", "custom", "25 members", "enterprise", "Call Us", "$999/mo Ent", "$$"]],
  ["OnPath QA team triages your bugs",    ["✓ SDLC", "—", "—", "—", "—", "—", "—", "—"]],
];

const CELL_LEGEND = [
  { sym: "✓ Free", label: "Available at all tiers including Free" },
  { sym: "Solo $19", label: "OnCatch's Solo tier" },
  { sym: "Team $49", label: "OnCatch's Team tier" },
  { sym: "SDLC", label: "OnPath SDLC bundle (custom)" },
  { sym: "$", label: "Competitor paid mid-tier" },
  { sym: "$$", label: "Competitor top / enterprise tier" },
  { sym: "—", label: "Not present" },
  { sym: "roadmap", label: "OnCatch's roadmap (not under sprint cutoff)" },
];

const SectionTable = ({ title, id, rows, note }) => (
  <div className="cmp-section" id={id}>
    <h3 className="h-2 cmp-section-title">{title}</h3>
    {note && <p className="muted cmp-section-note">{note}</p>}
    <div className="cmp-table-wrap" role="region" aria-label={`${title} comparison table`} tabIndex="0">
      <table className="cmp-table">
        <caption className="sr-only">{title}: feature comparison across OnCatch and 7 competitors</caption>
        <thead>
          <tr>
            <th scope="col" className="cmp-feature-col">Feature</th>
            {COMPETITORS.map((c, i) => (
              <th scope="col" key={c} className={i === 0 ? "cmp-us" : ""}>{c}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map(([label, cells]) => (
            <tr key={label}>
              <th scope="row" className="cmp-feature-col">{label}</th>
              {cells.map((v, i) => (
                <td key={i} className={`${i === 0 ? "cmp-us" : ""}`}>
                  <CmpCell value={v} highlight={i === 0} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const CmpCell = ({ value, highlight }) => {
  const v = (value || "").trim();
  if (v === "✓") return <span className="cmp-yes" aria-label="Included">✓</span>;
  if (v === "—") return <span className="cmp-no" aria-label="Not available">—</span>;
  if (v === "$") return <span className="cmp-paid" aria-label="Paid mid-tier">$<span className="sr-only">, paid mid-tier</span></span>;
  if (v === "$$") return <span className="cmp-paid-top" aria-label="Top tier or enterprise">$$<span className="sr-only">, top tier or enterprise</span></span>;
  if (v === "roadmap") return <span className="cmp-future" aria-label="On OnCatch's roadmap">roadmap</span>;
  if (v === "v2.0") return <span className="cmp-future" aria-label="OnCatch v2.0">v2.0</span>;
  if (v === "by design no") return <span className="cmp-by-design" aria-label="Intentionally not offered">by design no</span>;
  if (v === "n/a") return <span className="cmp-na">n/a</span>;
  if (v === "?") return <span className="cmp-unknown" aria-label="Unknown">?</span>;
  if (v === "in progress") return <span className="cmp-progress">in progress</span>;
  if (v === "partial") return <span className="cmp-partial">partial</span>;
  if (v === "extension") return <span className="cmp-text">extension only</span>;
  if (v === "banner") return <span className="cmp-text">banner only</span>;
  if (v === "one-way") return <span className="cmp-text">one-way</span>;
  if (v === "enterprise") return <span className="cmp-paid-top">enterprise</span>;
  if (v.startsWith("✓")) return <span className="cmp-yes-plus">{v}</span>;
  if (v.startsWith("$")) return <span className="cmp-paid">{v}</span>;
  if (v.startsWith("Solo") || v.startsWith("Team") || v.startsWith("SDLC")) {
    return <span className="cmp-tier">{v}</span>;
  }
  return <span className="cmp-text">{v}</span>;
};

const CompetitorCard = ({ name, url, oneLiner, strengths, choose, against }) => (
  <div className="cmp-card">
    <div className="cmp-card-head">
      <div>
        <h3 className="h-3" style={{ marginBottom: 4 }}>{name}</h3>
        <a href={url} target="_blank" rel="noreferrer" className="cmp-card-url muted mono">
          {url.replace(/^https?:\/\//, "")} <span className="sr-only">(opens in new tab)</span>
        </a>
      </div>
    </div>
    <p className="cmp-card-line">{oneLiner}</p>
    <div className="cmp-card-grid">
      <div>
        <div className="cmp-card-label">Where they shine</div>
        <ul>
          {strengths.map((s) => <li key={s}>{s}</li>)}
        </ul>
      </div>
      <div>
        <div className="cmp-card-label">Pick {name} when…</div>
        <p>{choose}</p>
      </div>
      <div>
        <div className="cmp-card-label">Pick OnCatch when…</div>
        <p>{against}</p>
      </div>
    </div>
  </div>
);

const AdjacentCard = ({ name, url, oneLiner, pickWhen }) => (
  <div className="cmp-adjacent-card">
    <div className="cmp-adjacent-head">
      <h4 className="h-3" style={{ margin: 0 }}>{name}</h4>
      <a href={url} target="_blank" rel="noreferrer" className="cmp-card-url muted mono">
        {url.replace(/^https?:\/\//, "")} <span className="sr-only">(opens in new tab)</span>
      </a>
    </div>
    <p className="cmp-adjacent-line">{oneLiner}</p>
    <p className="cmp-adjacent-pick"><b>Pick {name} when</b>: {pickWhen}</p>
  </div>
);

const ComparePage = () => (
  <div className="page compare-page">
    <Header active="compare" />

    <main id="main-content">
      {/* Hero */}
      <section className="container page-hero">
        <div>
          <SectionEyebrow>How OnCatch compares</SectionEyebrow>
          <h1 className="h-display" style={{ marginTop: 16 }}>
            Every bug-capture widget says "built for teams." <em>We're built for QA.</em>
          </h1>
        </div>
        <div>
          <p className="lede">
            We tested 7 direct competitors and 4 adjacent tools — feature-by-feature,
            pricing-page by pricing-page. No hand-waving. Where they win, where we win,
            where we're catching up.
          </p>
          <div className="cmp-hero-stats">
            <div className="cmp-hero-stat">
              <div className="cmp-hero-stat-num">11</div>
              <div className="cmp-hero-stat-label">tools<br/>analyzed</div>
            </div>
            <div className="cmp-hero-stat">
              <div className="cmp-hero-stat-num">60<span className="cmp-hero-stat-plus">+</span></div>
              <div className="cmp-hero-stat-label">features<br/>compared</div>
            </div>
            <div className="cmp-hero-stat">
              <div className="cmp-hero-stat-num">17yr</div>
              <div className="cmp-hero-stat-label">QA company<br/>built this</div>
            </div>
          </div>
        </div>
      </section>

      {/* Competitor wordmark strip */}
      <section className="container section-tight">
        <div className="cmp-wordmarks">
          <div className="cmp-wordmarks-label">We tested:</div>
          <div className="cmp-wordmarks-row">
            <a href="https://userback.io" target="_blank" rel="noreferrer" className="cmp-wordmark">Userback</a>
            <span className="cmp-wordmarks-sep">·</span>
            <a href="https://marker.io" target="_blank" rel="noreferrer" className="cmp-wordmark">Marker.io</a>
            <span className="cmp-wordmarks-sep">·</span>
            <a href="https://bugherd.com" target="_blank" rel="noreferrer" className="cmp-wordmark">BugHerd</a>
            <span className="cmp-wordmarks-sep">·</span>
            <a href="https://www.browserstack.com/bug-capture" target="_blank" rel="noreferrer" className="cmp-wordmark">Bug Capture (BrowserStack)</a>
            <span className="cmp-wordmarks-sep">·</span>
            <a href="https://jam.dev" target="_blank" rel="noreferrer" className="cmp-wordmark">Jam.dev</a>
            <span className="cmp-wordmarks-sep">·</span>
            <a href="https://gleap.io" target="_blank" rel="noreferrer" className="cmp-wordmark">Gleap</a>
            <span className="cmp-wordmarks-sep">·</span>
            <a href="https://feedbear.com" target="_blank" rel="noreferrer" className="cmp-wordmark">FeedBear</a>
          </div>
        </div>
      </section>

      {/* Per-competitor cards — MOVED UP from below the matrix, so buyers find
          their competitor faster than scrolling 49 matrix rows */}
      <section className="container section">
        <div className="section-head">
          <div>
            <SectionEyebrow>The competitors</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>One card per tool. Honest strengths first.</h2>
          </div>
          <p className="lede">
            We respect what these teams have built. If you read these and think
            "I want what they're describing," go try them — they'll do right by
            you. If you read OnCatch's column and think "that's the one," we'd
            love to have you.
          </p>
        </div>

        <div className="cmp-card-grid-outer">
          <CompetitorCard
            name="Userback"
            url="https://userback.io"
            oneLiner="The category benchmark. Most complete feature set, biggest integrations roster, mature pricing tiers. Recently added MCP as a banner-level feature."
            strengths={[
              "30+ integrations, including MCP and Zapier",
              "Visual feedback widget with annotations + video + session replay",
              "Mature roles + permissions, SSO at Business Plus",
              "AI insights and summarization at higher tiers",
            ]}
            choose="You want the most complete feature set today and you're willing to pay $7-9 per seat to start, with most premium integrations gated to $15+/seat tiers. Strong fit for teams of 5-25 with budget for a per-seat tool."
            against="You want console + network logs at $19/mo flat instead of $15-19 per seat. You want full Western compliance at the entry tier without hitting Userback's 25-seat SSO minimum. You want a parent QA agency to escalate to when triage overflows."
          />

          <CompetitorCard
            name="Marker.io"
            url="https://marker.io"
            oneLiner="Best-in-class Jira-shop tool. Visual feedback for teams whose dev workflow already lives in Jira. New AI banner — 'Let AI fix your bugs.' Pricing jumped 3.8× from Starter ($39) to Team ($149) for console + network access."
            strengths={[
              "Tightest Jira integration in the category",
              "Pin-to-element + visual annotations at every tier",
              "Duplicate detection out of the box",
              "Guest reviewers (10-50 free seats for clients)",
            ]}
            choose="Your team lives in Jira and you want feedback that flows directly into Jira tickets with screenshots embedded and pin-to-element context preserved. Strong fit for agencies with paying clients who need read-only access."
            against="You don't want a 3.8× pricing jump to unlock console + network logs. You're not on Jira (or want to switch to Linear / GitHub two-way sync). You want lower per-month pricing — Marker.io starts at $39/mo for 3 seats."
          />

          <CompetitorCard
            name="BugHerd"
            url="https://bugherd.com"
            oneLiner="Pin-to-element pioneer for design agencies. Built around the 'click the broken thing' workflow. New BugHerd AI Beta with MCP across all tiers. Standard tier now $50/mo (was $42)."
            strengths={[
              "Signature pin-to-element capture (other tools added it later)",
              "Kanban-style triage board",
              "Unlimited guest reviewers — agency-friendly",
              "Strong on visual feedback for marketing sites + Webflow / WordPress",
            ]}
            choose="Your work is mostly visual (web design, marketing sites, agency client projects) and the pin-to-element + guest-reviewer combo is exactly your workflow. Strong fit for agencies handling many small client sites."
            against="Your work is more app than site (real B2B SaaS, in-product feedback). You need console + network logs (BugHerd doesn't capture them). You want modern integrations like Linear two-way sync, full MCP, or AI triage. You're not OK with per-seat pricing starting at $50/mo for 5 seats."
          />

          <CompetitorCard
            name="Bug Capture by BrowserStack"
            url="https://www.browserstack.com/bug-capture"
            oneLiner="An enterprise-platform play. Acquired Bird Eats Bug for $20M in August 2024 and folded it into the BrowserStack Testing Toolkit. Free Chrome extension + enterprise contact-sales."
            strengths={[
              "Inside BrowserStack's enterprise testing ecosystem",
              "Deterministic screen recording with auto-captured network + console",
              "Browser extension for no-install capture",
              "Enterprise contract-sales motion with BrowserStack account managers",
            ]}
            choose="You're already on BrowserStack's testing platform and want bug-capture inside that bundle. The integration with their automated testing stack is the value. Strong fit for QA teams already paying for BrowserStack."
            against="You don't want to commit to BrowserStack's enterprise contract motion. You want SMB-friendly pricing without enterprise gating. You want an embeddable widget on your customers' sites, not a Chrome extension for internal QA."
          />

          <CompetitorCard
            name="Jam.dev"
            url="https://jam.dev"
            oneLiner="Browser-extension-first. New AI-led hero: 'Never write repro steps again. Jam AI does it for you.' MCP support across Cursor, Claude Desktop, Claude Code, Windsurf, VSCode, ChatGPT. On the SSO Wall of Shame for 'Call Us!' SSO pricing."
            strengths={[
              "Free tier with unlimited recordings",
              "Browser extension as primary surface — no embed needed",
              "AI summaries baked in",
              "MCP integration across Claude Code / Cursor / Windsurf / VSCode / ChatGPT",
            ]}
            choose="Your team primarily wants a tool YOU use to report internal bugs (not your end users). The extension flow + free tier + AI summaries is unbeatable for that internal-dev workflow. Strong fit for PM + dev internal QA."
            against="You want your end users (not just your team) to report bugs. You need an embeddable widget on your customers' sites. You want compliance posture without 'Call Us!' SSO pricing."
          />

          <CompetitorCard
            name="Gleap"
            url="https://gleap.io"
            oneLiner="Pivoted to a 'Product Intelligence Platform' with Kai AI agent ($0.04 per answer). Bug-reporting is now one feature inside a broader customer-support OS. SOC 2 Type 2 gated to $999/mo Enterprise."
            strengths={[
              "Single platform: bug reports + feature requests + Kai AI customer chat",
              "30+ integrations including Jira, Linear, GitHub",
              "Reporter portal (public roadmap voting)",
              "All-in-one customer-feedback OS positioning",
            ]}
            choose="You want one tool that handles bug reports + feature requests + Kai AI customer chat + public roadmap. The Gleap-as-customer-feedback-OS pitch is real and the AI features are mature."
            against="You want a focused bug-capture widget, not a customer-support OS. You're scope-conscious about widget bundle size. You need SOC 2 Type 2 without the $999/mo enterprise gate. You want a QA agency on call instead of an AI chatbot."
          />

          <CompetitorCard
            name="FeedBear"
            url="https://feedbear.com"
            oneLiner="Public feedback boards (Canny-style). Different category — not bug reports, but feature requests + roadmap + changelog. Coexists with bug-capture tools rather than competing."
            strengths={[
              "Best-in-class public feedback boards",
              "Roadmap + changelog built in",
              "Reporter voting / prioritization",
              "Lower entry pricing than the bug-report category",
            ]}
            choose="You want public feature-request boards where your users upvote ideas — like a hosted Canny clone. Genuinely different problem from in-product bug reports."
            against="You actually want bug reports with screenshots + console logs + triage workflow. FeedBear isn't built for that — they're optimized for the 'public idea board' use case. Many teams run both."
          />
        </div>
      </section>

      {/* Cell legend — surfaced visually for the matrix below */}
      <section className="container section-tight">
        <div className="cmp-legend">
          <span className="cmp-legend-label">How to read the matrix:</span>
          {CELL_LEGEND.map(({ sym, label }) => (
            <span key={sym} className="cmp-legend-item">
              <span className="cmp-legend-sym"><CmpCell value={sym} /></span>
              <span className="cmp-legend-text">{label}</span>
            </span>
          ))}
        </div>
      </section>

      {/* The matrix */}
      <section className="container section">
        <div className="section-head">
          <div>
            <SectionEyebrow>The full matrix</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Feature by feature, no pretending.</h2>
          </div>
          <p className="lede">
            Maintained continuously. Last refresh: 2026-05-24 — captured BrowserStack's
            Aug 2024 acquisition of Bird Eats Bug, Gleap's pivot to Kai AI customer
            support, Marker.io's $149/mo Team tier console + network gate, and OnCatch's
            recent two-way sync, MCP, and AI triage shadow mode shipments.
          </p>
        </div>

        {/* Section sub-nav for jumping into the matrix */}
        <nav className="cmp-section-nav" aria-label="Matrix sections">
          <a href="#cmp-capture">Capture layer</a>
          <a href="#cmp-triage">Triage admin</a>
          <a href="#cmp-integrations">Integrations</a>
          <a href="#cmp-collab">Collaboration</a>
          <a href="#cmp-admin">Admin · security · billing</a>
          <a href="#cmp-pricing">Pricing posture</a>
        </nav>

        <SectionTable
          title="Capture layer"
          id="cmp-capture"
          note="Everything that happens between a user spotting a bug and the report leaving the browser."
          rows={CAPTURE_ROWS}
        />
        <SectionTable
          title="Triage admin"
          id="cmp-triage"
          note="What your team does once the report lands in your inbox."
          rows={TRIAGE_ROWS}
        />
        <SectionTable
          title="Integrations"
          id="cmp-integrations"
          note="Where the work goes after you've triaged it. The most-asked questions in any feedback-tool eval."
          rows={INTEGRATIONS_ROWS}
        />
        <SectionTable
          title="Collaboration & access"
          id="cmp-collab"
          rows={COLLAB_ROWS}
        />
        <SectionTable
          title="Admin, security & billing"
          id="cmp-admin"
          rows={ADMIN_ROWS}
        />
        <SectionTable
          title="Pricing posture"
          id="cmp-pricing"
          note="What's free, what's gated, where the entry tier ceilings sit. Numbers as of 2026-05-24."
          rows={PRICING_ROWS}
        />
      </section>

      {/* We are not these — adjacent tools in other categories */}
      <section className="container section section-divider">
        <div className="section-head">
          <div>
            <SectionEyebrow>We are not these</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Adjacent tools — different problem.</h2>
          </div>
          <p className="lede">
            These tools serve real problems, but they're not bug-capture widgets.
            Honest framing of what they do and when you'd use them instead.
          </p>
        </div>

        <div className="cmp-adjacent-grid">
          <AdjacentCard
            name="Pastel"
            url="https://usepastel.com"
            oneLiner="Website annotation + design feedback for Webflow / Shopify agencies. Acquired by Whatnot (Feb 2022) but still operating."
            pickWhen="Your work is design approval, not bug triage. Pastel is built for the 'mark up this mockup' workflow, not 'capture the production bug.'"
          />
          <AdjacentCard
            name="Ruttl"
            url="https://ruttl.com"
            oneLiner="Visual feedback + pixel-pinned comments across web + mobile + PDF. $0 Basic / $18 Pro / $90 Business per user."
            pickWhen="You want design feedback across web, mobile, AND PDF artifacts in one tool. Strong fit if the input mix is multi-format design review, not in-product bugs."
          />
          <AdjacentCard
            name="Usersnap"
            url="https://usersnap.com"
            oneLiner="Repositioned as a 'full cycle product platform' — bug + surveys + AI sentiment + behavioral targeting. $99-$1,299/mo. Console logs gated to Professional ($699/mo)."
            pickWhen="You have $99-$1,299/mo and want a single-vendor platform that bundles bug capture with micro-surveys, AI sentiment, and behavioral targeting. Not SMB-friendly pricing."
          />
          <AdjacentCard
            name="QA Touch"
            url="https://www.qatouch.com"
            oneLiner="AI Test Case Management — 'built by testers for testers.' $5-$15 per user. Different category: test-case management, not embeddable bug capture."
            pickWhen="You need test-case management software for your QA team's test plans. Many teams run QA Touch (for test management) AND OnCatch (for customer-reported bug capture) in parallel."
          />
        </div>
      </section>

      {/* Where OnCatch wins (and where it doesn't) */}
      <section className="container section section-divider">
        <div className="section-head">
          <div>
            <SectionEyebrow>Honest read</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Where we win, where we match, where we're catching up.</h2>
          </div>
          <p className="lede">
            No tool is a clean sweep. Here's the truth.
          </p>
        </div>

        <div className="cmp-honest-grid">
          <div className="cmp-honest-cell cmp-honest-win">
            <div className="cmp-honest-label">Where we win</div>
            <ul>
              <li><b>Console + network at $19/mo flat.</b> Userback charges $15-19 per SEAT. Marker.io gates to $149/mo Team (3.8× jump from Starter). At any team of 2+, we win on price.</li>
              <li><b>Western compliance built in at Free.</b> GPC honored end-to-end. Breach matrix across 4 jurisdictions. 20-state US privacy disclosures. WCAG 2.1 AA verified. Userback gates SSO to 25 seats; Gleap gates SOC 2 to $999/mo.</li>
              <li><b>"Built by QA, for QA." </b>OnPath Testing has been doing QA since 2009 — 17 years. No competitor has a parent QA agency on call. They can't copy this without acquiring one (which BrowserStack did with Bird Eats Bug).</li>
              <li><b>The AI-bug loop.</b> MCP server at Solo $19. Claude Code, Cursor, and Windsurf read your queue directly. Two-way Jira / Linear / GitHub sync at Team $49. The AI that wrote the bug can read the report — and propose the fix.</li>
              <li><b>Strong abuse defense by default.</b> Per-IP + per-email + per-workspace rate limits, Turnstile gate, email-bomb cap, fail-open observability. Competitors are uniformly partial here.</li>
            </ul>
          </div>

          <div className="cmp-honest-cell cmp-honest-match">
            <div className="cmp-honest-label">Where we match (shipped)</div>
            <ul>
              <li><b>Visual annotation, screen recording, pin-to-element</b> — all shipped.</li>
              <li><b>Two-way Jira / Linear / GitHub sync</b> — shipped at Team $49. Most competitors only do one-way; Marker.io has Jira but at paid tiers.</li>
              <li><b>MCP server (Claude / Cursor / Windsurf)</b> — shipped at Solo $19. Jam.dev is the only other tool with MCP at their free tier; the rest treat it as a banner-level feature.</li>
              <li><b>AI triage shadow mode</b> — severity scoring + auto-summary, shipped.</li>
              <li><b>Multi-admin + ownership transfer (audit-logged)</b> — shipped at Team $49.</li>
              <li><b>GDPR data subject rights, storage cap UX, Stripe billing</b> — shipped.</li>
            </ul>
          </div>

          <div className="cmp-honest-cell cmp-honest-behind">
            <div className="cmp-honest-label">Where we're catching up</div>
            <ul>
              <li><b>Session replay (rrweb-style DOM playback).</b> Bug Capture, Jam, Gleap have it. We don't. Not under sprint cutoff; v2.0 candidate.</li>
              <li><b>Browser extension capture mode.</b> Userback, Marker.io, Bug Capture, Jam offer extensions for no-install capture. We don't, <em>by design</em> — embed-first is our wedge. The widget your customers see is the widget your QA team controls.</li>
              <li><b>SSO / SAML / audit logs.</b> Universal at top tiers across competitors. OnCatch v2.0 — not a launch blocker for SMB but flag it if it's a hard requirement.</li>
              <li><b>Mature integrations roster.</b> Userback and Gleap have 30+ each. We start with the highest-value 8 (Slack, GitHub, Linear, Jira, MCP, Zapier, webhook, email digest) and add more after GA.</li>
              <li><b>SOC 2 Type 2.</b> In progress Q4 2026. Bug Capture (via BrowserStack) and Gleap have it now (Gleap gates to $999/mo Enterprise).</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Bottom line + CTA */}
      <section className="container section">
        <div className="section-head">
          <div>
            <SectionEyebrow>Bottom line</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Why QA teams pick OnCatch.</h2>
          </div>
        </div>

        <div className="cmp-bottom">
          <div className="cmp-bottom-cell">
            <div className="cmp-bottom-num mono">01</div>
            <h3 className="h-3">Built by QA, for QA.</h3>
            <p className="muted">
              OnPath Testing has been doing QA since 2009 — 17 years. Clutch Top
              Software Testing Companies 2022. Mercury 100 6× honoree. No
              competitor has a 17-year QA company behind it. Bug Capture's parent
              (BrowserStack) is closest, but they bought their way in — they
              didn't build it.
            </p>
          </div>
          <div className="cmp-bottom-cell">
            <div className="cmp-bottom-num mono">02</div>
            <h3 className="h-3">SMB pricing without SMB compromises.</h3>
            <p className="muted">
              Console + network at $19/mo flat. Two-way Jira / Linear / GitHub
              sync at $49 flat. Custom domain + white-label at $49 flat. The
              features competitors gate behind $99-1,299/mo plans or 25-seat
              minimums are part of how we ship.
            </p>
          </div>
          <div className="cmp-bottom-cell">
            <div className="cmp-bottom-num mono">03</div>
            <h3 className="h-3">A real QA agency on call.</h3>
            <p className="muted">
              When the queue overflows or the team's short-staffed, OnPath
              Testing — the parent QA agency that built OnCatch — can absorb
              triage on the SDLC bundle. No competitor has this; none of them
              can build it without acquiring an agency.
            </p>
          </div>
          <div className="cmp-bottom-cell">
            <div className="cmp-bottom-num mono">04</div>
            <h3 className="h-3">The same AI that wrote the bug can read the report.</h3>
            <p className="muted">
              MCP server at Solo $19. Claude Code, Cursor, and Windsurf read
              your queue directly via Model Context Protocol. Two-way Jira /
              Linear / GitHub sync at Team $49. The AI agent can read AND act.
              Userback and Marker.io ship MCP as a banner-level afterthought;
              we made it the integration spine.
            </p>
          </div>
          <div className="cmp-bottom-cell">
            <div className="cmp-bottom-num mono">05</div>
            <h3 className="h-3">Western-launch compliance, built in.</h3>
            <p className="muted">
              GPC honored end-to-end. Breach notification matrix across 4
              jurisdictions. US state privacy law disclosures across 20 states.
              WCAG 2.1 AA verified. 7-locale i18n. All at the Free tier.
              Competitors gate compliance to enterprise minimums.
            </p>
          </div>
          <div className="cmp-bottom-cell">
            <div className="cmp-bottom-num mono">06</div>
            <h3 className="h-3">Honest about everyone else.</h3>
            <p className="muted">
              A maintained feature matrix and a per-competitor card explaining
              when the other tool is the right pick. We tell you the truth —
              even when it's not flattering for us. The page you're reading is
              the proof.
            </p>
          </div>
        </div>
      </section>

      {/* Three-CTA bottom band */}
      <section className="container section-tight" id="signup">
        <div className="cta-band">
          <div>
            <SectionEyebrow><span style={{ color: "var(--accent-soft)" }}>● </span>Early access · Free during pilot</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 18 }}>Three ways to start.</h2>
            <p className="lede" style={{ marginTop: 12 }}>
              Install the widget yourself in 5 lines, talk to a QA engineer
              first, or compare further with one of the alternatives above —
              we'd rather you ship the right tool than the wrong one.
            </p>
            <div className="hero-cta" style={{ marginTop: 24 }}>
              <a href="docs.html#install" className="btn btn-primary btn-arrow">Install in 5 lines</a>
              <a href="mailto:hello@oncatch.app?subject=Talk%20to%20a%20QA%20engineer" className="btn btn-secondary">Talk to a QA engineer</a>
            </div>
          </div>
          <SignupForm />
        </div>
      </section>
    </main>

    <Footer />
  </div>
);

Object.assign(window, { ComparePage });