{% extends "base.html" %}

{% block content %}
  {# Section 1: Hero #}
  <div class="card shadow-sm mb-4">
    <div class="card-body py-5 px-4">
      <div class="text-uppercase text-muted small fw-semibold mb-2">Pearing</div>
      <h1 class="h2 mb-3">Discuss first. Decide clearly. Ship with context.</h1>
      <p class="text-muted mb-4" style="max-width: 48rem;">
        A self-hosted git platform where typed threads drive the work &mdash; not pull request comment streams.
        Proposals, reviews, decisions, and implementation records stay structured and linked to the code they produced.
        Built for developers and their agents.
      </p>
      <div class="d-flex flex-wrap gap-2">
        {% if current_user %}
          <a class="btn btn-primary" href="/profile/repos/new">Create a repo</a>
        {% else %}
          <a class="btn btn-primary" href="/signup">Create account</a>
        {% endif %}
        <a class="btn btn-outline-secondary" href="/docs">Read the docs</a>
      </div>
    </div>
  </div>

  {# Section 2: Three value prop cards #}
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <h2 class="h5 mb-2">Threads are the work</h2>
          <p class="text-muted mb-3">
            Every feature, bug, or investigation starts as a thread. Replies have kinds &mdash;
            proposal, review, decision, implementation &mdash; so the reasoning trail is structured, not a flat comment log.
            Branch proposals as siblings, review under the one you are critiquing, mark the decision when a direction is chosen.
            The thread tree is a readable record of how the work converged.
          </p>
          <a class="small" href="/docs/skills">Thread workflow docs &rarr;</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <h2 class="h5 mb-2">Built for humans and agents</h2>
          <p class="text-muted mb-3">
            <code>pearing-cli</code> and the full JSON API cover every surface &mdash;
            threads, replies, pulls, repos, teams. Agents use the same
            propose &rarr; review &rarr; decide &rarr; implement loop that humans do.
            No special integrations. Download the workflow skill, point your agent at a repo,
            and let it participate in the thread.
          </p>
          <div class="d-flex flex-wrap gap-3">
            <a class="small" href="/docs/cli">CLI docs &rarr;</a>
            <a class="small" href="/docs/api">API docs &rarr;</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <h2 class="h5 mb-2">Simple and self-hosted</h2>
          <p class="text-muted mb-3">
            One binary. Postgres. A git data directory.
            No plugins, no marketplace, no enterprise tier.
            Public and private repos, teams with role-based membership, forks,
            pulls with merge and fast-forward workflows. That is the whole platform.
          </p>
          {% if current_user %}
            <a class="small" href="/profile/repos/new">Create a repo &rarr;</a>
          {% else %}
            <a class="small" href="/signup">Get started &rarr;</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {# Section 3: How work happens #}
  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h5 mb-3">How work happens on pearing</h2>
      <div class="row g-4">
        <div class="col-12 col-lg-5">
          <ol class="mb-0">
            <li class="mb-2">Open a thread with the goal and constraints.</li>
            <li class="mb-2">Add proposal replies &mdash; one per approach, siblings for competing ideas.</li>
            <li class="mb-2">Add review replies under each proposal to challenge, refine, or approve.</li>
            <li class="mb-2">Post a decision reply when the direction is chosen.</li>
            <li class="mb-2">Add implementation replies linking commits and pulls as the work lands.</li>
            <li class="mb-0">Close the thread when done.</li>
          </ol>
        </div>
        <div class="col-12 col-lg-7">
          <div class="bg-light border rounded p-3">
            <pre class="mb-0"><code>pearing-cli create-thread teams/acme/api \
  --title="Add rate limiting to public endpoints" \
  --body="Protect public API from abuse without breaking existing clients."

pearing-cli create-reply teams/acme/api 12 \
  --kind=proposal \
  --body="Token bucket per IP with configurable burst."

pearing-cli create-reply teams/acme/api 12 \
  --kind=review --parent=1 \
  --body="Exempt all auth callers? Cap them higher instead."

pearing-cli create-reply teams/acme/api 12 \
  --kind=decision \
  --body="Token bucket. Auth callers get 10x burst, not exempt."

pearing-cli create-reply teams/acme/api 12 \
  --kind=implementation \
  --body="Rate limiting middleware landed." \
  --link=commit:a1b2c3d --link=pull:15</code></pre>
          </div>
        </div>
      </div>
      <div class="d-flex flex-wrap gap-2 mt-4">
        <a class="btn btn-sm btn-outline-secondary" href="/docs/skills">Skills docs</a>
        <a class="btn btn-sm btn-outline-secondary" href="/docs/cli">CLI docs</a>
        <a class="btn btn-sm btn-outline-secondary" href="/docs/api">API docs</a>
        <a class="btn btn-sm btn-primary" href="/docs/skills/pearing-workflow-skill.md">Download SKILL.md</a>
      </div>
    </div>
  </div>

  {# Section 4: CTA footer #}
  <div class="card shadow-sm">
    <div class="card-body text-center py-4">
      <p class="text-muted mb-3">Keep the reasoning with the code. Self-hosted and open source.</p>
      <div class="d-flex flex-wrap justify-content-center gap-2">
        {% if current_user %}
          <a class="btn btn-primary" href="/profile/repos/new">Create a repo</a>
        {% else %}
          <a class="btn btn-primary" href="/signup">Create account</a>
          <a class="btn btn-primary" href="/signin">Sign in</a>
        {% endif %}
        <a class="btn btn-outline-secondary" href="/docs">Read the docs</a>
      </div>
    </div>
  </div>
{% endblock %}