{% load i18n %}
{% load static %}
<!-- ══ MON AGRO ══ -->
<section class="section s-monagro" id="monagro">
  <div class="section-inner">
    <div class="two-col flip">
      <div class="reveal">
        <span class="section-tag tag-accent">
          <span class="material-icons-round" style="font-size:13px;">agriculture</span>
          {% trans "MON AGRO · INTERVENTION TERRAIN" %}
        </span>
        <h2 class="section-title">{% blocktrans %}Transformez les recommandations<br>en interventions terrain.{% endblocktrans %}</h2>
        <p class="section-body">{% trans "Mon Agro by JooL connecte les diagnostics KIRiQ Ai à un réseau d'agronomes et techniciens pour accompagner les producteurs, exécuter les interventions et assurer le suivi des parcelles avec précision." %}</p>
        <div class="uc-stack">
          <div class="uc-row">
            <span class="uc-num">01</span>
            <div class="uc-body">
              <div class="uc-title">{% trans "Interventions ciblées par l'IA" %}</div>
              <div class="uc-desc">{% blocktrans %}<strong>Déployez</strong> les bonnes actions au bon endroit grâce aux alertes et niveaux de priorité générés par KIRiQ Ai.{% endblocktrans %}</div>
            </div>
          </div>
          <div class="uc-row">
            <span class="uc-num">02</span>
            <div class="uc-body">
              <div class="uc-title">{% trans "Coordination des équipes terrain" %}</div>
              <div class="uc-desc">{% blocktrans %}<strong>Assignez</strong> les missions, <strong>suivez</strong> les interventions et <strong>pilotez</strong> vos opérations depuis une vision centralisée.{% endblocktrans %}</div>
            </div>
          </div>
          <div class="uc-row">
            <span class="uc-num">03</span>
            <div class="uc-body">
              <div class="uc-title">{% trans "Suivi & reporting opérationnel" %}</div>
              <div class="uc-desc">{% blocktrans %}Les données terrain remontent automatiquement pour <strong>mesurer</strong> les impacts et <strong>piloter</strong> vos opérations en continu.{% endblocktrans %}</div>
            </div>
          </div>
        </div>
        <div class="btn-row">
          <a href="{% url 'core:home' %}#contact" class="btn-primary">
            <span class="material-icons-round">east</span>
            {% trans "Découvrir Mon Agro" %}
          </a>
          <a href="{% url 'core:monagro' %}" class="btn-outline-dark">{% trans "En savoir plus" %}</a>
        </div>
      </div>

      <!-- Visuel missions -->
      <div class="reveal">
        <div class="monagro-visual">
          <div class="ma-mission">
            <div class="ma-mission-icon" style="background:rgba(231,111,81,.12);">
              <span class="material-icons-round" style="color:#e55c3a;">warning_amber</span>
            </div>
            <div class="ma-mission-info">
              <div class="ma-mission-name">{% trans "Bloc Hévéa · Zone Sud" %}</div>
              <div class="ma-mission-sub">{% trans "Stress hydrique · Agronome assigné" %}</div>
            </div>
            <span class="ma-badge" style="background:rgba(231,111,81,.1);color:#e55c3a;">{% trans "Urgent" %}</span>
          </div>

          <div class="ma-mission">
            <div class="ma-mission-icon" style="background:rgba(96,165,250,.12);">
              <span class="material-icons-round" style="color:#3b82f6;">flight</span>
            </div>
            <div class="ma-mission-info">
              <div class="ma-mission-name">{% trans "Pulvérisation drone · Ananas" %}</div>
              <div class="ma-mission-sub">{% trans "18 ha · Mission en cours" %}</div>
            </div>
            <span class="ma-badge" style="background:rgba(96,165,250,.1);color:#3b82f6;">{% trans "En cours" %}</span>
          </div>

          <div class="ma-mission">
            <div class="ma-mission-icon" style="background:rgba(25,112,97,.1);">
              <span class="material-icons-round" style="color:var(--teal);">check_circle</span>
            </div>
            <div class="ma-mission-info">
              <div class="ma-mission-name">{% trans "Traitement foliaire · Adjoua K." %}</div>
              <div class="ma-mission-sub">{% trans "4.2 ha traités · Rapport soumis" %}</div>
            </div>
            <span class="ma-badge" style="background:rgba(25,112,97,.1);color:var(--teal);">{% trans "Terminé" %}</span>
          </div>

          <div class="ma-summary">
            <div class="ma-kpi">
              <div class="ma-kpi-val">250</div>
              <div class="ma-kpi-label">{% trans "Agronomes actifs" %}</div>
            </div>
            <div class="ma-sep"></div>
            <div class="ma-kpi">
              <div class="ma-kpi-val">42</div>
              <div class="ma-kpi-label">{% trans "Missions / mois" %}</div>
            </div>
            <div class="ma-sep"></div>
            <div class="ma-kpi">
              <div class="ma-kpi-val">95%</div>
              <div class="ma-kpi-label">{% trans "Exécution" %}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>