{% load i18n static %}
  <!-- ══ JOOL MONITOR ══ -->
  <section class="section s-monitor" id="monitor">
    <div class="section-inner">
      <div class="two-col flip">
        <div class="reveal">
          <span class="section-tag tag-white">
            <span class="material-icons-round" style="font-size:13px;">flight</span>
            {% trans "JOOL MONITOR · DRONE & HAUTE RÉSOLUTION" %}
          </span>
          <h2 class="section-title" style="color:var(--white);">{% blocktrans %}Voyez votre terrain <br> <em>en haute résolution.</em>{% endblocktrans %}</h2>
          <p class="section-body-light">{% trans "JooL Monitor transforme l'imagerie drone en lecture terrain exploitable pour compter, mesurer, cartographier et contrôler vos parcelles avec un niveau de détail prêt à l'action." %}</p>
          <div class="uc-stack">
            <div class="uc-row uc-row-dark">
              <span class="uc-num uc-num-light">01</span>
              <div class="uc-body">
                <div class="uc-title" style="color:var(--white);">{% trans "Cartographie avancée" %}</div>
                <div class="uc-desc-light">{% trans "Produisez des orthomosaïques, modèles 3D et délimitations précises pour visualiser vos surfaces avec un niveau de détail terrain." %}</div>
              </div>
            </div>
            <div class="uc-row uc-row-dark">
              <span class="uc-num uc-num-light">02</span>
              <div class="uc-body">
                <div class="uc-title" style="color:var(--white);">{% trans "Comptage & mesures intelligentes" %}</div>
                <div class="uc-desc-light">{% trans "Mesurez les superficies, distances et densités, comptez les arbres, identifiez les manquants et analysez la répartition sur chaque parcelle." %}</div>
              </div>
            </div>
            <div class="uc-row uc-row-dark">
              <span class="uc-num uc-num-light">03</span>
              <div class="uc-body">
                <div class="uc-title" style="color:var(--white);">{% trans "Contrôle visuel continu" %}</div>
                <div class="uc-desc-light">{% trans "Comparez l'évolution de vos parcelles dans le temps, suivez les écarts significatifs et documentez les changements qui comptent vraiment." %}</div>
              </div>
            </div>
          </div>
          <div class="btn-row">
            <a href="https://jool-monitor.com/" class="btn-primary" target="_blank">
              <span class="material-icons-round">east</span>
              {% trans "Planifier un vol" %}
            </a>
            <a href="{% url 'core:monitor' %}" class="btn-outline-light">{% trans "Découvrir JooL Monitor" %}</a>
          </div>
        </div>
        <div class="drone-svg-wrap reveal" style="padding:0;">
          <img src="{% static 'img/JooL Monitor.jpg' %}" alt="{% trans 'JooL Monitor — cartographie drone' %}" loading="lazy" decoding="async">
          <div class="chip-float" style="top:14px;right:16px;animation-delay:.3s;">
            <span class="material-icons-round">place</span>
            {% trans "Palmier bloc 4" %}
          </div>
          <div class="chip-float" style="bottom:18px;left:14px;animation-delay:2.2s;">
            <span class="material-icons-round">report_problem</span>
            {% trans "3 anomalies détectés" %}
          </div>
        </div>
      </div>
    </div>
  </section>