/* global React, Icon */
// QA Runner — Landing page

const Landing = () => (
  <div className="landing" data-theme="dark">
    {/* Nav */}
    <nav className="landing-nav">
      <div className="landing-nav__brand">
        <span className="logo">Q</span>
        <span>QA Runner</span>
      </div>
      <div className="landing-nav__links">
        <a>Product</a>
        <a>Features</a>
        <a>How it works</a>
        <a>Pricing</a>
        <a>Docs</a>
        <a>Changelog</a>
      </div>
      <div style={{flex:1}}/>
      <div className="landing-nav__cta">
        <button className="btn btn--ghost">Sign in</button>
        <button className="btn btn--primary">Start free</button>
      </div>
    </nav>

    {/* Hero */}
    <section className="hero">
      <div className="hero__grid"/>
      <div className="hero__glow"/>
      <div className="hero__inner">
        <div className="hero__pill">
          <span className="hero__pill-tag">NEW</span>
          <span>Native GitHub triggers + Slack alerts shipping today</span>
          <Icon name="arrow" size={11}/>
        </div>
        <h1 className="hero__h1">
          The QA execution board<br/>
          for <em>humans and AI agents</em>.
        </h1>
        <p className="hero__sub">
          Stop scripting tests in IDEs. Stop pasting prompts into ChatGPT. QA Runner is one universal board where API tests are written once and run by anyone — your QA team, an AI agent, GitHub on every push, or a nightly schedule.
        </p>
        <div className="hero__cta">
          <button className="btn btn--primary btn--lg">Start free <Icon name="arrow" size={12}/></button>
          <button className="btn btn--lg"><Icon name="play" size={11}/>Watch 90s demo</button>
        </div>
        <div className="hero__hint">
          <span><Icon name="check" size={11} style={{color:'var(--pass)'}}/>No credit card</span>
          <span><Icon name="check" size={11} style={{color:'var(--pass)'}}/>Free tier · 100 runs/mo</span>
          <span><Icon name="check" size={11} style={{color:'var(--pass)'}}/>OpenAPI &amp; Postman import</span>
        </div>
      </div>

      {/* Hero shot — embed the actual main board */}
      <div className="hero__shot">
        {window.MainBoard && <window.MainBoard/>}
      </div>
    </section>

    {/* Logos */}
    <section className="logos">
      <div className="logos__label">Trusted by teams shipping APIs at speed</div>
      <div className="logos__row">
        <span>linear</span>
        <span>VERCEL</span>
        <span>Notion</span>
        <span>GROQ</span>
        <span>retool</span>
        <span>STRIPE</span>
        <span>Loom</span>
      </div>
    </section>

    {/* Problem / Solution */}
    <section className="section">
      <div className="section__eyebrow">The QA gap</div>
      <h2 className="section__title">QA tooling was built for one user. Now there are two.</h2>
      <p className="section__sub">Postman is for humans clicking buttons. Pytest is for engineers reading stack traces. Neither was designed for an AI agent that wants to read context, generate a script, run it, and write back the result. QA Runner is.</p>

      <div className="prob">
        <div className="prob__col prob__col--bad">
          <div className="prob__h"><Icon name="x" size={13}/>Today, without QA Runner</div>
          <div className="prob__list">
            <div className="prob__item"><span className="prob__item-icon"><Icon name="x" size={11}/></span><span><b>Tests live in 5 places.</b> Postman collections, pytest files, Jira tickets, Notion pages, screenshots in Slack.</span></div>
            <div className="prob__item"><span className="prob__item-icon"><Icon name="x" size={11}/></span><span><b>AI agents can't run them.</b> No machine-readable definition. No tool interface. No way to track results.</span></div>
            <div className="prob__item"><span className="prob__item-icon"><Icon name="x" size={11}/></span><span><b>Failures get lost.</b> A nightly run fails at 3 AM. You find out at standup.</span></div>
            <div className="prob__item"><span className="prob__item-icon"><Icon name="x" size={11}/></span><span><b>Onboarding takes weeks.</b> New QAs spend their first month learning where the tests are.</span></div>
          </div>
        </div>
        <div className="prob__col prob__col--good">
          <div className="prob__h"><Icon name="check" size={13}/>With QA Runner</div>
          <div className="prob__list">
            <div className="prob__item"><span className="prob__item-icon"><Icon name="check" size={11}/></span><span><b>One board.</b> Feature → Suite → Test Case. Same source of truth for humans and agents.</span></div>
            <div className="prob__item"><span className="prob__item-icon"><Icon name="check" size={11}/></span><span><b>Agents have an MCP server.</b> Claude can read TCs, run them, and write back results — no glue code.</span></div>
            <div className="prob__item"><span className="prob__item-icon"><Icon name="check" size={11}/></span><span><b>Slack alerts.</b> A run fails — your channel knows in 2 seconds with the failing assertion inline.</span></div>
            <div className="prob__item"><span className="prob__item-icon"><Icon name="check" size={11}/></span><span><b>Day-1 productive.</b> Open the board, see every test, run it. No setup, no IDE, no YAML.</span></div>
          </div>
        </div>
      </div>
    </section>

    {/* Bento features */}
    <section className="section">
      <div className="section__eyebrow">Built for the workflow</div>
      <h2 className="section__title">Everything a QA team and an AI agent both need.</h2>
      <p className="section__sub">Run tests by hand. Run them on every PR. Run them at 3 AM. Run them from a chat with Claude. Same TC, same result, one history.</p>

      <div className="bento">
        <div className="bento__cell">
          <div className="bento__icon"><Icon name="sparkles" size={16}/></div>
          <h3 className="bento__t">AI assistant, in context</h3>
          <p className="bento__s">Claude sees your TC, your fixtures, your environment, and your last 10 runs. Ask it to write Part 2, refine an assertion, or explain why TC-014 has been flaky for three days. It has tools, not vibes.</p>
          <div className="bento__viz">
            <span className="bento__viz-pill">claude-sonnet-4.5</span>
            <span className="bento__viz-pill">get_tc_context</span>
            <span className="bento__viz-pill">execute_script</span>
            <span className="bento__viz-pill">report_result</span>
            <span className="bento__viz-pill">+8 tools</span>
          </div>
        </div>

        <div className="bento__cell">
          <div className="bento__icon"><Icon name="branch" size={16}/></div>
          <h3 className="bento__t">GitHub triggers</h3>
          <p className="bento__s">Run on push, PR, or schedule. Block merges on fail.</p>
        </div>

        <div className="bento__cell">
          <div className="bento__icon"><Icon name="send" size={16}/></div>
          <h3 className="bento__t">Slack &amp; Discord</h3>
          <p className="bento__s">Failures land in your channel with the failing TCs already inline.</p>
        </div>

        <div className="bento__cell">
          <div className="bento__icon"><Icon name="code" size={16}/></div>
          <h3 className="bento__t">Two-part scripts: human owns setup, AI owns logic.</h3>
          <p className="bento__s">Part 1 is yours — fixtures, dependencies, secrets. Part 2 is the AI's — the actual test logic, regenerable from a spec change. The boundary is enforced. AI never touches your auth.</p>
          <div className="bento__viz">
            <span className="bento__viz-pill"><Icon name="lock" size={9}/> Part 1 · human</span>
            <span className="bento__viz-pill" style={{color:'var(--accent)'}}><Icon name="sparkles" size={9}/> Part 2 · AI</span>
            <span className="bento__viz-pill">resettable</span>
            <span className="bento__viz-pill">diff-able</span>
          </div>
        </div>
      </div>
    </section>

    {/* How it works */}
    <section className="section">
      <div className="section__eyebrow">How it works</div>
      <h2 className="section__title">From OpenAPI to first green run in under 5 minutes.</h2>

      <div className="how">
        <div className="how__step">
          <div className="how__n">01</div>
          <h3 className="how__t">Import your spec</h3>
          <p className="how__s">Paste an OpenAPI URL or upload a Postman collection. We map every endpoint into the API Library.</p>
        </div>
        <div className="how__step">
          <div className="how__n">02</div>
          <h3 className="how__t">Pick a TC, write a sentence</h3>
          <p className="how__s">"Sell a gift with a 15% coupon attached." That's all the AI needs to draft a runnable Part 2 script.</p>
        </div>
        <div className="how__step">
          <div className="how__n">03</div>
          <h3 className="how__t">Run it — or let an agent</h3>
          <p className="how__s">Click Run. Or ask Claude. Or push to main and let GitHub trigger it. Same TC, same definition.</p>
        </div>
        <div className="how__step">
          <div className="how__n">04</div>
          <h3 className="how__t">See it everywhere</h3>
          <p className="how__s">PR check on GitHub. Failure in Slack. Full log in the agent terminal. History stays attributed: human or agent.</p>
        </div>
      </div>
    </section>

    {/* Code band */}
    <section className="codeband">
      <div className="codeband__inner">
        <div>
          <div className="section__eyebrow">For developers</div>
          <h2 className="section__title">A real script. Not a wrapped curl.</h2>
          <p className="section__sub">Every TC compiles to plain pytest. Run it on QA Runner's cloud, in CI, or on your laptop. No magic runtime, no proprietary DSL.</p>
          <div style={{display:'flex', gap:8}}>
            <button className="btn"><Icon name="download" size={11}/>Export as pytest</button>
            <button className="btn btn--ghost"><Icon name="book" size={11}/>SDK reference</button>
          </div>
        </div>
        <div className="codeband__demo">
          <div className="codeband__bar">
            <div className="terminal__dots"><span/><span/><span/></div>
            <span className="mono muted">scripts/TC-004.py</span>
            <div style={{flex:1}}/>
            <span className="chip mono" style={{fontSize:10}}>pytest 8.2</span>
          </div>
          <pre className="codeband__pre"><code>{`# Part 1 — human owns this
@pytest.fixture
def ctx():
    user = create_test_user()
    ensure_balance(user, min_amount=50000)
    ensure_gift_stock(gift_id="gift_42", qty=3)
    yield user

# Part 2 — AI generated · editable
def test_sell_with_bundled_discount(ctx):
    balance_before = get_balance(ctx)

    r = requests.post(BASE_URL + "/gifts/sell",
        json={"gift_id": "gift_42", "qty": 3,
              "coupon_code": "PROMO_FALL15"},
        headers={"Authorization": get_token()})

    assert r.status_code == 200
    body = r.json()
    assert body["applied_coupons"][0]["code"] == "PROMO_FALL15"
    assert get_balance(ctx) == balance_before - body["total"]`}</code></pre>
        </div>
      </div>
    </section>

    {/* Pricing */}
    <section className="section">
      <div className="section__eyebrow">Pricing</div>
      <h2 className="section__title">Start free. Scale when your runs do.</h2>
      <p className="section__sub">All plans include the full board, AI assistant, GitHub triggers, and Slack/Discord notifications. You only pay for the volume of runs.</p>

      <div className="pricing">
        <div className="price">
          <div className="price__t">Free</div>
          <div className="price__p">$0<span>/forever</span></div>
          <div className="price__s">For solo QAs and small teams trying things out.</div>
          <div className="price__list">
            <div><Icon name="check" size={12}/>100 runs / month</div>
            <div><Icon name="check" size={12}/>1 environment</div>
            <div><Icon name="check" size={12}/>1 GitHub repo</div>
            <div><Icon name="check" size={12}/>Community Discord support</div>
            <div><Icon name="check" size={12}/>BYO Anthropic API key</div>
          </div>
          <button className="btn btn--lg">Start free</button>
        </div>

        <div className="price price--feat">
          <div className="price__t">Team</div>
          <div className="price__p">$29<span>/seat / month</span></div>
          <div className="price__s">For QA teams running CI on every PR.</div>
          <div className="price__list">
            <div><Icon name="check" size={12}/>5,000 runs / month / seat</div>
            <div><Icon name="check" size={12}/>Unlimited environments &amp; repos</div>
            <div><Icon name="check" size={12}/>Hosted MCP server</div>
            <div><Icon name="check" size={12}/>AI runs included (sonnet 4.5)</div>
            <div><Icon name="check" size={12}/>Slack &amp; Discord notifications</div>
            <div><Icon name="check" size={12}/>Priority email support</div>
          </div>
          <button className="btn btn--primary btn--lg">Start 14-day trial</button>
        </div>

        <div className="price">
          <div className="price__t">Enterprise</div>
          <div className="price__p">Custom</div>
          <div className="price__s">For organizations with audit, SSO, and on-prem needs.</div>
          <div className="price__list">
            <div><Icon name="check" size={12}/>Unlimited runs</div>
            <div><Icon name="check" size={12}/>SSO (Okta, Azure AD)</div>
            <div><Icon name="check" size={12}/>SOC 2 + audit logs</div>
            <div><Icon name="check" size={12}/>Self-hosted runner option</div>
            <div><Icon name="check" size={12}/>Dedicated CSM</div>
          </div>
          <button className="btn btn--lg">Talk to sales</button>
        </div>
      </div>
    </section>

    {/* FAQ */}
    <section className="section" style={{paddingTop:60}}>
      <div className="section__eyebrow">FAQ</div>
      <h2 className="section__title">The questions every team asks.</h2>

      <div className="faq">
        {[
          { q: "Do I need to know Python?", a: "No. The AI writes Part 2 from a one-sentence description. You can run, edit, or refine without ever opening the script tab. But if you do know Python, you have full pytest underneath." , open: true},
          { q: "Where does the AI run? Is my code sent to Anthropic?", a: "On Free, you bring your own Anthropic API key — calls go directly from your browser to Anthropic. On Team and Enterprise, calls are proxied through our hosted MCP server, but only the TC context (description, schemas, last result) is sent. Your secrets and Part 1 fixtures are never sent to the model.", open: false },
          { q: "How does this compare to Postman + Newman?", a: "Postman models APIs, Newman runs collections. Neither has a notion of an AI agent as a runtime. QA Runner has both: collections you can import as TCs, and an MCP-based agent runtime. You can replace Postman or run them side by side.", open: false },
          { q: "Can I self-host?", a: "Yes, on Enterprise. The runner ships as a Docker image; you point your workspace at your own URL. The board UI remains hosted unless your contract says otherwise.", open: false },
          { q: "Does it block merges on GitHub?", a: "Yes — QA Runner registers as a GitHub Status Check. You enable branch protection in GitHub for the check name, and we'll block PRs whose triggered run fails.", open: false },
        ].map((f, i) => (
          <div key={i} className={"faq__item" + (f.open ? " faq__item--open" : "")}>
            <div className="faq__q">
              <span>{f.q}</span>
              <Icon name={f.open ? "chevronDown" : "chevronRight"} size={12}/>
            </div>
            {f.open && <div className="faq__a">{f.a}</div>}
          </div>
        ))}
      </div>
    </section>

    {/* Final CTA */}
    <section className="ctaband">
      <h2>Stop juggling tools.<br/>Run tests like it's 2026.</h2>
      <p>One board. Humans, agents, CI, schedules. Free for the first 100 runs each month.</p>
      <div className="hero__cta" style={{marginBottom:0}}>
        <button className="btn btn--primary btn--lg">Start free <Icon name="arrow" size={12}/></button>
        <button className="btn btn--lg"><Icon name="book" size={11}/>Read the docs</button>
      </div>
    </section>

    {/* Footer */}
    <footer className="foot">
      <div>
        <div className="landing-nav__brand"><span className="logo">Q</span>QA Runner</div>
        <div className="foot__brand">The QA execution board for humans and AI agents. Built by Tinh in Saigon.</div>
      </div>
      <div className="foot__col">
        <h4>Product</h4>
        <a>Main board</a><a>AI assistant</a><a>GitHub triggers</a><a>Notifications</a><a>API library</a>
      </div>
      <div className="foot__col">
        <h4>Resources</h4>
        <a>Docs</a><a>Changelog</a><a>SDK reference</a><a>MCP server</a><a>Status</a>
      </div>
      <div className="foot__col">
        <h4>Company</h4>
        <a>About</a><a>Blog</a><a>Careers</a><a>Contact</a>
      </div>
      <div className="foot__col">
        <h4>Legal</h4>
        <a>Privacy</a><a>Terms</a><a>Security</a><a>SOC 2</a>
      </div>
    </footer>
    <div className="foot__btm">
      <span>© 2026 QA Runner</span>
      <div style={{flex:1}}/>
      <span>Built for QA teams that ship.</span>
    </div>
  </div>
);

Object.assign(window, { Landing });