{% 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> en haute résolution.{% 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">{% blocktrans %}<strong>Produisez</strong> des orthomosaïques, modèles 3D et délimitations précises pour <strong>visualiser</strong> vos surfaces avec un niveau de détail terrain.{% endblocktrans %}</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">{% blocktrans %}<strong>Mesurez</strong> les superficies, distances et densités, <strong>comptez</strong> les arbres, <strong>identifiez</strong> les manquants et <strong>analysez</strong> la répartition sur chaque parcelle.{% endblocktrans %}</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">{% blocktrans %}<strong>Comparez</strong> l'évolution de vos parcelles dans le temps, <strong>suivez</strong> les écarts significatifs et <strong>documentez</strong> les changements qui comptent vraiment.{% endblocktrans %}</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 "Découvrir JooL Monitor" %}
            </a>
            <a href="{% url 'core:monitor' %}" class="btn-outline-light">{% trans "En savoir plus" %}</a>
          </div>
        </div>
        <div class="drone-svg-wrap reveal" style="padding:0;">
          <a href="https://www.youtube.com/watch?v=S9sE7H_01mI" target="_blank" rel="noopener"
             style="position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.25);text-decoration:none;">
            <img src="https://img.youtube.com/vi/S9sE7H_01mI/maxresdefault.jpg"
                 alt="JooL Monitor, Démonstration cartographie drone"
                 style="width:100%;height:100%;object-fit:cover;display:block;">
            <!-- Bouton play -->
            <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);transition:background .2s;">
              <div style="width:72px;height:72px;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3);">
                <span class="material-icons-round" style="font-size:36px;color:#e55c3a;margin-left:4px;">play_arrow</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </section>
