// OnCatch home page renderer.
// Positioning locked: "Built by QA, for QA" — OnPath Testing (founded 2009)
// is the credibility marker, not an upsell. Surface it as part of every value claim.
// Source of truth: docs/positioning-brief.md + docs/future-state-product-spec.md
//
// Hero rewrite 2026-05-24 (Wave 1, in-flight per operator direction):
// - Short copy (no paragraph wall on first paint)
// - Animated bug-catching stage on the right (HeroBugCatcher)
// - Two-column hero-split layout (replaces the centered-editorial wall of text)

// ============= ANIMATED HERO STAGE =============
// Inline SVG. Six "bug" markers (console-error glyphs) animate from the edges
// toward the central widget FAB and fade out as they're "caught." Pulse ring
// around the FAB. Paper-grid background. Respects prefers-reduced-motion.
const HeroBugCatcher = () => {
  const bugs = [
    { id: 1, char: "×", x: 60, y: 80 },
    { id: 2, char: "?", x: 400, y: 100 },
    { id: 3, char: "!", x: 80, y: 380 },
    { id: 4, char: "⚠", x: 410, y: 360 },
    { id: 5, char: "⚡", x: 40, y: 240 },
    { id: 6, char: "‼", x: 440, y: 220 },
  ];
  return (
    <svg viewBox="0 0 480 480" className="hero-stage-svg" role="presentation" aria-hidden="true">
      <defs>
        <pattern id="hero-grid-pat" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M40 0 L0 0 0 40" fill="none" stroke="#D9D2C2" strokeWidth="0.5" />
        </pattern>
        <filter id="bug-shadow" x="-50%" y="-50%" width="200%" height="200%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" floodColor="#1B1A17" floodOpacity="0.12" />
        </filter>
      </defs>
      <rect width="480" height="480" fill="url(#hero-grid-pat)" opacity="0.55" />
      {/* Bug markers — each has a unique CSS class for its catch animation */}
      {bugs.map((b) => (
        <g key={b.id} className={`hero-bug hero-bug-${b.id}`}>
          <circle cx={b.x} cy={b.y} r="20" fill="#FAF7F2" stroke="#C2410C" strokeWidth="1.5" />
          <text
            x={b.x} y={b.y + 6}
            textAnchor="middle"
            fontSize="18"
            fontWeight="700"
            fill="#C2410C"
            fontFamily="'JetBrains Mono', ui-monospace, monospace"
          >{b.char}</text>
        </g>
      ))}
      {/* Pulse rings around the widget FAB */}
      <g transform="translate(240, 240)" className="hero-fab">
        <circle r="60" fill="#FBE5D6" className="hero-fab-pulse hero-fab-pulse-1" />
        <circle r="60" fill="#FBE5D6" className="hero-fab-pulse hero-fab-pulse-2" />
        <circle r="44" fill="#1B1A17" filter="url(#bug-shadow)" />
        <text y="14" textAnchor="middle" fontSize="42" fontWeight="700"
              fill="#C2410C" fontFamily="'JetBrains Mono', ui-monospace, monospace">!</text>
      </g>
      {/* Mono caption */}
      <text x="240" y="442" textAnchor="middle" fontSize="11" letterSpacing="2.5"
            fill="#6B6357" fontFamily="'JetBrains Mono', ui-monospace, monospace">
        CATCH · TRIAGE · FORWARD
      </text>
    </svg>
  );
};

// ============= HOME (HomeB) =============
const HomeB = () => (
  <div className="page" data-variant="B">
    <Header active="home" />
    <main id="main-content">
      <section className="container hero-split">
        <div className="hero-copy">
          <SectionEyebrow>Built by QA, for QA · An OnPath Testing product · Since 2009</SectionEyebrow>
          <h1 className="h-display">
            The bug-capture widget your <em>QA team</em> can trust.
          </h1>
          <p className="lede">
            Built by the QA team you'd hire. 17 years of QA, one embed snippet.
          </p>
          <div className="hero-cta">
            <a href="docs.html#install" className="btn btn-primary btn-arrow">Install in 5 lines</a>
            <a href="admin.html" className="btn btn-secondary">See what we capture</a>
          </div>
        </div>
        <div className="hero-stage-bugs">
          <HeroBugCatcher />
        </div>
      </section>

      <SharedSections />
    </main>
    <Footer />
  </div>
);

// All non-hero sections shared with the home page.
const SharedSections = () => (
  <>
    <section className="container section-tight" data-section="logos">
      <div className="eyebrow" style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="dot" />Awards · OnPath Testing · Founded 2009 · Boulder, CO
      </div>
      <LogoRow />
    </section>

    <section className="container section" data-section="how">
      <div className="section-head">
        <div>
          <SectionEyebrow>How it works</SectionEyebrow>
          <h2 className="h-1" style={{ marginTop: 16 }}>From "a bug in production" to "forensically usable evidence in your tracker."</h2>
        </div>
        <p className="lede">
          Three steps: a user files a defect report through the widget, your QA
          team triages from one view, and the report forwards to the tracker
          you already work in — Jira, Linear, GitHub, Slack, or your own
          webhook. The full loop runs in seconds, not days.
        </p>
      </div>
      <FlowDiagram />
    </section>

    <section className="container section" data-section="rtb">
      <div className="section-head">
        <div>
          <SectionEyebrow>Why OnCatch</SectionEyebrow>
          <h2 className="h-1" style={{ marginTop: 16 }}>Forensic capture. QA-grade evidence. Tested under hostile conditions.</h2>
        </div>
        <p className="lede">
          Four claims. Each one backed by something you can audit — a public
          test matrix, a 17-year QA history, or a documented compliance posture.
        </p>
      </div>
      <ReasonsToBelieve />
    </section>

    <section className="section section-divider" data-section="why">
      <div className="container">
        <div className="section-head">
          <div>
            <SectionEyebrow>How OnCatch compares</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Marker.io serves designers. Userback serves "everyone." OnCatch is built for QA.</h2>
          </div>
          <p className="lede">
            We respect what Marker.io and Userback ship. They're the category
            benchmarks for their audiences. OnCatch is the right pick if you're
            a QA lead, a head-of-QA, an engineering manager who treats QA as a
            discipline, or a technical founder buying for your QA team. If
            you're none of those, Marker.io or Userback will probably serve
            you better.
          </p>
        </div>
        <VsTable />
      </div>
    </section>

    <section className="container section" data-section="services">
      <ServicesUpsell />
    </section>

    <section className="section section-divider" id="integrations" data-section="integrations">
      <div className="container">
        <div className="section-head">
          <div>
            <SectionEyebrow>Integrations</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Forwards to the trackers your QA workflow already runs on.</h2>
          </div>
          <p className="lede">
            Two-way sync with Jira, Linear, and GitHub at Team $49. MCP server
            so Claude Code, Cursor, and Windsurf read your queue directly at
            Solo $19. Zapier for everything else. Webhook v1 is additive-only
            forever — CI blocks breaking changes.
          </p>
        </div>
        <Integrations />
      </div>
    </section>

    <section className="container section" id="trust" data-section="trust">
      <div className="section-head">
        <div>
          <SectionEyebrow>Trust &amp; security</SectionEyebrow>
          <h2 className="h-1" style={{ marginTop: 16 }}>Engineered to survive your worst-case production environment.</h2>
        </div>
        <p className="lede">
          Closed shadow DOM. Workspace-isolated everything with row-level
          security. PII redacted client-side before the report leaves the
          page. Webhook SSRF defense. The defaults a QA engineer would set
          themselves. See the full compliance posture at{" "}
          <a href="security.html" style={{ color: "var(--accent)", fontWeight: 600 }}>/security</a>.
        </p>
      </div>
      <Trust />
    </section>

    <section className="container section" data-section="install">
      <div className="section-head">
        <div>
          <SectionEyebrow>Install</SectionEyebrow>
          <h2 className="h-1" style={{ marginTop: 16 }}>Install in 5 lines. That's the integration.</h2>
        </div>
        <p className="lede">
          One script tag on any page. Tested under WebGL, strict CSP, service
          workers, RTL, large DOM, streaming AI, WordPress plugin chaos, and
          cross-origin iframes. Mounts in a closed shadow DOM. Leaves no
          globals on your page.
        </p>
      </div>
      <EmbedSnippet />
      <p className="muted" style={{ fontSize: 14, marginTop: 16, maxWidth: "60ch" }}>
        The widget loads asynchronously and is entirely separate from your
        application's DOM. Zero impact on your application.
      </p>
    </section>

    <section className="section section-divider" data-section="proof">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div>
            <SectionEyebrow>What's already in flight</SectionEyebrow>
            <h2 className="h-1" style={{ marginTop: 16 }}>Dated work, not aspirational marketing.</h2>
          </div>
          <p className="lede">
            Four surfaces. Each one names what's shipped today and what's
            honestly on the roadmap. We don't claim what we can't substantiate.
          </p>
        </div>
        <RoadmapTeaser />
      </div>
    </section>

    <section className="container section" data-section="faq">
      <div className="section-head">
        <div>
          <SectionEyebrow>FAQ</SectionEyebrow>
          <h2 className="h-1" style={{ marginTop: 16 }}>Questions QA leads ask.</h2>
        </div>
        <p className="lede">
          Don't see yours? Email{" "}
          <a href="mailto:hello@oncatch.app">hello@oncatch.app</a> — a QA
          engineer at OnPath will answer.
        </p>
      </div>
      <FAQ />
    </section>

    <section className="container section" id="signup" data-section="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 }}>Drop the widget. Start receiving forensically usable defect reports.</h2>
          <p className="lede" style={{ marginTop: 12 }}>
            Three ways to start. Install the widget yourself, talk to a QA
            engineer first, or get a workspace via email.
          </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>
  </>
);

Object.assign(window, { HomeB, SharedSections });