{% extends "base.html" %}

{% block content %}
  <section class="pearing-home-hero card border-0 shadow-sm overflow-hidden mb-5" aria-labelledby="pearing-home-hero-heading">
    <div class="card-body p-4 p-lg-5">
      <div class="row align-items-center g-5">
        <div class="col-12 col-lg-7">
          <div class="pearing-home-kicker text-uppercase small fw-semibold mb-3">
            Git collaboration with a working memory
          </div>
          <h1 class="display-5 fw-semibold mb-3" id="pearing-home-hero-heading">Discuss the work. Make the decision. Ship the code.</h1>
          <p class="pearing-home-hero-copy lead text-body-secondary mb-4">
            Pearing brings Git repositories, technical discussions, reviews, and pull requests into one workflow.
            Start with the problem, compare approaches, record the decision, and keep the implementation connected
            to the reasoning behind it.
          </p>
          <div class="pearing-home-actions d-flex flex-wrap gap-2">
            <a class="btn btn-primary" href="/signup">Create account</a>
            <a class="btn btn-outline-primary" href="/signin">Sign in</a>
            <a class="btn btn-outline-secondary" href="/docs">Read the docs</a>
          </div>
        </div>

        <div class="col-12 col-lg-5">
          <div class="pearing-home-thread border rounded-3 p-3 p-md-4">
            <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
              <div>
                <div class="text-uppercase text-body-secondary small fw-semibold">Thread #18</div>
                <div class="fw-semibold">Make uploads reliable</div>
              </div>
              <span class="badge text-bg-primary">In progress</span>
            </div>

            <div class="pearing-home-thread-list">
              <div class="pearing-home-thread-item">
                <span class="badge text-bg-info mb-2">Proposal</span>
                <p class="small mb-0">Upload directly to private object storage with a short-lived signed request.</p>
              </div>
              <div class="pearing-home-thread-item is-nested">
                <span class="badge text-bg-warning mb-2">Review</span>
                <p class="small mb-0">Keep object keys opaque and validate ownership before signing.</p>
              </div>
              <div class="pearing-home-thread-item">
                <span class="badge text-bg-primary mb-2">Decision</span>
                <p class="small mb-0">Use signed uploads with private storage and scoped download access.</p>
              </div>
              <div class="pearing-home-thread-item">
                <span class="badge text-bg-success mb-2">Implementation</span>
                <p class="small mb-0">Pull #42 is ready for review.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-5" aria-labelledby="pearing-home-workflow-heading">
    <div class="pearing-home-section-heading mb-4">
      <div class="text-uppercase text-body-secondary small fw-semibold mb-2">The workflow</div>
      <h2 class="h3 mb-2" id="pearing-home-workflow-heading">A development loop you can follow later.</h2>
      <p class="text-body-secondary mb-0">
        The problem, alternatives, decision, and resulting code stay together instead of being split across tools.
      </p>
    </div>

    <div class="row g-4">
      <div class="col-12 col-lg-4">
        <div class="pearing-home-step h-100">
          <span class="pearing-home-step-number" aria-hidden="true">01</span>
          <h3 class="h5 mt-3 mb-2">Start with the problem.</h3>
          <p class="text-body-secondary mb-0">
            A repository thread captures the goal, constraints, and open questions before code is written.
          </p>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="pearing-home-step h-100">
          <span class="pearing-home-step-number" aria-hidden="true">02</span>
          <h3 class="h5 mt-3 mb-2">Compare and decide.</h3>
          <p class="text-body-secondary mb-0">
            Typed, nested replies distinguish proposals, reviews, decisions, and implementation updates.
          </p>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="pearing-home-step h-100">
          <span class="pearing-home-step-number" aria-hidden="true">03</span>
          <h3 class="h5 mt-3 mb-2">Ship with context.</h3>
          <p class="text-body-secondary mb-0">
            Link commits and pulls back to the thread while approvals and branch protections control what lands.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="pearing-home-agents card border-0 shadow-sm" aria-labelledby="pearing-home-agents-heading">
    <div class="card-body p-4 p-lg-5">
      <div class="row align-items-center g-4">
        <div class="col-12 col-lg-7">
          <div class="text-uppercase text-body-secondary small fw-semibold mb-2">Agent workflows</div>
          <h2 class="h3 mb-3" id="pearing-home-agents-heading">Agents join the same workflow.</h2>
          <p class="text-body-secondary mb-0">
            Coding agents can respond to mentions, read repository rules, post proposals, open pulls, and request
            review through MCP or the CLI. They use the same threads, permissions, and branch protections as the
            rest of the team.
          </p>
        </div>
        <div class="col-12 col-lg-5">
          <div class="d-flex flex-wrap gap-2 mb-3">
            <a class="btn btn-sm btn-outline-primary" href="/docs/skills">Workflow guide</a>
            <a class="btn btn-sm btn-outline-primary" href="/docs/mcp">MCP docs</a>
            <a class="btn btn-sm btn-outline-primary" href="/docs/cli">CLI docs</a>
          </div>
          <p class="small text-body-secondary mb-0">
            Public and private Git repositories, teams, forks, and protected branches, backed by Postgres and
            storage you control.
          </p>
        </div>
      </div>
    </div>
  </section>
{% endblock %}