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

{% block title %}{% trans "Mon Agro | Intervention & opérations terrain agricoles | Jool International" %}{% endblock %}
{% block title_plain %}{% trans "Mon Agro | Intervention & opérations terrain agricoles | Jool International" %}{% endblock %}

{% block meta_description %}{% trans "Mon Agro by JooL connecte les diagnostics KIRiQ Ai à un réseau d'agronomes et techniciens pour exécuter les interventions terrain, accompagner les producteurs et assurer le suivi des parcelles à grande échelle." %}{% endblock %}

{% block og_title %}{% trans "Mon Agro | Transformez les recommandations en interventions terrain" %}{% endblock %}
{% block og_description %}{% trans "Une force opérationnelle agricole : agronomes, techniciens et opérateurs terrain connectés aux diagnostics JooL pour intervenir au bon endroit, au bon moment." %}{% endblock %}
{% block twitter_title %}{% trans "Mon Agro | Intervention & opérations terrain agricoles" %}{% endblock %}
{% block twitter_description %}{% trans "Connectez intelligence agricole et exécution terrain. Agronomes, missions ciblées, suivi continu des parcelles." %}{% endblock %}

{% block schema_org %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Mon Agro",
  "applicationCategory": "AgricultureApplication",
  "operatingSystem": "Web, Android, iOS",
  "url": "https://jool-international.com/produits/monagro/",
  "description": "Plateforme d'opérations terrain agricoles : coordination d'agronomes, missions ciblées par l'IA KIRiQ Ai, suivi des interventions et reporting opérationnel pour l'agri-industrie africaine.",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "XOF",
    "availability": "https://schema.org/InStock"
  },
  "provider": {
    "@type": "Organization",
    "name": "Jool International",
    "url": "https://jool-international.com",
    "logo": "https://jool-international.com/static/img/logo.png"
  },
  "featureList": [
    "Coordination d'un réseau de 250+ agronomes",
    "Missions ciblées par les alertes KIRiQ Ai",
    "Suivi des interventions en temps réel",
    "Reporting terrain géolocalisé",
    "Accompagnement des producteurs agricoles",
    "Exécution des recommandations agronomiques"
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Accueil",
      "item": "https://jool-international.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Produits",
      "item": "https://jool-international.com/#monagro"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Mon Agro — Interventions terrain agricoles",
      "item": "https://jool-international.com/produits/monagro/"
    }
  ]
}
</script>
{% endblock %}

{% block extra_css %}
<style>
  /* ── Hero ──────────────────────────────────────── */
  .product-hero-green {
    background: #0b2e22;
    padding: 0 64px 0;
    position: relative;
    overflow: hidden;
  }

  .product-hero-green::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(25, 112, 97, .35) 0%, transparent 70%),
      radial-gradient(ellipse 50% 80% at 10% 80%, rgba(25, 112, 97, .15) 0%, transparent 60%);
    pointer-events: none;
  }

  .product-hero-green-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 72px;
    position: relative;
  }

  .product-hero-green h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    letter-spacing: -0.03em;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 20px;
  }

  .product-hero-green h1 em {
    font-style: normal;
    color: var(--accent);
  }

  .product-hero-green p {
    font-size: 17px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.8;
    font-weight: 300;
    max-width: 460px;
    margin-bottom: 0;
  }

  .btn-back-product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 28px;
    transition: color .15s;
    text-decoration: none;
  }

  .btn-back-product:hover {
    color: var(--accent);
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(231, 111, 81, .15);
    border: 1px solid rgba(231, 111, 81, .25);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
  }

  .hero-eyebrow .material-icons-round {
    font-size: 13px;
  }

  .hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 36px;
  }

  .hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 15px;
    padding: 15px 32px;
    border-radius: 100px;
    background: var(--accent);
    color: var(--white);
    transition: filter .15s, transform .12s;
    text-decoration: none;
  }

  .hero-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
  }

  .hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    padding: 14px 28px;
    border-radius: 100px;
    border: 1.5px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .75);
    transition: border-color .15s, color .15s, background .15s;
    text-decoration: none;
  }

  .hero-btn-ghost:hover {
    border-color: rgba(255, 255, 255, .5);
    color: var(--white);
    background: rgba(255, 255, 255, .06);
  }

  /* ── Dashboard visual ──────────────────────────── */
  .agro-dashboard {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  }

  .dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .dash-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
  }

  .dash-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgba(25, 112, 97, .3);
    color: #4ade80;
    padding: 3px 10px;
    border-radius: 100px;
  }

  .dash-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dash-mission {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    transition: background .15s;
  }

  .dash-mission:hover {
    background: rgba(255, 255, 255, .09);
  }

  .dash-mission-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dash-mission-icon .material-icons-round {
    font-size: 18px;
  }

  .dash-mission-info {
    flex: 1;
    min-width: 0;
  }

  .dash-mission-name {
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dash-mission-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    margin-top: 2px;
  }

  .dash-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .dash-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .dash-kpi {
    text-align: center;
  }

  .dash-kpi-val {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--white);
    letter-spacing: -.04em;
  }

  .dash-kpi-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
    margin-top: 2px;
  }

  .dash-sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, .1);
  }

  /* ── Stats band ────────────────────────────────── */
  .ops-stats-band {
    background: var(--dark-bg);
    border-top: 1px solid rgba(255, 255, 255, .06);
  }

  .ops-stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .ops-stat {
    padding: 40px 32px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border-right: 1px solid rgba(255, 255, 255, .06);
  }

  .ops-stat:last-child {
    border-right: none;
  }

  .ops-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(25, 112, 97, .15);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ops-stat-icon .material-icons-round {
    color: var(--teal);
    font-size: 22px;
  }

  .ops-stat-val {
    font-family: var(--display);
    font-weight: 900;
    font-size: 2.2rem;
    color: var(--white);
    letter-spacing: -.04em;
    line-height: 1;
  }

  .ops-stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
    margin-top: 6px;
    line-height: 1.4;
  }

  /* ── Features ──────────────────────────────────── */
  .product-features {
    padding: 88px 64px;
    background: var(--white);
  }

  .product-features-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-header {
    text-align: center;
    margin-bottom: 56px;
  }

  .section-header h2 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -.03em;
    color: var(--black);
    margin-bottom: 12px;
  }

  .section-header h2 em {
    font-style: normal;
    color: var(--teal);
  }

  .section-header p {
    font-size: 16px;
    color: #666;
    font-weight: 300;
    max-width: 540px;
    margin: 0 auto;
  }

  .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;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .feature-card {
    background: var(--gray-2);
    border-radius: 18px;
    padding: 28px;
    transition: transform .2s, box-shadow .2s;
  }

  .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(25, 112, 97, .1);
  }

  .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.05rem;
    color: var(--black);
    margin-bottom: 10px;
  }

  .feature-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.65;
    font-weight: 300;
  }

  /* ── How it works ──────────────────────────────── */
  .product-how {
    padding: 88px 64px;
    background: var(--dark-bg);
  }

  .product-how-inner {
    max-width: 860px;
    margin: 0 auto;
  }

  .product-how .section-header h2 {
    color: var(--white);
  }

  .product-how .section-header p {
    color: rgba(255, 255, 255, .55);
  }

  .steps {
    display: flex;
    flex-direction: column;
  }

  .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 28px;
    align-items: flex-start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .step:last-child {
    border-bottom: none;
  }

  .step-num {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--accent);
    line-height: 1;
    padding-top: 3px;
  }

  .step-body h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 8px;
  }

  .step-body p {
    font-size: 15px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.7;
    font-weight: 300;
  }

  /* ── Pricing ───────────────────────────────────── */
  .product-pricing {
    padding: 96px 64px;
    background: var(--gray-2);
  }

  .product-pricing-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
  }

  .pricing-grid-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
  }

  .pricing-card {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 28px;
    border: 1.5px solid var(--gray);
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }

  .pricing-card:hover {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(25, 112, 97, .12);
  }

  .pricing-card.enterprise {
    background: var(--dark-bg);
    border-color: var(--teal);
    box-shadow: 0 8px 32px rgba(25, 112, 97, .18);
  }

  .pricing-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .pricing-card.enterprise .pricing-icon {
    background: rgba(255, 255, 255, .1);
  }

  .pricing-icon .material-icons-round {
    color: var(--teal);
    font-size: 24px;
  }

  .pricing-card.enterprise .pricing-icon .material-icons-round {
    color: var(--accent);
  }

  .pricing-name {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--black);
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .pricing-card.enterprise .pricing-name {
    color: var(--white);
  }

  .pricing-desc {
    font-size: 13px;
    color: #888;
    font-weight: 300;
    line-height: 1.55;
    margin-bottom: 28px;
    flex: 1;
  }

  .pricing-card.enterprise .pricing-desc {
    color: rgba(255, 255, 255, .5);
  }

  .pricing-divider {
    height: 1px;
    background: var(--gray);
    margin-bottom: 24px;
  }

  .pricing-card.enterprise .pricing-divider {
    background: rgba(255, 255, 255, .1);
  }

  .pricing-price-xof {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--teal);
    letter-spacing: -.03em;
    line-height: 1;
  }

  .pricing-card.enterprise .pricing-price-xof {
    color: var(--accent);
  }

  .pricing-price-usd {
    font-size: 13px;
    color: #aaa;
    font-weight: 300;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .pricing-unit {
    font-size: 12px;
    color: #bbb;
    font-weight: 400;
  }

  .pricing-card.enterprise .pricing-unit {
    color: rgba(255, 255, 255, .35);
  }

  .pricing-custom-label {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--teal);
    letter-spacing: -.03em;
  }

  .pricing-cta {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 0;
    border-radius: 100px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    background: var(--teal-pale);
    color: var(--teal);
    transition: background .15s, color .15s;
  }

  .pricing-cta:hover {
    background: var(--teal);
    color: var(--white);
  }

  .pricing-card.enterprise .pricing-cta {
    background: var(--teal);
    color: var(--white);
  }

  .pricing-card.enterprise .pricing-cta:hover {
    filter: brightness(1.1);
  }

  /* ── CTA ───────────────────────────────────────── */
  .product-cta {
    padding: 88px 64px;
    text-align: center;
    background: var(--teal-pale);
  }

  .product-cta h2 {
    font-family: var(--display);
    font-weight: 900;
    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: 36px;
    font-weight: 300;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .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;
    text-decoration: none;
  }

  .btn-cta-lg:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
  }

  .btn-outline-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 100px;
    border: 1.5px solid var(--teal);
    color: var(--teal);
    transition: all .15s;
    margin-left: 14px;
  }

  .btn-outline-product:hover {
    background: var(--teal);
    color: var(--white);
  }

  @media (max-width: 1024px) {
    .pricing-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid-bottom {
      grid-template-columns: 1fr;
    }

    .ops-stats-inner {
      grid-template-columns: 1fr;
    }

    .ops-stat {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .ops-stat:last-child {
      border-bottom: none;
    }
  }

  @media (max-width: 768px) {
    .product-hero-green-inner {
      grid-template-columns: 1fr;
      padding: 56px 0 48px;
    }

    .product-hero-green {
      padding: 0 24px;
    }

    .product-features,
    .product-how,
    .product-pricing,
    .product-cta {
      padding: 56px 24px;
    }

    .features-grid,
    .pricing-grid {
      grid-template-columns: 1fr;
    }

    .btn-outline-product {
      margin-left: 0;
      margin-top: 12px;
    }

    .ops-stats-inner {
      padding: 0 24px;
    }

    .ops-stat {
      padding: 28px 16px;
    }
  }
</style>
{% endblock %}

{% block content %}

<!-- ── Back ── -->
<div style="background:#0b2e22;padding:24px 64px 0;">
  <a href="{% url 'core:home' %}" class="btn-back-product">
    <span class="material-icons-round" style="font-size:15px;">arrow_back</span> {% trans "Retour à l'accueil" %}
  </a>
</div>

<!-- ══ HERO ══ -->
<section class="product-hero-green">
  <div class="product-hero-green-inner">

    <div class="reveal visible">
      <div class="hero-eyebrow">
        <span class="material-icons-round">agriculture</span>
        {% trans "MON AGRO · INTERVENTION & OPÉRATIONS TERRAIN" %}
      </div>
      <h1>{% blocktrans %}Transformez les recommandations<br>en interventions terrain.{% endblocktrans %}</h1>
      <p>{% trans "Mon Agro by JooL connecte les diagnostics JooL à un réseau d'agronomes, techniciens et opérateurs terrain pour accompagner les producteurs, exécuter les interventions et assurer le suivi des parcelles avec précision." %}</p>
      <div class="hero-btns">
        <a href="{% url 'core:home' %}#contact" class="hero-btn-primary">
          <span class="material-icons-round">east</span> {% trans "Découvrir Mon Agro" %}
        </a>
        <a href="{% url 'core:home' %}#contact" class="hero-btn-ghost">{% trans "Parler à notre équipe" %}</a>
      </div>
    </div>

    <div class="reveal">
      <div class="agro-dashboard">
        <div class="dash-body">
          <div class="dash-mission">
            <div class="dash-mission-icon" style="background:rgba(231,111,81,.15);">
              <span class="material-icons-round" style="color:#f4a261;">warning_amber</span>
            </div>
            <div class="dash-mission-info">
              <div class="dash-mission-name">{% trans "Bloc Hévéa · Zone Sud" %}</div>
              <div class="dash-mission-sub">{% trans "Stress hydrique · Agronome assigné" %}</div>
            </div>
            <span class="dash-status" style="background:rgba(231,111,81,.15);color:#f4a261;">{% trans "Urgent" %}</span>
          </div>

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

          <div class="dash-mission">
            <div class="dash-mission-icon" style="background:rgba(74,222,128,.12);">
              <span class="material-icons-round" style="color:#4ade80;">check_circle</span>
            </div>
            <div class="dash-mission-info">
              <div class="dash-mission-name">{% trans "Traitement foliaire · Adjoua K." %}</div>
              <div class="dash-mission-sub">{% trans "4.2 ha traités · Rapport soumis" %}</div>
            </div>
            <span class="dash-status" style="background:rgba(74,222,128,.12);color:#4ade80;">{% trans "Terminé" %}</span>
          </div>
        </div>

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

  </div>
</section>

<!-- ── Stats band ── -->
<div class="ops-stats-band">
  <div class="ops-stats-inner">
    <div class="ops-stat reveal">
      <div class="ops-stat-icon"><span class="material-icons-round">bolt</span></div>
      <div>
        <div class="ops-stat-val">48h</div>
        <div class="ops-stat-label">{% trans "Délai moyen d'intervention" %}</div>
      </div>
    </div>
    <div class="ops-stat reveal">
      <div class="ops-stat-icon"><span class="material-icons-round">task_alt</span></div>
      <div>
        <div class="ops-stat-val">95%</div>
        <div class="ops-stat-label">{% trans "Taux d'exécution des missions" %}</div>
      </div>
    </div>
    <div class="ops-stat reveal">
      <div class="ops-stat-icon"><span class="material-icons-round">place</span></div>
      <div>
        <div class="ops-stat-val">+12</div>
        <div class="ops-stat-label">{% trans "Zones agricoles couvertes" %}</div>
      </div>
    </div>
  </div>
</div>

<!-- ══ FEATURES ══ -->
<section class="product-features">
  <div class="product-features-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow" style="margin-bottom:16px;">{% trans "Ce que Mon Agro active sur le terrain" %}</span>
      <h2>{% blocktrans %}Une force opérationnelle pensée<br>pour l'exécution agricole.{% endblocktrans %}</h2>
    </div>
    <div class="features-grid">
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">track_changes</span></div>
        <h3>{% trans "Interventions ciblées" %}</h3>
        <p>{% blocktrans %}<strong>Déployez</strong> les bonnes actions au bon endroit grâce aux alertes, recommandations et niveaux de priorité générés par KIRiQ Ai.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">support_agent</span></div>
        <h3>{% trans "Accompagnement des producteurs" %}</h3>
        <p>{% blocktrans %}<strong>Suivez</strong> les producteurs avec des recommandations agronomiques, visites techniques et plans d'action adaptés aux réalités terrain.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">manage_accounts</span></div>
        <h3>{% trans "Coordination des équipes terrain" %}</h3>
        <p>{% blocktrans %}<strong>Assignez</strong> les missions, <strong>suivez</strong> les interventions et <strong>pilotez</strong> vos opérations depuis une vision centralisée.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">photo_camera</span></div>
        <h3>{% trans "Vérification & remontée terrain" %}</h3>
        <p>{% blocktrans %}<strong>Documentez</strong> les interventions avec photos, observations terrain et données géolocalisées directement synchronisées dans votre système.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">timeline</span></div>
        <h3>{% trans "Suivi continu des parcelles" %}</h3>
        <p>{% blocktrans %}<strong>Suivez</strong> l'évolution des cultures dans le temps et <strong>mesurez</strong> l'impact réel des actions menées sur le terrain.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">hub</span></div>
        <h3>{% trans "Déploiement à grande échelle" %}</h3>
        <p>{% blocktrans %}<strong>Activez</strong> un réseau d'agronomes et techniciens capable d'intervenir sur plusieurs zones agricoles simultanément.{% endblocktrans %}</p>
      </div>
    </div>
  </div>
</section>

<!-- ══ HOW IT WORKS ══ -->
<section class="product-how">
  <div class="product-how-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow"
        style="margin-bottom:16px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);">{% trans "Comment ça fonctionne" %}</span>
      <h2>{% blocktrans %}Comment Mon Agro <span style="color:var(--accent);">fonctionne</span>{% endblocktrans %}</h2>
      <p>{% trans "De la recommandation à l'exécution terrain." %}</p>
    </div>
    <div class="steps">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div class="step-body">
          <h4>{% trans "Détection & priorisation" %}</h4>
          <p>{% trans "Les anomalies, risques et zones prioritaires sont identifiés via KIRiQ Ai et les outils JooL." %}
          </p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div class="step-body">
          <h4>{% trans "Affectation des missions terrain" %}</h4>
          <p>{% trans "Les tâches et interventions sont assignées aux agronomes, techniciens ou opérateurs disponibles." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div class="step-body">
          <h4>{% trans "Intervention & collecte terrain" %}</h4>
          <p>{% trans "Les équipes interviennent sur les parcelles, appliquent les recommandations et documentent les actions réalisées." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div class="step-body">
          <h4>{% trans "Suivi & reporting opérationnel" %}</h4>
          <p>{% trans "Les données terrain remontent dans la plateforme afin de suivre l'avancement, mesurer les impacts et piloter les opérations." %}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ PRICING ══ -->
<section class="product-pricing">
  <div class="product-pricing-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow" style="margin-bottom:16px;">{% trans "Tarification" %}</span>
      <h2>{% blocktrans %}Une tarification adaptée aux<br>opérations terrain.{% endblocktrans %}</h2>
    </div>

    <div class="pricing-grid">
      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">agriculture</span></div>
        <div class="pricing-name">{% trans "Intervention agronomique ponctuelle" %}</div>
        <div class="pricing-desc">{% trans "Visites techniques, diagnostics terrain et accompagnement des producteurs." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-price-xof">{% trans "À partir de 25 000 FCFA" %}</div>
        <div class="pricing-price-usd">≈ $42</div>
        <div class="pricing-unit">{% trans "par intervention" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Planifier" %}
        </a>
      </div>

      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">flight</span></div>
        <div class="pricing-name">{% trans "Pulvérisation agricole par drone" %}</div>
        <div class="pricing-desc">{% trans "Pulvérisation de précision pour traitements phytosanitaires, nutritionnels et interventions ciblées sur grandes surfaces agricoles." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-price-xof">{% trans "À partir de 10 000 FCFA" %}</div>
        <div class="pricing-price-usd">≈ $17</div>
        <div class="pricing-unit">{% trans "par hectare" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Planifier un vol" %}
        </a>
      </div>

      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">repeat</span></div>
        <div class="pricing-name">{% trans "Suivi opérationnel récurrent" %}</div>
        <div class="pricing-desc">{% trans "Accompagnement terrain continu pour plantations, coopératives et programmes agricoles." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-custom-label">{% trans "Sur devis" %}</div>
        <div class="pricing-unit" style="margin-top:6px;">{% trans "Selon fréquence & périmètre" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Nous contacter" %}
        </a>
      </div>
    </div>

    <div class="pricing-grid-bottom">
      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">hub</span></div>
        <div class="pricing-name">{% trans "Déploiement multi-sites" %}</div>
        <div class="pricing-desc">{% trans "Coordination d'équipes terrain et opérations agricoles à grande échelle." %}
        </div>
        <div class="pricing-divider"></div>
        <div class="pricing-custom-label">{% trans "Sur mesure" %}</div>
        <div class="pricing-unit" style="margin-top:6px;">{% trans "Tarification personnalisée" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Nous contacter" %}
        </a>
      </div>

      <div class="pricing-card enterprise reveal">
        <div class="pricing-icon"><span class="material-icons-round">bar_chart</span></div>
        <div class="pricing-name">{% trans "Reporting & supervision opérationnelle" %}</div>
        <div class="pricing-desc">{% trans "Suivi des interventions, tableaux de bord et reporting terrain centralisé." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-custom-label" style="font-size:1.1rem;color:var(--accent);">{% trans "Options disponibles" %}</div>
        <div class="pricing-unit" style="margin-top:6px;">{% trans "Selon besoins projet" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Parler à notre équipe" %}
        </a>
      </div>
    </div>
  </div>
</section>

<!-- ══ CTA ══ -->
<section class="product-cta">
  <span class="product-eyebrow" style="margin-bottom:20px;">{% trans "Prêt à déployer ?" %}</span>
  <h2>{% blocktrans %}De la donnée à l'action.{% endblocktrans %}</h2>
  <p>{% trans "Mon Agro transforme les alertes, diagnostics et recommandations de l'écosystème JooL en interventions terrain mesurables, exécutées et suivies à grande échelle." %}</p>
  <div class="btn-row" style="justify-content:center;">
    <a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
      <span class="material-icons-round">east</span> {% trans "Découvrir Mon Agro" %}
    </a>
    <a href="{% url 'core:home' %}#contact" class="btn-outline-product">
      {% trans "Parler à notre équipe" %}
    </a>
  </div>
</section>

{% endblock %}