{% extends "docs/base.html" %}

{% block docs_content %}
  <div class="mb-4">
    <p class="text-uppercase text-primary fw-semibold small mb-2">Documentation</p>
    <h1 class="display-6 fw-semibold mb-2">Learn the workflow, then choose an interface</h1>
    <p class="lead text-muted mb-0">
      Guides explain how Pearing's pieces work together. Reference pages document the exact
      API, CLI, MCP, skill, and agent-orchestration surfaces.
    </p>
  </div>

  <div class="card border-primary shadow-sm mb-4">
    <div class="card-body p-4">
      <div class="row align-items-center g-4">
        <div class="col-12 col-xl-8">
          <p class="text-uppercase text-primary fw-semibold small mb-2">Start with Guides</p>
          <h2 class="h3 mb-2">Build a shared mental model before reaching for commands</h2>
          <p class="mb-0">
            See how teams, repositories, threads, Git, hosted skills, timers, events, locks,
            and external agents form one durable workflow.
          </p>
        </div>
        <div class="col-12 col-xl-4 d-flex flex-wrap justify-content-xl-end gap-2">
          <a class="btn btn-primary" href="/docs/guides">Explore Guides</a>
          <a class="btn btn-outline-primary" href="/docs/guides/feature-delivery">Deliver a feature</a>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-5">
    {% for guide in guide_pages %}
      {% if guide.section == "start" %}
        <div class="col-12 col-md-6">
          <a class="card h-100 shadow-sm text-decoration-none text-body" href="/docs/guides/{{ guide.slug }}">
            <div class="card-body">
              <h2 class="h5 mb-2">{{ guide.title }}</h2>
              <p class="text-muted mb-0">{{ guide.summary }}</p>
            </div>
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
    <div>
      <p class="text-uppercase text-muted fw-semibold small mb-1">Reference library</p>
      <h2 class="h3 mb-0">Look up an exact surface</h2>
    </div>
    <p class="text-muted mb-0">Existing reference URLs and behavior remain stable.</p>
  </div>

  <div class="row g-3">
    <div class="col-12 col-md-6 col-xl-4">
      <a class="card h-100 text-decoration-none text-body" href="/docs/api">
        <div class="card-body">
          <h3 class="h5">API</h3>
          <p class="text-muted mb-0">HTTP routes, payloads, responses, permissions, and errors.</p>
        </div>
      </a>
    </div>
    <div class="col-12 col-md-6 col-xl-4">
      <a class="card h-100 text-decoration-none text-body" href="/docs/cli">
        <div class="card-body">
          <h3 class="h5">CLI</h3>
          <p class="text-muted mb-0">Runnable commands for local operators and shell automation.</p>
        </div>
      </a>
    </div>
    <div class="col-12 col-md-6 col-xl-4">
      <a class="card h-100 text-decoration-none text-body" href="/docs/mcp">
        <div class="card-body">
          <h3 class="h5">MCP</h3>
          <p class="text-muted mb-0">Typed tools for agents that need bounded platform operations.</p>
        </div>
      </a>
    </div>
    <div class="col-12 col-md-6 col-xl-4">
      <a class="card h-100 text-decoration-none text-body" href="/docs/skills">
        <div class="card-body">
          <h3 class="h5">Skills</h3>
          <p class="text-muted mb-0">Reusable hosted instructions and the Pearing workflow skill.</p>
        </div>
      </a>
    </div>
    <div class="col-12 col-md-6 col-xl-4">
      <a class="card h-100 text-decoration-none text-body" href="/docs/work">
        <div class="card-body">
          <h3 class="h5">Work</h3>
          <p class="text-muted mb-0">Configure and operate <code>pearing-work</code> agent processes.</p>
        </div>
      </a>
    </div>
  </div>
{% endblock %}