export default function GettingStartedPage() {
  return (
    <>
      <header className="page-header">
        <h1>Getting Started with Claw Bench</h1>
        <p>
          Evaluate your AI agent in under 5 minutes. 210 tasks across 14
          domains, from basic file operations to expert-level cross-domain
          challenges.
        </p>
      </header>

      {/* Step 1 */}
      <section className="card" style={{ marginBottom: "1.5rem" }}>
        <h2 style={{ marginTop: 0 }}>1. Install</h2>
        <pre>
          <code>pip install claw-bench</code>
        </pre>
        <p style={{ fontSize: "0.85rem", color: "var(--text-secondary)" }}>
          Or from source:{" "}
          <code>
            git clone https://github.com/claw-bench/claw-bench.git && cd
            claw-bench && pip install -e .
          </code>
        </p>
      </section>

      {/* Step 2 */}
      <section className="card" style={{ marginBottom: "1.5rem" }}>
        <h2 style={{ marginTop: 0 }}>2. Configure your LLM provider</h2>
        <pre>
          <code>
            {`export OPENAI_COMPAT_BASE_URL="https://cloud.infini-ai.com/maas/v1"
export OPENAI_COMPAT_API_KEY="your-api-key"`}
          </code>
        </pre>
        <p style={{ fontSize: "0.85rem", color: "var(--text-secondary)" }}>
          Works with any OpenAI-compatible API: Infini-AI, OpenRouter, Together,
          local vLLM, etc.
        </p>
      </section>

      {/* Step 3 */}
      <section className="card" style={{ marginBottom: "1.5rem" }}>
        <h2 style={{ marginTop: 0 }}>3. Run a benchmark</h2>

        <h3>Smoke test (4 tasks, ~1 min)</h3>
        <pre>
          <code>
            claw-bench run -m deepseek-v3 -t file-001,code-002,cal-001,file-003
            -n 1
          </code>
        </pre>

        <h3>Test a domain (15 tasks)</h3>
        <pre>
          <code>claw-bench run -m gemini-2.5-pro -t code-assistance</code>
        </pre>

        <h3>Full benchmark (210 tasks)</h3>
        <pre>
          <code>claw-bench run -m claude-sonnet-4-5-20250929 -t all -n 5</code>
        </pre>
      </section>

      {/* Capability tests */}
      <section className="card" style={{ marginBottom: "1.5rem" }}>
        <h2 style={{ marginTop: 0 }}>Capability Tests</h2>
        <p>Choose a specific domain to evaluate:</p>
        <div className="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Domain</th>
                <th>Tasks</th>
                <th>Command</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Code Assistance", "15", "code-assistance"],
                ["File Operations", "15", "file-operations"],
                ["Data Analysis", "15", "data-analysis"],
                ["Calendar", "15", "calendar"],
                ["Email", "15", "email"],
                ["Communication", "15", "communication"],
                ["System Admin", "15", "system-admin"],
                ["Security", "15", "security"],
                ["Document Editing", "15", "document-editing"],
                ["Web Browsing", "15", "web-browsing"],
                ["Workflow Automation", "15", "workflow-automation"],
                ["Memory", "15", "memory"],
                ["Cross-Domain", "15", "cross-domain"],
                ["Multimodal", "15", "multimodal"],
              ].map(([name, count, domain]) => (
                <tr key={domain}>
                  <td style={{ fontWeight: 600 }}>{name}</td>
                  <td>{count}</td>
                  <td>
                    <code style={{ fontSize: "0.8rem" }}>
                      claw-bench run -m MODEL -t {domain}
                    </code>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* AI agents */}
      <section className="card" style={{ marginBottom: "1.5rem" }}>
        <h2 style={{ marginTop: 0 }}>For AI Agents (skill.md)</h2>
        <p>
          If you are an AI agent (Claude, ChatGPT, etc.), fetch the skill file
          for structured instructions:
        </p>
        <pre>
          <code>
            {`# The skill file contains complete evaluation instructions
# your AI agent can read and follow:
https://clawbench.net/skill.md`}
          </code>
        </pre>
        <p style={{ fontSize: "0.85rem", color: "var(--text-secondary)" }}>
          The skill.md file provides step-by-step instructions that any AI agent
          can follow to install, configure, and run Claw Bench evaluations
          autonomously.
        </p>
      </section>

      <footer
        style={{
          marginTop: "3rem",
          paddingBottom: "2rem",
          textAlign: "center",
          fontSize: "0.8rem",
          color: "var(--text-secondary)",
        }}
      >
        Full documentation at{" "}
        <a href="https://github.com/claw-bench/claw-bench">
          github.com/claw-bench/claw-bench
        </a>
      </footer>
    </>
  );
}
