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

{% block title %}{% trans "À propos — Jool International, pionniers de l'AgriTech africaine" %}{% endblock %}
{% block title_plain %}{% trans "À propos — Jool International, pionniers de l'AgriTech africaine" %}{% endblock %}

{% block meta_description %}{% trans "Découvrez Jool International : notre mission, notre équipe et notre vision pour transformer l'agriculture africaine grâce aux technologies satellite, drone et IA. Basés à Abidjan, Côte d'Ivoire." %}{% endblock %}

{% block og_title %}{% trans "À propos de Jool International — AgriTech made in Africa" %}{% endblock %}
{% block og_description %}{% trans "Notre mission : rendre l'agriculture de précision accessible à tous les acteurs de l'agri-industrie africaine. Satellite, drone, IA et digitalisation." %}{% endblock %}
{% block twitter_title %}{% trans "À propos de Jool International — AgriTech made in Africa" %}{% endblock %}
{% block twitter_description %}{% trans "Notre mission : rendre l'agriculture de précision accessible à tous les acteurs de l'agri-industrie africaine." %}{% endblock %}

{% block schema_org %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "name": "À propos de Jool International",
  "url": "https://jool-international.com/a-propos/",
  "description": "Jool International est une entreprise AgriTech basée à Abidjan qui développe des solutions d'intelligence artificielle, de télédétection et de digitalisation pour l'agriculture africaine.",
  "publisher": {
    "@type": "Organization",
    "name": "Jool International",
    "url": "https://jool-international.com",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Abidjan",
      "addressCountry": "CI"
    }
  }
}
</script>
{% endblock %}

{% block extra_css %}
<style>
  /* ─── About Hero ─────────────────────────── */
  .about-hero {
    background: var(--dark-bg);
    padding: 96px 64px 80px;
    text-align: center;
  }
  .about-eyebrow {
    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,.1); color: rgba(255,255,255,.75);
    padding: 5px 16px; border-radius: 100px; margin-bottom: 24px;
  }
  .about-hero h1 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -0.03em;
    color: var(--white); line-height: 1.05; margin-bottom: 24px;
  }
  .about-hero h1 em { font-style: normal; color: var(--accent); }
  .about-hero p {
    font-size: 18px; color: rgba(255,255,255,.65); line-height: 1.75;
    font-weight: 300; max-width: 680px; margin: 0 auto;
  }

  /* ─── Mission ────────────────────────────── */
  .about-mission {
    padding: 88px 64px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
    max-width: 1200px; margin: 0 auto;
  }
  .about-mission h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: -0.03em;
    color: var(--black); margin-bottom: 20px;
  }
  .about-mission h2 em { font-style: normal; color: var(--teal); }
  .about-mission p {
    font-size: 16px; color: #555; line-height: 1.8; font-weight: 300; margin-bottom: 18px;
  }
  .mission-values { display: flex; flex-direction: column; gap: 16px; }
  .mission-value {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--teal-pale); border-radius: 14px; padding: 18px 20px;
  }
  .mission-value .material-icons-round { color: var(--teal); font-size: 22px; flex-shrink: 0; margin-top: 1px; }
  .mission-value-body h4 { font-weight: 700; font-size: 15px; color: var(--black); margin-bottom: 4px; }
  .mission-value-body p { font-size: 14px; color: #666; line-height: 1.6; font-weight: 300; margin: 0; }

  /* ─── Stats strip ────────────────────────── */
  .about-stats {
    background: var(--teal);
    padding: 56px 64px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; text-align: center;
  }
  .about-stat-val {
    font-family: var(--display); font-weight: 900; font-size: 2.6rem;
    color: var(--white); letter-spacing: -.04em;
  }
  .about-stat-label { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 6px; font-weight: 300; }

  /* ─── Produits ───────────────────────────── */
  .about-products {
    padding: 88px 64px; background: var(--gray-2);
  }
  .about-products-inner { max-width: 1200px; margin: 0 auto; }
  .about-products h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
    color: var(--black); margin-bottom: 48px; text-align: center;
  }
  .products-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .about-product-card {
    background: var(--white); border-radius: 18px; padding: 24px 20px;
    border: 1.5px solid var(--gray); transition: border-color .2s, box-shadow .2s, transform .2s;
    display: flex; flex-direction: column;
  }
  .about-product-card:hover {
    border-color: var(--teal); box-shadow: 0 8px 32px rgba(25,112,97,.12); transform: translateY(-3px);
  }
  .apc-icon {
    width: 44px; height: 44px; background: var(--teal-pale); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  }
  .apc-icon .material-icons-round { color: var(--teal); font-size: 22px; }
  .apc-title { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--black); margin-bottom: 8px; }
  .apc-desc { font-size: 13px; color: #666; line-height: 1.6; font-weight: 300; flex: 1; margin-bottom: 20px; }
  .apc-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: var(--teal); transition: gap .15s;
  }
  .apc-link:hover { gap: 10px; }

  /* ─── Equipe ─────────────────────────────── */
  .about-team { padding: 88px 64px; background: var(--white); }
  .about-team-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
  .about-team h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
    color: var(--black); margin-bottom: 12px;
  }
  .about-team > .about-team-inner > p {
    font-size: 16px; color: #666; font-weight: 300; margin-bottom: 56px;
  }
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .team-card { background: var(--gray-2); border-radius: 20px; padding: 32px 24px; text-align: center; }
  .team-avatar {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--teal); display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: white;
  }
  .team-name { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--black); margin-bottom: 4px; }
  .team-role { font-size: 13px; color: var(--teal); font-weight: 600; margin-bottom: 12px; }
  .team-bio { font-size: 13px; color: #777; line-height: 1.6; font-weight: 300; }

  /* ─── Localisation ───────────────────────── */
  .about-location {
    padding: 88px 64px; background: var(--dark-bg);
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  }
  .about-location h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
    color: var(--white); margin-bottom: 20px;
  }
  .about-location h2 em { font-style: normal; color: var(--accent); }
  .about-location p { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.75; font-weight: 300; margin-bottom: 16px; }
  .location-item {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    font-size: 15px; color: rgba(255,255,255,.75);
  }
  .location-item .material-icons-round { color: var(--accent); font-size: 20px; }
  .location-map {
    border-radius: 20px; height: 380px;
    overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  }
  .location-map iframe { display: block; }

  /* ─── Valeurs ───────────────────────────── */
  .about-values { padding: 88px 64px; background: var(--gray-2); }
  .about-values-inner { max-width: 1200px; margin: 0 auto; }
  .about-values-header { text-align: center; margin-bottom: 56px; }
  .about-values-header h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
    color: var(--black); margin-bottom: 12px;
  }
  .about-values-header h2 em { font-style: normal; color: var(--teal); }
  .about-values-header p { font-size: 16px; color: #666; font-weight: 300; max-width: 560px; margin: 0 auto; }
  .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .value-card {
    background: var(--white); border-radius: 20px; padding: 32px 28px;
    border: 1.5px solid var(--gray); transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .value-card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(25,112,97,.1); }
  .value-card-icon {
    width: 52px; height: 52px; background: var(--teal-pale); border-radius: 14px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  }
  .value-card-icon .material-icons-round { color: var(--teal); font-size: 26px; }
  .value-card h3 { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--black); margin-bottom: 8px; }
  .value-card p { font-size: 14px; color: #666; line-height: 1.65; font-weight: 300; margin: 0; }

  /* ─── Mot du CEO ─────────────────────────── */
  .about-ceo { padding: 96px 64px; background: var(--dark-bg); }
  .about-ceo-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start;
  }
  .ceo-photo-wrap { position: relative; }
  .ceo-photo-wrap img {
    width: 100%; border-radius: 24px; display: block;
    filter: grayscale(15%);
  }
  .ceo-photo-label {
    position: absolute; bottom: -1px; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    border-radius: 0 0 24px 24px;
    padding: 32px 20px 20px;
  }
  .ceo-photo-label .ceo-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--white); }
  .ceo-photo-label .ceo-role { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 2px; letter-spacing: .04em; text-transform: uppercase; }
  .ceo-quote-wrap { padding-top: 8px; }
  .ceo-section-tag {
    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,.08); color: rgba(255,255,255,.6);
    padding: 5px 14px; border-radius: 100px; margin-bottom: 28px;
  }
  .ceo-section-tag .material-icons-round { font-size: 13px; color: var(--accent); }
  .ceo-quote-mark {
    font-family: Georgia, serif; font-size: 7rem; line-height: .7;
    color: var(--teal); opacity: .4; margin-bottom: 8px; display: block;
  }
  .ceo-quote-wrap h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(1.6rem, 2.5vw, 2rem); letter-spacing: -0.03em;
    color: var(--white); margin-bottom: 32px; line-height: 1.15;
  }
  .ceo-quote-wrap h2 em { font-style: normal; color: var(--accent); }
  .ceo-body p {
    font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.85;
    font-weight: 300; margin-bottom: 16px;
  }
  .ceo-body p:last-child { margin-bottom: 0; }
  .ceo-signature {
    margin-top: 10px; padding-top: 10px;
    display: flex; align-items: center; gap: 16px;
  }
  .ceo-sig-line { width: 40px; height: 2px; background: var(--teal); }
  .ceo-sig-name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--white); }
  .ceo-sig-role { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 300; margin-top: 2px; }

  /* ─── CTA ────────────────────────────────── */
  .about-cta { padding: 88px 64px; background: var(--teal-pale); text-align: center; }
  .about-cta h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
    color: var(--black); margin-bottom: 16px;
  }
  .about-cta p { font-size: 16px; color: #666; font-weight: 300; margin-bottom: 32px; }
  .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-outline-about {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--body); font-weight: 700; font-size: 15px;
    padding: 14px 30px; border-radius: 100px;
    border: 1.5px solid var(--teal); color: var(--teal);
    transition: all .15s; margin-left: 16px;
  }
  .btn-outline-about:hover { background: var(--teal); color: var(--white); }

  @media (max-width: 768px) {
    .about-hero, .about-mission, .about-stats, .about-products,
    .about-team, .about-location, .about-cta,
    .about-values, .about-ceo { padding: 56px 24px; }
    .about-mission, .about-location { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .products-row, .team-grid, .values-grid { grid-template-columns: 1fr; }
    .about-ceo-inner { grid-template-columns: 1fr; gap: 40px; }
    .ceo-photo-wrap { max-width: 280px; margin: 0 auto; }
    .btn-outline-about { margin-left: 0; margin-top: 12px; }
  }
</style>
{% endblock %}

{% block content %}

<!-- ══ HERO ══ -->
<section class="about-hero">
  <div class="about-eyebrow">{% trans "À propos de Jool International" %}</div>
  <h1>{% blocktrans %}L'intelligence agricole<br>au service de <em>l'Afrique.</em>{% endblocktrans %}</h1>
  <p style="text-align: left;">{% blocktrans %}JooL construit une infrastructure agricole qui connecte intelligence artificielle, satellite, drones, données géoréférencées et opérations terrain pour aider les acteurs agricoles à mieux voir, mieux décider et mieux agir à grande échelle. <br>
    L'agriculture africaine souffre encore d'un immense déficit de visibilité terrain. <br>
    Des millions d'exploitations agricoles opèrent sans données fiables, actualisées et exploitables, ralentissant les interventions, la gestion du risque et l'accès au financement.{% endblocktrans %}</p>
</section>

<!-- ══ VISION ══ -->
<section style="background:var(--white);">
  <div class="about-mission">
    <div class="reveal">
      <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(25,112,97,.1);color:var(--teal);padding:5px 14px;border-radius:100px;display:inline-block;margin-bottom:20px;">{% trans "Notre vision" %}</span>
      <h2>{% blocktrans %}Construire l'infrastructure <br><em>d'intelligence agricole</em> <br> de référence en Afrique.{% endblocktrans %}</h2>
      <p>{% trans "Nous voulons transformer la manière dont l'agriculture africaine est observée, monitorée, scorée, financée et opérée à grande échelle." %}</p>
      <p>{% trans "Notre ambition est de rendre chaque hectare plus visible, chaque risque plus mesurable et chaque décision plus précise grâce à une infrastructure combinant intelligence artificielle, satellite, données terrain et opérations agricoles." %}</p>
    </div>
    <div class="mission-values reveal">
      <div class="mission-value">
        <span class="material-icons-round">visibility</span>
        <div class="mission-value-body">
          <h4>{% trans "Transparence" %}</h4>
          <p>{% trans "Des données vérifiables et auditables à chaque étape de la chaîne de valeur agricole." %}</p>
        </div>
      </div>
      <div class="mission-value">
        <span class="material-icons-round">bolt</span>
        <div class="mission-value-body">
          <h4>{% trans "Impact terrain" %}</h4>
          <p>{% trans "Nos solutions sont conçues pour être utilisées par des agents de terrain, pas seulement des ingénieurs." %}</p>
        </div>
      </div>
      <div class="mission-value">
        <span class="material-icons-round">public</span>
        <div class="mission-value-body">
          <h4>{% trans "Scalabilité africaine" %}</h4>
          <p>{% trans "De 100 à 100 000 hectares, nos outils s'adaptent à toutes les tailles d'exploitation." %}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ STATS ══ -->
<div class="about-stats">
  <div class="reveal">
    <div class="about-stat-val">+300 000</div>
    <div class="about-stat-label">{% trans "Producteurs digitalisés" %}</div>
  </div>
  <div class="reveal">
    <div class="about-stat-val">+610 000</div>
    <div class="about-stat-label">{% trans "Superficie suivie" %}</div>
  </div>
  <div class="reveal">
    <div class="about-stat-val">3</div>
    <div class="about-stat-label">{% trans "Cultures couvertes" %}</div>
  </div>
  <div class="reveal">
    <div class="about-stat-val">89%</div>
    <div class="about-stat-label">{% trans "Précision IA" %}</div>
  </div>
</div>

<!-- ══ VALEURS ══ -->
<section class="about-values">
  <div class="about-values-inner">
    <div class="about-values-header reveal">
      <span class="section-tag tag-teal" style="margin-bottom:16px;">
        <span class="material-icons-round" style="font-size:13px;">diamond</span>
        {% trans "Ce qui nous guide" %}
      </span>
      <h2>{% blocktrans %}Nos <em>valeurs</em>{% endblocktrans %}</h2>
      <p>{% trans "Une technologie construite autour du terrain, de la clarté et de l'impact." %}</p>
    </div>
    <div class="values-grid">
      <div class="value-card reveal">
        <div class="value-card-icon"><span class="material-icons-round">verified</span></div>
        <h3>{% trans "Intégrité" %}</h3>
        <p>{% trans "Des systèmes fiables, transparents et basés sur des données vérifiables." %}</p>
      </div>
      <div class="value-card reveal">
        <div class="value-card-icon"><span class="material-icons-round">lightbulb</span></div>
        <h3>{% trans "Clarté" %}</h3>
        <p>{% trans "Transformer des données complexes en décisions compréhensibles et exploitables." %}</p>
      </div>
      <div class="value-card reveal">
        <div class="value-card-icon"><span class="material-icons-round">workspace_premium</span></div>
        <h3>{% trans "Excellence" %}</h3>
        <p>{% trans "Un haut niveau d'exécution dans nos technologies et nos opérations terrain." %}</p>
      </div>
      <div class="value-card reveal">
        <div class="value-card-icon"><span class="material-icons-round">agriculture</span></div>
        <h3>{% trans "Exécution terrain" %}</h3>
        <p>{% trans "Connecter intelligence et interventions réelles sur le terrain." %}</p>
      </div>
      <div class="value-card reveal">
        <div class="value-card-icon"><span class="material-icons-round">trending_up</span></div>
        <h3>{% trans "Impact utile" %}</h3>
        <p>{% trans "Créer des outils capables d'améliorer concrètement la performance agricole." %}</p>
      </div>
      <div class="value-card reveal">
        <div class="value-card-icon"><span class="material-icons-round">public</span></div>
        <h3>{% trans "Pensé pour l'Afrique" %}</h3>
        <p>{% trans "Des solutions adaptées aux réalités agricoles africaines et au passage à l'échelle." %}</p>
      </div>
    </div>
  </div>
</section>

<!-- ══ MOT DU CEO ══ -->
<section class="about-ceo">
  <div class="about-ceo-inner">
    <div class="ceo-photo-wrap reveal">
      {% trans "Joseph-Olivier BILEY — Co-Founder & CEO, JooL International" as alt_ceo %}
      <img src="{% static 'img/joseph_Olivier_Biley.jpg' %}" alt="{{ alt_ceo }}" loading="lazy" decoding="async">
      <div class="ceo-photo-label">
        <div class="ceo-name">Joseph-Olivier BILEY</div>
        <div class="ceo-role">Co-Founder & CEO, JooL International</div>
      </div>
    </div>
    <div class="ceo-quote-wrap reveal">
      <div class="ceo-section-tag">
        {% trans "Mot du CEO" %}
      </div>
      <span class="ceo-quote-mark">"</span>
      <h2>{% blocktrans %}L'agriculture africaine ne manque pas de potentiel.<br><em>Elle manque de visibilité.</em>{% endblocktrans %}</h2>
      <div class="ceo-body">
        <p>{% trans "Pendant des décennies, une grande partie des décisions agricoles en Afrique a été prise avec peu de données fiables, peu de visibilité terrain et des outils rarement adaptés aux réalités opérationnelles du continent." %}</p>
        <p>{% trans "Cette absence de visibilité a un coût immense : maladies détectées trop tard, interventions mal priorisées, risques mal évalués et capitaux déployés avec trop d'incertitude." %}</p>
        <p>{% trans "Chez JooL, nous avons décidé de construire une infrastructure capable de changer cela. En collectant des données locales et en connectant intelligence artificielle, satellite, drones, données géoréférencées et opérations terrain, nous aidons les acteurs agricoles à mieux comprendre leurs parcelles, détecter les risques plus tôt et prendre des décisions plus précises." %}</p>
        <p>{% trans "Mais notre ambition va plus loin que la technologie. Nous voulons contribuer à bâtir une agriculture africaine plus visible, plus mesurable, plus finançable et plus performante à grande échelle." %}</p>
        <p>{% trans "Parce qu'une agriculture mieux comprise devient une agriculture plus forte, nous nous engageons chez JooL à révéler les zones d'ombre de l'agriculture africaine et à transformer les données terrain en décisions utiles." %}</p>
      </div>
      <div class="ceo-signature">
        <div class="ceo-sig-line"></div>
        <div>
          <div class="ceo-sig-name">Joseph-Olivier BILEY</div>
          <div class="ceo-sig-role">Co-Founder & CEO, JooL International</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ PRODUITS ══ -->
<section class="about-products">
  <div class="about-products-inner">
    <h2>{% trans "Nos solutions" %}</h2>
    <div class="products-row">
      <div class="about-product-card reveal">
        <div class="apc-icon"><span class="material-icons-round">satellite_alt</span></div>
        <div class="apc-title">KIRIQ AI</div>
        <p class="apc-desc">{% trans "Surveillance satellitaire et IA pour détecter les stress végétatifs, prioriser les interventions et piloter vos plantations depuis le bureau." %}</p>
        <a href="{% url 'core:kiriq' %}" class="apc-link">{% trans "Découvrir KIRIQ AI" %} <span class="material-icons-round" style="font-size:18px;">east</span></a>
      </div>
      <div class="about-product-card reveal">
        <div class="apc-icon"><span class="material-icons-round">flight</span></div>
        <div class="apc-title">Jool Monitor</div>
        <p class="apc-desc">{% trans "Cartographie drone haute résolution, comptage automatique des plants et audit de conformité pour une vision ultra-précise du terrain." %}</p>
        <a href="{% url 'core:monitor' %}" class="apc-link">{% trans "Découvrir Monitor" %} <span class="material-icons-round" style="font-size:18px;">east</span></a>
      </div>
      <div class="about-product-card reveal">
        <div class="apc-icon"><span class="material-icons-round">badge</span></div>
        <div class="apc-title">Jool ID</div>
        <p class="apc-desc">{% trans "Digitalisation et centralisation des producteurs, parcelles et programmes agricoles pour une gestion fiable et traçable à grande échelle." %}</p>
        <a href="{% url 'core:joolid' %}" class="apc-link">{% trans "Découvrir Jool ID" %} <span class="material-icons-round" style="font-size:18px;">east</span></a>
      </div>
      <div class="about-product-card reveal">
        <div class="apc-icon"><span class="material-icons-round">agriculture</span></div>
        <div class="apc-title">Mon Agro</div>
        <p class="apc-desc">{% trans "Réseau d'agronomes et techniciens terrain pour exécuter les interventions, accompagner les producteurs et assurer le suivi opérationnel des parcelles." %}</p>
        <a href="{% url 'core:monagro' %}" class="apc-link">{% trans "Découvrir Mon Agro" %} <span class="material-icons-round" style="font-size:18px;">east</span></a>
      </div>
    </div>
  </div>
</section>

<!-- ══ LOCALISATION ══ -->
<section class="about-location">
  <div class="reveal">
    <h2>{% blocktrans %}Basés en <em>Côte d'Ivoire,</em><br>actifs en Afrique.{% endblocktrans %}</h2>
    <p>{% trans "Jool International opère partout en Afrique de l'Ouest, là où les enjeux agricoles sont les plus importants." %}</p>
    <div class="location-item"><span class="material-icons-round">location_on</span> {% trans "Abidjan, Côte d'Ivoire (siège)" %}</div>
    <div class="location-item"><span class="material-icons-round">email</span> info@jool-int.com</div>
    <div class="location-item"><span class="material-icons-round">phone</span> +225 07 99 899 836</div>
  </div>
  <div class="location-map reveal">
    {% trans "Localisation de Jool International — Abidjan, Côte d'Ivoire" as map_title %}
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3972.3381998336868!2d-3.9153728148862776!3d5.36527478072492!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc193bd3101ed6b%3A0x9dab83b7bb1027b9!2sJooL-International!5e0!3m2!1sfr!2sci!4v1778585083283!5m2!1sfr!2sci"
      width="100%"
      height="100%"
      style="border:0;"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      title="{{ map_title }}">
    </iframe>
  </div>
</section>

<!-- ══ CTA ══ -->
<section class="about-cta">
  <span style="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;display:inline-block;margin-bottom:20px;">{% trans "Travaillons ensemble" %}</span>
  <h2>{% blocktrans %}Prêt à transformer<br>votre exploitation ?{% endblocktrans %}</h2>
  <p>{% trans "Discutons de vos besoins et voyons comment Jool peut vous aider." %}</p>
  <div>
    <a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
      <span class="material-icons-round">east</span> {% trans "Demander une démo" %}
    </a>
    {% if careers_enabled %}
    <a href="{% url 'careers:job_list' %}" class="btn-outline-about">
      {% trans "Rejoindre l'équipe" %}
    </a>
    {% endif %}
  </div>
</section>

{% endblock %}
