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

{% block title %}KIRIQ AI — Diagnostic satellitaire & Intelligence Artificielle agricole | Jool International{% endblock %}
{% block title_plain %}KIRIQ AI — Diagnostic satellitaire & Intelligence Artificielle agricole | Jool International{% endblock %}

{% block meta_description %}KIRIQ AI analyse vos cultures par satellite grâce à l'intelligence artificielle : détection précoce des maladies, suivi NDVI, cartographie de stress hydrique et aide à la décision pour les exploitations agricoles en Afrique.{% endblock %}

{% block og_title %}KIRIQ AI — Diagnostic satellitaire pour l'agriculture africaine{% endblock %}
{% block og_description %}Détectez les anomalies sur vos parcelles avant qu'elles ne deviennent des pertes. KIRIQ AI analyse chaque hectare par satellite et IA.{% endblock %}
{% block twitter_title %}KIRIQ AI — Diagnostic satellitaire pour l'agriculture africaine{% endblock %}
{% block twitter_description %}Détectez les anomalies sur vos parcelles avant qu'elles ne deviennent des pertes. KIRIQ AI analyse chaque hectare par satellite et IA.{% endblock %}

{% block schema_org %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "KIRIQ AI",
  "applicationCategory": "AgricultureApplication",
  "operatingSystem": "Web",
  "url": "https://jool-int.com/kiriq/",
  "description": "Solution d'analyse satellitaire et d'intelligence artificielle pour le diagnostic agricole : détection de maladies, suivi NDVI, stress hydrique et aide à la décision.",
  "offers": { "@type": "Offer", "priceCurrency": "XOF" },
  "provider": {
    "@type": "Organization",
    "name": "Jool International",
    "url": "https://jool-int.com"
  }
}
</script>
{% endblock %}

{% block extra_css %}
<style>
  .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-text 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(--black); line-height: 1.05; margin-bottom: 20px; }
  .product-hero-text h1 em { font-style: normal; color: var(--teal); }
  .product-hero-text 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; }
  .product-visual { background: var(--dark-bg); border-radius: 24px; aspect-ratio: 4/3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .product-features { padding: 80px 64px; background: var(--white); }
  .product-features-inner { max-width: 1200px; margin: 0 auto; }
  .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-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; gap: 0; }
  .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: #888; margin-bottom: 32px; transition: color .15s; }
  .btn-back-product:hover { color: var(--teal); }
  @media (max-width: 768px) { .product-hero { grid-template-columns: 1fr; padding: 48px 24px 40px; } .product-features, .product-how, .product-cta { padding: 56px 24px; } .features-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}

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

<div style="background:var(--teal-pale);padding:0 64px 64px;">
  <div class="product-hero" style="padding:0;">
    <div class="product-hero-text reveal">
      <span class="section-tag tag-teal" style="margin-bottom:20px;">
        <span class="material-icons-round" style="font-size:13px;">satellite_alt</span>
        Satellitaire & IA
      </span>
      <h1>Diagnostiquez vos parcelles<br>depuis <em>l'espace.</em></h1>
      <p>KIRiQ AI vous aide à lire l'état réel de vos parcelles, détecter les anomalies plus tôt et décider avec une longueur d'avance.</p>
     
      <div class="btn-row" style="margin-top:32px;">
        <a href="https://kiriq.ai/" class="btn-cta-lg" target="_blank">
          <span class="material-icons-round">east</span> Demander une démo
        </a>
      </div>
    </div>
    <div class="product-visual reveal" style="padding:0;background:none;aspect-ratio:unset;">
      <img src="{% static 'img/Kiriq AI.jpg' %}" alt="Kiriq AI — analyse parcellaire"
           style="width:100%;height:auto;display:block;border-radius:24px;">
      <div class="chip-float cf-tl">
        <span class="material-icons-round">warning</span> 4 anomalies détectées
      </div>
      <div class="chip-float cf-br">
        <span class="material-icons-round">trending_up</span> NDVI +12 pts
      </div>
    </div>
  </div>
</div>

<section class="product-features">
  <div class="product-features-inner">
    <div style="text-align:center;">
      <span class="product-eyebrow" style="margin-bottom:16px;">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);">Ce que KIRiQ AI active pour vous</h2>
    </div>
    <div class="features-grid">
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">warning_amber</span></div>
        <h3>Détection avancée des stress</h3>
        <p>Identifiez plus tôt les zones sous stress hydrique ou nutritionnel, avant que l'impact ne soit visible sur le terrain.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">track_changes</span></div>
        <h3>Interventions mieux ciblées</h3>
        <p>Priorisez les parcelles qui demandent une action immédiate et concentrez vos ressources là où elles comptent le plus.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">dashboard</span></div>
        <h3>Vision multi-parcelles</h3>
        <p>Comparez vos blocs, suivez les écarts et pilotez vos décisions avec une lecture unifiée de l'exploitation.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">bar_chart</span></div>
        <h3>Prévision de rendement</h3>
        <p>Anticipez le potentiel de production par parcelle grâce à une lecture continue de la dynamique végétative.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">description</span></div>
        <h3>Rapports agronomiques instantanés</h3>
        <p>Générez des synthèses lisibles pour vos équipes terrain, vos managers et vos partenaires.</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">integration_instructions</span></div>
        <h3>API & intégrations métier</h3>
        <p>Connectez KIRiQ AI à vos outils existants pour faire circuler la donnée sans friction.</p>
      </div>
    </div>
  </div>
</section>

<section class="product-how">
  <div class="product-how-inner">
    <h2>Comment KIRiQ AI <em style="color:var(--accent);font-style:normal;">fonctionne ?</em></h2>
    <div class="steps">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div class="step-body">
          <h4>Import ou dessin des parcelles</h4>
          <p>Importez vos fichiers ou dessinez directement vos parcelles sur la plateforme pour lancer l'analyse.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div class="step-body">
          <h4>Acquisition satellite récente</h4>
          <p>KIRiQ AI récupère les données satellites les plus récentes disponibles sur chaque parcelle afin de suivre l'état de la végétation au plus près du temps réel.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div class="step-body">
          <h4>Analyse biophysique par IA</h4>
          <p>KIRiQ AI mesure les réponses biophysiques globales de la végétation — chlorophylle, biomasse, humidité, structure foliaire — pour détecter les anomalies visibles dans le signal.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div class="step-body">
          <h4>Rapport de lecture parcellaire</h4>
          <p>Les résultats sont restitués sous forme de cartes, indicateurs et zones prioritaires pour orienter la lecture agronomique, la vérification terrain et la décision.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="product-cta">
  <span class="product-eyebrow" style="margin-bottom:20px;">Prêt à commencer ?</span>
  <h2>Transformez votre vision des plantations</h2>
  <p>Rejoignez les industriels et coopératives qui pilotent déjà leurs exploitations avec KIRIQ AI.</p>
  <a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
    <span class="material-icons-round">east</span> Demander une démo gratuite
  </a>
</section>
{% endblock %}