{% load i18n %}
  <!-- ══ JOOL ID ══ -->
  <section class="section s-id" id="joolid">
    <div class="section-inner">
      <div class="two-col">
        <div class="reveal">
          <span class="section-tag tag-light">
            <span class="material-icons-round" style="font-size:13px;">badge</span>
            {% trans "JOOL ID · IDENTITÉ AGRICOLE" %}
          </span>
          <h2 class="section-title">{% blocktrans %}Donnez une identité claire à <br><em>chaque producteur <br> et chaque parcelle.</em>{% endblocktrans %}</h2>
          <p class="section-body">{% trans "JooL ID structure les données agricoles essentielles — producteurs, parcelles, cultures, surfaces, coopératives et statuts de vérification — pour créer une base fiable, traçable et exploitable à grande échelle." %}</p>
          <div class="uc-stack">
            <div class="uc-row">
              <span class="uc-num">01</span>
              <div class="uc-body">
                <div class="uc-title">{% trans "Identification des producteurs" %}</div>
                <div class="uc-desc">{% trans "Centralisez les profils producteurs avec leurs informations clés, statuts de vérification et rattachements aux organisations agricoles." %}</div>
              </div>
            </div>
            <div class="uc-row">
              <span class="uc-num">02</span>
              <div class="uc-body">
                <div class="uc-title">{% trans "Cartographie des exploitations" %}</div>
                <div class="uc-desc">{% trans "Associez chaque producteur à ses parcelles, cultures, surfaces et données géographiques pour obtenir une vision claire du terrain." %}</div>
              </div>
            </div>
            <div class="uc-row">
              <span class="uc-num">03</span>
              <div class="uc-body">
                <div class="uc-title">{% trans "Gestion des programmes agricoles" %}</div>
                <div class="uc-desc">{% trans "Suivez les coopératives, certifications, subventions, audits et projets agricoles depuis une base structurée et vérifiable." %}</div>
              </div>
            </div>
          </div>
          <div class="btn-row">
            <a href="https://jool-id.com/" class="btn-primary" target="_blank">
              <span class="material-icons-round">east</span>
              {% trans "Structurer ma base agricole" %}
            </a>
            <a href="{% url 'core:joolid' %}" class="btn-outline-dark">{% trans "Découvrir JooL ID" %}</a>
          </div>
        </div>
        <div class="reveal">
          <div class="id-cards">
            <div class="id-card">
              <div class="id-avatar" style="background:#e0f2f0; font-size:1.4rem;">👨🏾‍🌾</div>
              <div class="id-info">
                <div class="id-name">Kouamé Assi</div>
                <div class="id-meta">{% trans "Palmier · 4.2 ha · Coopérative Cowabo" %}</div>
              </div>
              <span class="id-badge badge-verified">{% trans "Vérifié" %}</span>
            </div>
            <div class="id-card">
              <div class="id-avatar" style="background:#fff3cd; font-size:1.4rem;">👩🏾‍🌾</div>
              <div class="id-info">
                <div class="id-name">Adjoua Koffi</div>
                <div class="id-meta">{% trans "Hévéa · 7.8 ha · Coopérative Sud" %}</div>
              </div>
              <span class="id-badge badge-verified">{% trans "Vérifié" %}</span>
            </div>
            <div class="id-card">
              <div class="id-avatar" style="background:#e8f4fd; font-size:1.4rem;">👨🏿‍🌾</div>
              <div class="id-info">
                <div class="id-name">N'Guessan Yao</div>
                <div class="id-meta">{% trans "Cacao · 2.6 ha · Coopérative Nord" %}</div>
              </div>
              <span class="id-badge badge-pending">{% trans "En attente" %}</span>
            </div>
            <div class="id-card">
              <div class="id-avatar" style="background:#f0e8fd; font-size:1.4rem;">👩🏾‍🌾</div>
              <div class="id-info">
                <div class="id-name">Fatou Diallo</div>
                <div class="id-meta">{% trans "Palmier · 5.1 ha · Coopérative Ouest" %}</div>
              </div>
              <span class="id-badge badge-verified">{% trans "Vérifié" %}</span>
            </div>
            <!-- summary card -->
            <div style="background:var(--teal);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;">
              <span class="material-icons-round" style="color:white;font-size:28px;">people</span>
              <div>
                <div style="font-size:1.6rem;font-weight:900;font-family:var(--display);color:white;letter-spacing:-.04em;">300 000</div>
                <div style="font-size:13px;color:rgba(255,255,255,.65);">{% trans "Producteurs enregistrés" %}</div>
              </div>
              <div style="margin-left:auto;text-align:right;">
                <div style="font-size:1.2rem;font-weight:900;font-family:var(--display);color:white;">610 000</div>
                <div style="font-size:13px;color:rgba(255,255,255,.65);">{% trans "hectares cartographiés" %}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>