{% extends "base.html" %}
{% load static %}

{% block title %}Jool Monitor — Cartographie drone haute résolution | Jool International{% endblock %}
{% block title_plain %}Jool Monitor — Cartographie drone haute résolution | Jool International{% endblock %}

{% block meta_description %}Jool Monitor transforme l'imagerie drone en données terrain exploitables : orthomosaïques, comptage de plants, modèles 3D et contrôle visuel continu de vos parcelles agricoles en Afrique.{% endblock %}

{% block og_title %}Jool Monitor — Cartographie drone haute résolution pour vos parcelles{% endblock %}
{% block og_description %}Comptez, mesurez, cartographiez et contrôlez vos parcelles avec une précision nouvelle grâce à l'imagerie drone analysée par IA.{% endblock %}
{% block twitter_title %}Jool Monitor — Cartographie drone haute résolution pour vos parcelles{% endblock %}
{% block twitter_description %}Comptez, mesurez, cartographiez et contrôlez vos parcelles avec une précision nouvelle grâce à l'imagerie drone analysée par IA.{% endblock %}

{% block schema_org %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Jool Monitor",
  "applicationCategory": "AgricultureApplication",
  "operatingSystem": "Web",
  "url": "https://jool-int.com/monitor/",
  "description": "Solution de cartographie drone pour l'agriculture : orthomosaïques, comptage intelligent, modèles 3D et suivi visuel continu des exploitations agricoles.",
  "offers": { "@type": "Offer", "priceCurrency": "XOF" },
  "provider": {
    "@type": "Organization",
    "name": "Jool International",
    "url": "https://jool-int.com"
  }
}
</script>
{% endblock %}

{% block extra_css %}
<style>
  .product-hero-dark { background: var(--dark-bg); padding: 80px 64px 64px; }
  .product-hero-dark-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; }
  .product-hero-dark h1 { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -0.03em; color: var(--white); line-height: 1.05; margin-bottom: 20px; }
  .product-hero-dark h1 em { font-style: normal; color: var(--accent); }
  .product-hero-dark p { font-size: 17px; color: rgba(255,255,255,.65); line-height: 1.75; font-weight: 300; max-width: 480px; margin-bottom: 32px; }
  .product-eyebrow-light { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 5px 14px; border-radius: 100px; margin-bottom: 20px; }
  .product-eyebrow-light .material-icons-round { font-size: 14px; }
  .product-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(25,112,97,.12); color: var(--teal); padding: 5px 14px; border-radius: 100px; margin-bottom: 20px; }
  .product-eyebrow .material-icons-round { font-size: 14px; }
  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
  .feature-card { background: var(--gray-2); border-radius: 18px; padding: 28px; }
  .feature-card-icon { width: 48px; height: 48px; background: rgba(25,112,97,.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .feature-card-icon .material-icons-round { color: var(--teal); font-size: 24px; }
  .feature-card h3 { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--black); margin-bottom: 10px; }
  .feature-card p { font-size: 14px; color: #666; line-height: 1.6; font-weight: 300; }
  .product-features { padding: 80px 64px; background: var(--white); }
  .product-features-inner { max-width: 1200px; margin: 0 auto; }
  .product-how { padding: 80px 64px; background: var(--dark-bg); }
  .product-how-inner { max-width: 900px; margin: 0 auto; }
  .product-how h2 { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--white); letter-spacing: -0.03em; margin-bottom: 48px; text-align: center; }
  .steps { display: flex; flex-direction: column; }
  .step { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .step:last-child { border-bottom: none; }
  .step-num { font-family: var(--display); font-weight: 900; font-size: 2rem; color: var(--accent); line-height: 1; }
  .step-body h4 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--white); margin-bottom: 8px; }
  .step-body p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.65; font-weight: 300; }
  .product-cta { padding: 80px 64px; text-align: center; background: var(--teal-pale); }
  .product-cta h2 { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--black); letter-spacing: -0.03em; margin-bottom: 16px; }
  .product-cta p { font-size: 16px; color: #666; margin-bottom: 32px; font-weight: 300; }
  .btn-cta-lg { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 16px; padding: 16px 36px; border-radius: 100px; background: var(--teal); color: var(--white); transition: filter .15s, transform .12s; }
  .btn-cta-lg:hover { filter: brightness(1.1); transform: translateY(-2px); }
  .btn-back-product { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 32px; transition: color .15s; }
  .btn-back-product:hover { color: var(--accent); }
  .drone-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .drone-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; text-align: center; }
  .drone-stat-val { font-family: var(--display); font-weight: 900; font-size: 2.2rem; color: var(--accent); letter-spacing: -.04em; }
  .drone-stat-label { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 4px; }
  @media (max-width: 768px) { .product-hero-dark { padding: 48px 24px 40px; } .product-hero-dark-inner { grid-template-columns: 1fr; } .product-features, .product-how, .product-cta { padding: 56px 24px; } .features-grid, .drone-stat-row { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
<section class="product-hero-dark">
<div class="product-hero-dark-inner">
  <div class="reveal">
    <a href="{% url 'core:home' %}#monitor" class="btn-back-product">
      <span class="material-icons-round" style="font-size:16px;">arrow_back</span> Retour à l'accueil
    </a>
    <span class="section-tag tag-white" style="margin-bottom:20px;display:inline-flex;">
      <span class="material-icons-round" style="font-size:13px;">flight</span>
      Cartographie haute résolution
    </span>
    <h1>Voyez votre terrain avec <em>une précision</em> nouvelle.</h1>
    <p>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="btn-row" style="margin-top:32px;">
      <a href="https://jool-monitor.com/" class="btn-cta-lg" target="_blank">
        <span class="material-icons-round">east</span> Planifier un vol
      </a>
    </div>
  </div>
  <div class="drone-svg-wrap reveal" style="padding:0;background:none;aspect-ratio:unset;">
    <img src="{% static 'img/JooL Monitor.jpg' %}" alt="JooL Monitor — cartographie drone"
         style="width:100%;height:auto;display:block;border-radius:24px;">
    <div class="chip-float" style="top:14px;right:16px;animation-delay:.3s;">
      <span class="material-icons-round">place</span> 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> 3 anomalies détectées
    </div>
  </div>
</div>
</section>

<section style="background:var(--dark-bg);padding:0 64px 64px;">
  <div class="drone-stat-row" style="max-width:860px;margin:0 auto;">
    <div class="drone-stat reveal"><div class="drone-stat-val">2 cm</div><div class="drone-stat-label">Résolution GSD</div></div>
    <div class="drone-stat reveal"><div class="drone-stat-val">98%</div><div class="drone-stat-label">Précision comptage</div></div>
    <div class="drone-stat reveal"><div class="drone-stat-val">500 ha</div><div class="drone-stat-label">Par mission de vol</div></div>
  </div>
</section>

<section class="product-features">
  <div class="product-features-inner">
    <div style="text-align:center;">
      <span class="product-eyebrow">Fonctionnalités</span>
      <h2 style="font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.03em;color:var(--black);">Tout ce que JooL Monitor active sur le terrain</h2>
    </div>
    <div class="features-grid">
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">grain</span></div>
        <h3>Comptage intelligent</h3>
        <p>DDétectez, comptez et localisez automatiquement les plants pour visualiser les manquants, les densités et les écarts par parcelle.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">map</span></div>
        <h3>Orthomosaïque haute définition</h3>
        <p>Obtenez une lecture ultra-précise du terrain avec des cartes aériennes nettes, mesurables et directement exploitables.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">view_in_ar</span></div>
        <h3>Modèles 3D terrain</h3>
        <p>Reconstituez le relief et la structure végétale pour mieux analyser hauteurs, volumes et dynamique des blocs.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">task_alt</span></div>
        <h3>Audit visuel de conformité</h3>
        <p>Comparez le terrain réel aux données déclarées, repérez les écarts et documentez les zones sensibles avec preuve visuelle.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">history</span></div>
        <h3>Suivi dans le temps</h3>
        <p>Comparez plusieurs missions pour mesurer l’évolution des cultures, détecter les pertes et suivre les changements parcelle par parcelle.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">download</span></div>
        <h3>Exports prêts à l’usage</h3>
        <p>Téléchargez vos livrables dans les formats attendus par vos équipes et vos outils SIG, sans friction.</p>
      </div>
    </div>
  </div>
</section>

<section class="product-how">
  <div class="product-how-inner">
    <h2> Du vol au <em style="color:var(--accent);font-style:normal;">livrable</em></h2>
    <div class="steps">
      <div class="step reveal"><div class="step-num">01</div><div class="step-body"><h4>Mission cadrée</h4><p>Nous préparons chaque vol selon vos parcelles, vos objectifs et les conditions opérationnelles du terrain.</p></div></div>
      <div class="step reveal"><div class="step-num">02</div><div class="step-body"><h4>Capture terrain haute précision</h4><p>Le drone collecte une couverture complète de la zone pour garantir une lecture fiable et détaillée.</p></div></div>
      <div class="step reveal"><div class="step-num">03</div><div class="step-body"><h4>Traitement intelligent des données</h4><p>Les images sont assemblées, modélisées et transformées en livrables cartographiques directement exploitables.</p></div></div>
      <div class="step reveal"><div class="step-num">04</div><div class="step-body"><h4>Analyse & livraison rapide</h4><p>Vous recevez cartes, indicateurs et rapports prêts à être utilisés par vos équipes.</p></div></div>
    </div>
  </div>
</section>

<section class="product-cta">
  <span class="product-eyebrow" style="margin-bottom:20px;">Votre terrain vu du ciel</span>
  <h2>Prêt à cartographier<br>vos exploitations ?</h2>
  <p>Planifiez votre première mission de cartographie drone avec nos équipes.</p>
  <a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
    <span class="material-icons-round">flight</span> Planifier un vol
  </a>
</section>
{% endblock %}