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

{% block title %}{% trans "Jool ID | Identité agricole & digitalisation des producteurs | Jool International" %}{% endblock %}
{% block title_plain %}{% trans "Jool ID | Identité agricole & digitalisation des producteurs | Jool International" %}{% endblock %}

{% block meta_description %}{% trans "Jool ID structure les données agricoles essentielles : producteurs, parcelles, cultures, surfaces, coopératives et statuts de vérification, pour créer une base fiable, traçable et exploitable à grande échelle." %}{% endblock %}

{% block og_title %}{% trans "Jool ID | Donnez une identité claire à chaque producteur, chaque parcelle" %}{% endblock %}
{% block og_description %}{% trans "Une base agricole fiable, traçable et exploitable à grande échelle. Profils producteurs, parcelles, coopératives, mobilité terrain et API métier." %}{% endblock %}
{% block twitter_title %}{% trans "Jool ID | Identité agricole & digitalisation des producteurs" %}{% endblock %}
{% block twitter_description %}{% trans "Structurez vos données agricoles : producteurs, parcelles, cultures, coopératives. Traçabilité et pilotage à grande échelle." %}{% endblock %}

{% block schema_org %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Jool ID",
  "applicationCategory": "AgricultureApplication",
  "operatingSystem": "Web, Android, iOS",
  "url": "https://jool-international.com/produits/joolid/",
  "description": "Plateforme de digitalisation et gestion de l'identité agricole : profils producteurs vérifiés, parcelles géolocalisées, coopératives, certifications et API métier 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": [
    "Profils producteurs vérifiés et géolocalisés",
    "Cartographie des parcelles et surfaces cultivées",
    "Gestion des coopératives et certifications",
    "Suivi des programmes agricoles et subventions",
    "API ouverte pour intégration ERP",
    "Application mobile hors-ligne"
  ]
}
</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/#joolid"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Jool ID — Identité agricole & digitalisation",
      "item": "https://jool-international.com/produits/joolid/"
    }
  ]
}
</script>
{% endblock %}

{% block extra_css %}
<style>
  /* ── Hero ── */
  .product-hero { background: var(--teal-pale); padding: 80px 64px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; }
  .product-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -0.03em; color: var(--black); line-height: 1.05; margin-bottom: 20px; }
  .product-hero h1 em { font-style: normal; color: var(--teal); }
  .product-hero p { font-size: 17px; color: #555; line-height: 1.75; font-weight: 300; max-width: 480px; margin-bottom: 32px; }
  .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; }

  /* ── Section header ── */
  .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 p { font-size: 16px; color: #666; font-weight: 300; max-width: 560px; margin: 0 auto; }

  /* ── Features ── */
  .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; transition: transform .2s, box-shadow .2s; }
  .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
  .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; }

  /* ── How it works ── */
  .product-how { padding: 80px 64px; background: var(--dark-bg); }
  .product-how-inner { max-width: 900px; 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: 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; }

  /* ── 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(4, 1fr); gap: 20px; margin-top: 56px; }
  .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: 80px 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: 600px; 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-cta-outline { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; padding: 14px 32px; border-radius: 100px; border: 2px solid var(--teal); color: var(--teal); transition: background .15s, transform .12s; text-decoration: none; }
  .btn-cta-outline:hover { background: rgba(25,112,97,.08); transform: translateY(-2px); }
  .btn-back-product { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #888; margin-bottom: 32px; transition: color .15s; }
  .btn-back-product:hover { color: var(--teal); }

  /* ── Responsive ── */
  @media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px) {
    .product-hero { grid-template-columns: 1fr; padding: 48px 24px 40px; }
    .product-features, .product-how, .product-pricing, .product-cta { padding: 56px 24px; }
    .features-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
  }
</style>
{% endblock %}

{% block content %}
<div style="background:var(--teal-pale);padding:24px 64px 0;">
  <a href="{% url 'core:home' %}#joolid" class="btn-back-product">
    <span class="material-icons-round" style="font-size:16px;">arrow_back</span> {% trans "Retour à l'accueil" %}
  </a>
</div>

<!-- HERO -->
<div style="background:var(--teal-pale);padding:0 64px 64px;">
  <div class="product-hero" style="padding:0;">
    <div class="product-hero-text reveal visible">
      <div class="product-eyebrow">
        <span class="material-icons-round">badge</span> {% trans "JOOL ID · IDENTITÉ AGRICOLE" %}
      </div>
      <h1>{% blocktrans %}Donnez une identité claire à chaque producteur,<br>chaque parcelle.{% endblocktrans %}</h1>
      <p>{% trans "JooL ID structure les données agricoles essentielles : producteurs, parcelles, cultures, surfaces, coopératives et statuts de vérification, pour créer une base fiable, traçable et exploitable à grande échelle." %}</p>
      <div class="btn-row" style="display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;">
        <a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
          <span class="material-icons-round">east</span> {% trans "Découvrir JooL ID" %}
        </a>
        <a href="{% url 'core:home' %}#contact" class="btn-cta-outline">{% trans "Parler à notre équipe" %}</a>
      </div>
    </div>
    <div class="product-visual reveal">
    <div style="display:flex;flex-direction:column;gap:10px;">
      <div style="background:white;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);">
        <div style="width:40px;height:40px;border-radius:10px;background:#e0f2f0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;">👨🏾‍🌾</div>
        <div style="flex:1;"><div style="font-weight:700;font-size:14px;">Kouamé Assi</div><div style="font-size:12px;color:#888;">{% trans "Palmier · 4.2 ha · Coopérative Cowabo" %}</div></div>
        <span style="font-size:11px;font-weight:700;background:#e0f2f0;color:var(--teal);padding:3px 10px;border-radius:100px;">{% trans "Vérifié" %}</span>
      </div>
      <div style="background:white;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);">
        <div style="width:40px;height:40px;border-radius:10px;background:#fff3cd;display:flex;align-items:center;justify-content:center;font-size:1.2rem;">👩🏾‍🌾</div>
        <div style="flex:1;"><div style="font-weight:700;font-size:14px;">Adjoua Koffi</div><div style="font-size:12px;color:#888;">{% trans "Hévéa · 7.8 ha · Coopérative Sud" %}</div></div>
        <span style="font-size:11px;font-weight:700;background:#e0f2f0;color:var(--teal);padding:3px 10px;border-radius:100px;">{% trans "Vérifié" %}</span>
      </div>
      <div style="background:white;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);">
        <div style="width:40px;height:40px;border-radius:10px;background:#e8f4fd;display:flex;align-items:center;justify-content:center;font-size:1.2rem;">👨🏿‍🌾</div>
        <div style="flex:1;"><div style="font-weight:700;font-size:14px;">N'Guessan Yao</div><div style="font-size:12px;color:#888;">{% trans "Cacao · 2.6 ha · Coopérative Nord" %}</div></div>
        <span style="font-size:11px;font-weight:700;background:#fff3cd;color:#856404;padding:3px 10px;border-radius:100px;">{% trans "En attente" %}</span>
      </div>
      <div style="background:var(--teal);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;">
        <span class="material-icons-round" style="color:white;font-size:28px;">people</span>
        <div><div style="font-size:1.6rem;font-weight:900;font-family:var(--display);color:white;letter-spacing:-.04em;">300 000+</div><div style="font-size:13px;color:rgba(255,255,255,.65);">{% trans "Producteurs géoréférencés" %}</div></div>
        <div style="margin-left:auto;text-align:right;"><div style="font-size:1.2rem;font-weight:900;font-family:var(--display);color:white;white-space:nowrap;">600 000+ ha</div><div style="font-size:13px;color:rgba(255,255,255,.65);">{% trans "Cartographiés et analysés" %}</div></div>
      </div>
    </div>
    </div>
  </div>
</div>

<!-- FEATURES -->
<section class="product-features">
  <div class="product-features-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow">{% trans "Fonctionnalités" %}</span>
      <h2>{% trans "Ce que JooL ID active pour vous" %}</h2>
      <p>{% trans "Une base agricole fiable, pensée pour les opérations terrain." %}</p>
    </div>
    <div class="features-grid">
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">person_pin</span></div>
        <h3>{% trans "Profils producteurs fiables" %}</h3>
        <p>{% blocktrans %}<strong>Centralisez</strong> des fiches producteurs complètes, vérifiées et exploitables pour le terrain, les audits, les programmes agricoles et les partenaires.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">grass</span></div>
        <h3>{% trans "Parcelles enfin lisibles" %}</h3>
        <p>{% blocktrans %}<strong>Associez</strong> chaque producteur à ses parcelles, cultures et surfaces dans une lecture géographique claire, structurée et exploitable.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">groups</span></div>
        <h3>{% trans "Pilotage coopératif unifié" %}</h3>
        <p>{% blocktrans %}<strong>Suivez</strong> membres, programmes, certifications et opérations agricoles depuis une base unique pensée pour la décision.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">verified</span></div>
        <h3>{% trans "Conformité & traçabilité simplifiées" %}</h3>
        <p>{% blocktrans %}<strong>Préparez</strong> plus facilement les audits, certifications et exigences de traçabilité grâce à des données mieux structurées.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">phone_android</span></div>
        <h3>{% trans "Mobile, même hors connexion" %}</h3>
        <p>{% blocktrans %}<strong>Collectez</strong> les données terrain sans réseau puis <strong>synchronisez</strong> automatiquement dès le retour de la connexion.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">api</span></div>
        <h3>{% trans "API & intégrations métier" %}</h3>
        <p>{% blocktrans %}<strong>Connectez</strong> JooL ID à vos ERP, outils métier et workflows existants grâce à une architecture ouverte et interopérable.{% endblocktrans %}</p>
      </div>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="product-how">
  <div class="product-how-inner">
    <div class="section-header reveal">
      <h2>{% trans "Comment JooL ID se déploie" %}</h2>
      <p>{% trans "De la collecte terrain à une base agricole exploitable." %}</p>
    </div>
    <div class="steps">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div class="step-body">
          <h4>{% trans "Import intelligent de vos données" %}</h4>
          <p>{% trans "Importez vos fichiers existants et structurez votre base JooL ID sans repartir de zéro." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div class="step-body">
          <h4>{% trans "Onboarding des équipes terrain" %}</h4>
          <p>{% trans "Vos agents prennent rapidement en main l'application grâce à une expérience simple et opérationnelle." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div class="step-body">
          <h4>{% trans "Collecte & vérification terrain" %}</h4>
          <p>{% trans "Les données producteurs et parcelles sont collectées, géolocalisées et vérifiées directement sur le terrain." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div class="step-body">
          <h4>{% trans "Base prête à piloter" %}</h4>
          <p>{% trans "En quelques semaines, vous disposez d'une base fiable, vérifiée et exploitable pour vos opérations, audits et reportings." %}</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">{% trans "Tarification" %}</span>
      <h2>{% trans "Une tarification adaptée à la structuration agricole." %}</h2>
    </div>
    <div class="pricing-grid">

      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">person_pin</span></div>
        <div class="pricing-name">{% trans "Géoréférencement producteur" %}</div>
        <div class="pricing-desc">{% trans "Identification et cartographie des producteurs et exploitations agricoles." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-price-xof">{% trans "À partir de 1 000 FCFA" %}</div>
        <div class="pricing-price-usd">≈ $1.7</div>
        <div class="pricing-unit">{% trans "par producteur" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Démarrer" %}
        </a>
      </div>

      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">storage</span></div>
        <div class="pricing-name">{% trans "Structuration de base agricole" %}</div>
        <div class="pricing-desc">{% trans "Création et organisation de bases producteurs, parcelles et coopératives." %}</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 volume & 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 "Demander un devis" %}
        </a>
      </div>

      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">account_balance</span></div>
        <div class="pricing-name">{% trans "Programmes & déploiements institutionnels" %}</div>
        <div class="pricing-desc">{% trans "Déploiements pour coopératives, agro-industries, collectivités et institutions." %}</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 selon 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 class="pricing-card enterprise reveal">
        <div class="pricing-icon"><span class="material-icons-round">api</span></div>
        <div class="pricing-name">{% trans "API & intégrations métier" %}</div>
        <div class="pricing-desc">{% trans "Connexion aux systèmes de financement, assurance, ERP et outils métier." %}</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 à structurer ?" %}</span>
  <h2>{% blocktrans %}Transformez des données dispersées<br>en infrastructure agricole exploitable.{% endblocktrans %}</h2>
  <p>{% trans "Des coopératives de 200 membres aux agro-industries gérant des dizaines de milliers d'hectares, JooL ID s'adapte à votre échelle." %}</p>
  <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
    <a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
      <span class="material-icons-round">east</span> {% trans "Découvrir JooL ID" %}
    </a>
    <a href="{% url 'core:home' %}#contact" class="btn-cta-outline">{% trans "Parler à notre équipe" %}</a>
  </div>
</section>
{% endblock %}
