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

{% block title %}GiniFollow — Accueil{% endblock %}
{% block meta_description %}GiniFollow : télé-suivi et éducation thérapeutique des maladies chroniques, détection des
signes d'alerte et orientation médicale. Le suivi qui sécurise, l'accompagnement qui rassure.{% endblock %}
{% block og_description %}GiniFollow : télé-suivi et éducation thérapeutique des maladies chroniques, détection des
signes d'alerte et orientation médicale. Le suivi qui sécurise, l'accompagnement qui rassure.{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
{% endblock %}

{% block hero %}
<section class="gf-hero-home hero-header wow fadeIn" data-wow-delay="0.05s">
    <div class="gf-hero-home__bg"
        style="background-image: linear-gradient(125deg, rgba(10,34,51,.9), rgba(26,111,145,.78)), url('{% static 'images/ginni2.jpg' %}');">
    </div>
    <div class="container py-5 py-lg-6 position-relative">
        <div class="row align-items-center">
            <div class="col-lg-9 text-center text-lg-start mx-auto mx-lg-0">
                <p class="hero-badge mb-3">Plateforme de suivi thérapeutique</p>
                <h1 class="display-4 text-white mb-3">Un suivi médical humain, clair et rassurant</h1>
                <p class="fs-5 text-white-50 mb-4 pe-lg-4">
                    GiniFollow accompagne les personnes vivant avec une maladie chronique et oriente celles qui
                    ressentent des signes d'alerte pour agir tôt, sans rester seul.
                </p>
                <div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start mb-4">
                    <a href="{% url 'apropos' %}" class="btn btn-light btn-lg rounded-pill px-4 shadow-sm gf-btn-glow">
                        <i class="bi bi-info-circle me-2"></i>En savoir plus
                    </a>
                    <button type="button" class="btn btn-primary btn-lg rounded-pill px-4 shadow-sm"
                        data-bs-toggle="modal" data-bs-target="#gfVideoModal">
                        <i class="bi bi-play-circle me-2"></i>Voir la présentation
                    </button>
                </div>
                <div class="gf-trust-bar d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
                    <span class="gf-trust-pill"><i class="bi bi-check2-circle me-1"></i> Suivi personnalisé</span>
                    <span class="gf-trust-pill"><i class="bi bi-check2-circle me-1"></i> Orientation responsable</span>
                    <span class="gf-trust-pill"><i class="bi bi-check2-circle me-1"></i> Confidentialité assurée</span>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block content %}

{# ——— SECTION 2 : Le problème ——— #}
<section class="container-xxl py-5 gf-section" id="probleme">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" style="max-width: 640px;">
            <p class="text-primary fw-semibold mb-2">Pourquoi GiniFollow existe</p>
            <h2 class="display-6 mb-3">Beaucoup de complications peuvent être évitées</h2>
            <p class="text-muted mb-0">Des situations que beaucoup de patients reconnaissent et que nous pouvons mieux
                accompagner.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4 wow fadeInUp" data-wow-delay="0.05s">
                <div class="gf-problem-card h-100">
                    <span class="gf-problem-card__icon"><i class="bi bi-capsule"></i></span>
                    <h3 class="h5 fw-bold">Oubli de traitement</h3>
                    <p class="text-muted small mb-0">Des traitements interrompus peuvent aggraver certaines maladies
                        chroniques.</p>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp" data-wow-delay="0.1s">
                <div class="gf-problem-card h-100">
                    <span class="gf-problem-card__icon"><i class="bi bi-exclamation-triangle"></i></span>
                    <h3 class="h5 fw-bold">Symptômes ignorés</h3>
                    <p class="text-muted small mb-0">Certains signes semblent bénins, mais peuvent devenir graves.</p>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp" data-wow-delay="0.15s">
                <div class="gf-problem-card h-100">
                    <span class="gf-problem-card__icon"><i class="bi bi-person-walking"></i></span>
                    <h3 class="h5 fw-bold">Manque de suivi</h3>
                    <p class="text-muted small mb-0">Beaucoup de patients restent seuls face à leur maladie au
                        quotidien.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— Chiffres clés (éditable : valeurs data-gf-count) ——— #}
<section class="gf-stats section py-5" id="stats">
    <div class="container">
        <div class="text-center mb-5 wow fadeInUp">
            <p class="gf-stats__label mb-2">GiniFollow en quelques chiffres</p>
            <h2 class="h3 text-white mb-0 fw-bold">Un impact concret sur le terrain</h2>
        </div>
        <div class="row gy-4 justify-content-center">
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.05s">
                <div class="gf-stats-item text-center">
                    <span class="gf-stats-item__icon"><i class="bi bi-people-fill"></i></span>
                    <span class="gf-stats-item__num" data-gf-count="120">0</span>
                    <p class="gf-stats-item__label mb-0">Patients accompagnés</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.1s">
                <div class="gf-stats-item text-center">
                    <span class="gf-stats-item__icon"><i class="bi bi-heart-pulse-fill"></i></span>
                    <span class="gf-stats-item__num" data-gf-count="8">0</span>
                    <p class="gf-stats-item__label mb-0">Maladies chroniques suivies</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.15s">
                <div class="gf-stats-item text-center">
                    <span class="gf-stats-item__icon"><i class="bi bi-calendar-check-fill"></i></span>
                    <span class="gf-stats-item__num" data-gf-count="350">0</span>
                    <p class="gf-stats-item__label mb-0">Orientations &amp; rendez-vous</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.2s">
                <div class="gf-stats-item text-center">
                    <span class="gf-stats-item__icon"><i class="bi bi-journal-medical"></i></span>
                    <span class="gf-stats-item__num" data-gf-count="24">0</span>
                    <p class="gf-stats-item__label mb-0">Ressources éducatives</p>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— SECTION 3 : Comment GiniFollow aide ——— #}
<section class="container-fluid bg-light py-5 gf-section">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" style="max-width: 680px;">
            <h2 class="display-6 mb-3">Un accompagnement simple, humain et sécurisé</h2>
        </div>
        <div class="row g-4">
            <div class="col-lg-6 wow fadeInUp">
                <div class="gf-volet-card h-100 p-4 p-lg-5">
                    <h3 class="h4 mb-3"><i class="bi bi-heart-pulse text-primary me-2"></i>Suivi thérapeutique</h3>
                    <ul class="list-unstyled small mb-4 gf-check-list">
                        <li><i class="bi bi-check2 text-primary me-2"></i>Rappels médicaments</li>
                        <li><i class="bi bi-check2 text-primary me-2"></i>Suivi quotidien</li>
                        <li><i class="bi bi-check2 text-primary me-2"></i>Rendez-vous accompagnateur</li>
                        <li><i class="bi bi-check2 text-primary me-2"></i>Éducation thérapeutique</li>
                    </ul>
                    <a href="{% url 'tarifs' %}" class="btn btn-primary rounded-pill">Découvrir le suivi</a>
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="gf-volet-card gf-volet-card--alt h-100 p-4 p-lg-5">
                    <h3 class="h4 mb-3"><i class="bi bi-geo-alt text-primary me-2"></i>Orientation médicale</h3>
                    <ul class="list-unstyled small mb-4 gf-check-list">
                        <li><i class="bi bi-check2 text-primary me-2"></i>Déclaration des symptômes</li>
                        <li><i class="bi bi-check2 text-primary me-2"></i>Analyse humaine</li>
                        <li><i class="bi bi-check2 text-primary me-2"></i>Orientation vers un spécialiste</li>
                    </ul>
                    <a href="{% url 'signe_alerte' %}" class="btn btn-outline-primary rounded-pill">Signaler un
                        symptôme</a>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— Section Engagement & Partenariat ——— #}
<section class="gf-engagement section py-5" id="partenaires">
    <div class="container wow fadeInUp">
        <div class="text-center mx-auto mb-5" style="max-width: 720px;">
            <p class="text-primary fw-semibold mb-2">Construisons ensemble l'avenir de l'éducation thérapeutique</p>
            <h2 class="display-6 mb-3">Votre engagement peut changer des parcours de santé</h2>
        </div>
        <div class="row g-4 align-items-center mb-5">
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.05s">
                <div class="gf-engagement-visual text-center">
                    <img src="{% static 'images/ginni52.png' %}" alt="Accompagnement et engagement santé"
                        class="img-fluid rounded-4 shadow-sm gf-engagement-img" loading="lazy">
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="gf-engagement-content ps-lg-3">
                    <h3 class="h4 fw-bold text-dark mb-3">Votre soutien peut faire grandir l'impact de GiniFollow</h3>
                    <p class="text-muted mb-3">
                        GiniFollow ambitionne de rendre l'éducation thérapeutique et l'accompagnement des maladies
                        chroniques plus accessibles. Nous recherchons aujourd'hui des partenaires prêts à contribuer à
                        cette ambition : institutions, professionnels de santé, associations, entreprises, fondations et
                        mécènes.
                    </p>
                    <p class="fw-semibold text-primary mb-4">
                        Ensemble, faisons grandir une santé plus préventive, plus accessible et plus humaine.
                    </p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="{% url 'devenir_partenaire' %}"
                            class="btn btn-primary rounded-pill px-4 shadow-sm gf-btn-glow">
                            <i class="bi bi-handshake me-2"></i>Devenir partenaire
                        </a>
                        <a href="{% url 'soutenir_mission' %}"
                            class="btn btn-outline-primary rounded-pill px-4 shadow-sm">
                            <i class="bi bi-heart-fill text-danger me-2"></i>Soutenir la mission
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {# 4 petites cartes d'impact #}
        <div class="row g-4">
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.05s">
                <div class="gf-engagement-card h-100 p-4 rounded-4 border-0 shadow-sm text-center">
                    <div class="gf-engagement-card__icon mb-3 mx-auto fs-3 text-primary">
                        <i class="bi bi-hospital"></i>
                    </div>
                    <h4 class="h6 fw-bold mb-2">Santé</h4>
                    <p class="small text-muted mb-0">Développer l'accompagnement thérapeutique</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.1s">
                <div class="gf-engagement-card h-100 p-4 rounded-4 border-0 shadow-sm text-center">
                    <div class="gf-engagement-card__icon mb-3 mx-auto fs-3 text-primary">
                        <i class="bi bi-mortarboard"></i>
                    </div>
                    <h4 class="h6 fw-bold mb-2">Éducation</h4>
                    <p class="small text-muted mb-0">Produire davantage de contenus d'éducation à la santé</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.15s">
                <div class="gf-engagement-card h-100 p-4 rounded-4 border-0 shadow-sm text-center">
                    <div class="gf-engagement-card__icon mb-3 mx-auto fs-3 text-primary">
                        <i class="bi bi-lightbulb"></i>
                    </div>
                    <h4 class="h6 fw-bold mb-2">Innovation</h4>
                    <p class="small text-muted mb-0">Améliorer la plateforme numérique</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 wow fadeInUp" data-wow-delay="0.2s">
                <div class="gf-engagement-card h-100 p-4 rounded-4 border-0 shadow-sm text-center">
                    <div class="gf-engagement-card__icon mb-3 mx-auto fs-3 text-primary">
                        <i class="bi bi-globe-americas"></i>
                    </div>
                    <h4 class="h6 fw-bold mb-2">Impact</h4>
                    <p class="small text-muted mb-0">Étendre GiniFollow à davantage de patients</p>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— SECTION 4 : Comment ça marche ——— #}
<section class="container-xxl py-5 gf-section" id="comment-ca-marche">
    <div class="container">
        <div class="text-center mb-5 wow fadeInUp">
            <h2 class="display-6 mb-2">Comment ça marche</h2>
            <p class="text-muted">Trois étapes, c'est tout.</p>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4 wow fadeInUp">
                <div class="gf-step-card text-center h-100">
                    <span class="gf-step-num">1</span>
                    <h3 class="h5 fw-bold mt-3">Créez votre compte</h3>
                    <p class="small text-muted mb-0">Inscription rapide et accès à votre espace patient.</p>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp" data-wow-delay="0.08s">
                <div class="gf-step-card text-center h-100">
                    <span class="gf-step-num">2</span>
                    <h3 class="h5 fw-bold mt-3">Décrivez votre situation</h3>
                    <p class="small text-muted mb-0">Profil, suivi ou signes d'alerte selon votre besoin.</p>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp" data-wow-delay="0.16s">
                <div class="gf-step-card text-center h-100">
                    <span class="gf-step-num">3</span>
                    <h3 class="h5 fw-bold mt-3">Recevez votre accompagnement</h3>
                    <p class="small text-muted mb-0">Rendez-vous, messages et orientation adaptés.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— SECTION 5 : Maladies (éditable — images : static/img/maladies/) ——— #}
<section class="container-fluid bg-light py-5 gf-section" id="maladies">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" style="max-width: 720px;">
            <h2 class="display-6 mb-3">Maladies prises en charge</h2>
            <p class="text-muted mb-0">Comprendre la maladie, ses conséquences et mieux vivre au quotidien grâce à un
                suivi structuré.</p>
        </div>
        <div class="row g-4">

            <div class="col-sm-6 col-lg-3 wow fadeInUp">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni10.jpg' %}" alt="Hypertension artérielle"
                            class="gf-maladie-card__img" loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">Hypertension artérielle</h3>
                        <p class="small text-muted mb-0">Tension élevée durable qui fatigue le cœur et les vaisseaux.
                            Peut provoquer AVC, infarctus ou atteinte rénale si elle n'est pas suivie.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.05s">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni11.jpg' %}" alt="Diabète sucré" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">Diabète sucré</h3>
                        <p class="small text-muted mb-0">Excès de sucre dans le sang par manque d'insuline ou de
                            résistance. Complications possibles : yeux, reins, nerfs et plaies qui cicatrisent mal.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.1s">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni12.jpg' %}" alt="Asthme" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">Asthme</h3>
                        <p class="small text-muted mb-0">Inflammation des bronches avec essoufflement et sifflements.
                            Les crises peuvent s'aggraver sans traitement adapté.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.15s">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni13.jpg' %}" alt="VIH/SIDA" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">VIH / SIDA</h3>
                        <p class="small text-muted mb-0">Virus qui affaiblit les défenses immunitaires. Sans suivi,
                            infections opportunistes et complications graves deviennent plus fréquentes.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni14.jpg' %}" alt="Drépanocytose" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">Drépanocytose</h3>
                        <p class="small text-muted mb-0">Globules rouges en forme de faucille qui bloquent la
                            circulation. Crises douloureuses, anémie et risque d'infections.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.05s">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni15.jpg' %}" alt="Glaucome" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">Glaucome</h3>
                        <p class="small text-muted mb-0">Pression oculaire élevée qui endommage le nerf optique. Peut
                            mener à une perte de vision progressive et irréversible.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.1s">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni16.jpg' %}" alt="BPCO" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">BPCO</h3>
                        <p class="small text-muted mb-0">Bronches et poumons endommagés, souvent liés au tabac.
                            Essoufflement chronique et exacerbations fréquentes.</p>
                    </div>
                </article>
            </div>

            <div class="col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.15s">
                <article class="card gf-maladie-card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="gf-maladie-card__thumb">
                        <img src="{% static 'images/ginni17.jpg' %}" alt="Épilepsie" class="gf-maladie-card__img"
                            loading="lazy">
                    </div>
                    <div class="card-body">
                        <h3 class="h6 fw-bold text-primary">Épilepsie</h3>
                        <p class="small text-muted mb-0">Activité électrique anormale du cerveau provoquant des crises.
                            Sans suivi, risque de chutes, blessures et isolement social.</p>
                    </div>
                </article>
            </div>

        </div>
        <div class="text-center mt-4 wow fadeInUp">
            <a href="{% url 'tarifs' %}" class="btn btn-primary rounded-pill px-4">Voir les forfaits de suivi</a>
        </div>
    </div>
</section>

{# ——— SECTION 6 : Blog (≥ 3 articles) ——— #}
{% if blog_ressources %}
<section class="container-xxl py-5 gf-section">
    <div class="container">
        <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4 wow fadeInUp">
            <div>
                <p class="text-primary fw-semibold mb-2">Ressources éducatives</p>
                <h2 class="display-6 mb-0">Nos articles récents</h2>
            </div>
            <a href="{% url 'blog' %}" class="btn btn-outline-primary btn-sm rounded-pill">Voir toutes les
                ressources</a>
        </div>
        <div class="row g-4">
            {% for r in blog_ressources %}
            <div class="col-md-4 wow fadeInUp">
                <article class="card h-100 border-0 shadow-sm gf-blog-card-home overflow-hidden">
                    {% if r.image_principale %}
                    <div class="gf-blog-card__thumb">
                        <img src="{{ r.image_principale.url }}" alt="{{ r.titre }}" class="gf-blog-card__img">
                    </div>
                    {% endif %}
                    <div class="card-body">
                        <span class="badge bg-primary bg-opacity-10 text-primary mb-2">{{ r.get_type_display }}</span>
                        <h3 class="h6 fw-bold">
                            <a href="{% url 'blog_article' r.slug %}"
                                class="text-decoration-none text-dark stretched-link">{{ r.titre }}</a>
                        </h3>
                        <p class="small text-muted mb-0">{{ r.extrait|truncatewords:16 }}</p>
                    </div>
                </article>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{# ——— SECTION 7 : Équipe (contenu éditable ici — images dans static/img/) ——— #}
<section class="container-fluid bg-light py-5 gf-section">
    <div class="container">
        <h2 class="display-6 mb-5 text-center wow fadeInUp">Une équipe engagée à vos côtés</h2>
        <div class="row g-4 justify-content-center mb-4">

            {# Membre 1 — photo : static/img/team-1.jpg #}
            <div class="col-md-6 col-lg-5 wow fadeInUp">
                <article class="card border-0 shadow-sm h-100 gf-team-card overflow-hidden">
                    <div class="gf-team-card__media">
                        <img src="{% static 'images/ginni50.png' %}" alt="Dr Dieudonné Gini" class="gf-team-card__photo"
                            loading="lazy">
                        <div class="gf-team-card__overlay">
                            <p class="small text-white mb-2 fw-semibold">Découvrir nos liens</p>
                            <div class="gf-team-card__socials">
                                {% include "partials/gf_team_social_links.html" %}
                            </div>
                        </div>
                    </div>
                    <div class="card-body text-center p-4">
                        <h3 class="h6 fw-bold mb-1">Dr Dieudonné Gini</h3>
                        <p class="small text-primary mb-2">Médecin stagiaire, éducateur thérapeutique &amp; CEO de
                            Ginifollow</p>
                        <!--  <p class="small text-muted mb-0">Médecin généraliste avec un intérêt particulier pour
                            l'éducation
                            thérapeutique et le suivi des maladies chroniques. Il coordonne l'accompagnement des
                            patients sur la
                            plateforme.</p> -->
                    </div>
                </article>
            </div>

            {# Membre 2 — photo : static/img/team-2.jpg #}
            <div class="col-md-6 col-lg-5 wow fadeInUp" data-wow-delay="0.08s">
                <article class="card border-0 shadow-sm h-100 gf-team-card overflow-hidden">
                    <div class="gf-team-card__media">
                        <img src="{% static 'images/ginni30.jpg' %}" alt="Mangala Patricia" class="gf-team-card__photo"
                            loading="lazy">
                        <div class="gf-team-card__overlay">
                            <p class="small text-white mb-2 fw-semibold">Découvrir nos liens</p>
                            <div class="gf-team-card__socials">
                                {% include "partials/gf_team_social_links.html" %}
                            </div>
                        </div>
                    </div>
                    <div class="card-body text-center p-4">
                        <h3 class="h6 fw-bold mb-1">Dr Christina Milolo</h3>
                        <p class="small text-primary mb-2">Médecin stagiaire, éducateur thérapeutique &amp; Responsable
                            opérationnelle</p>
                    </div>
                </article>
            </div>

        </div>
        <div class="text-center">
            <a href="{% url 'apropos' %}" class="btn btn-primary rounded-pill px-4 wow fadeInUp">Découvrir notre
                équipe</a>
        </div>
    </div>
</section>

{# ——— Témoignages (contenu éditable ici — images dans static/img/) ——— #}
<section class="container-xxl py-5 gf-section gf-testimonials">
    <div class="container">
        <div class="text-center mb-4 wow fadeInUp">
            <p class="text-primary fw-semibold mb-2">Ils nous font confiance</p>
            <h2 class="display-6">Témoignages</h2>
        </div>
        <div id="gfTestimonialCarousel" class="carousel slide carousel-fade wow fadeInUp" data-bs-ride="carousel"
            data-bs-interval="6000">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#gfTestimonialCarousel" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Témoignage 1"></button>
                <button type="button" data-bs-target="#gfTestimonialCarousel" data-bs-slide-to="1"
                    aria-label="Témoignage 2"></button>
                <button type="button" data-bs-target="#gfTestimonialCarousel" data-bs-slide-to="2"
                    aria-label="Témoignage 3"></button>
            </div>
            <div class="carousel-inner rounded-4 shadow-lg overflow-hidden">

                {# Témoignage 1 — photo : static/img/testimonial-1.jpg #}
                <div class="carousel-item active">
                    <div class="gf-testimonial-slide">
                        <div class="row g-0 align-items-center">
                            <div class="col-md-4">
                                <img src="{% static 'images/ginni27.jpg' %}" class="gf-testimonial-slide__img"
                                    alt="Marie K." loading="lazy">
                            </div>
                            <div class="col-md-8 p-4 p-lg-5">
                                <i class="bi bi-quote text-primary fs-2 opacity-50"></i>
                                <p class="lead mb-3 gf-testimonial-text">« Grâce aux rappels, je ne rate plus mes
                                    prises. L'accompagnateur m'a aidée à comprendre quand consulter sans paniquer. »</p>
                                <p class="mb-0 fw-bold">Joseph Masengo</p>
                                <p class="small text-muted">Kinshasa</p>
                            </div>
                        </div>
                    </div>
                </div>

                {# Témoignage 2 — photo : static/img/testimonial-2.jpg #}
                <div class="carousel-item">
                    <div class="gf-testimonial-slide">
                        <div class="row g-0 align-items-center">
                            <div class="col-md-4">
                                <img src="{% static 'images/ginni28.jpg' %}" class="gf-testimonial-slide__img"
                                    alt="Jean-Paul M." loading="lazy">
                            </div>
                            <div class="col-md-8 p-4 p-lg-5">
                                <i class="bi bi-quote text-primary fs-2 opacity-50"></i>
                                <p class="lead mb-3 gf-testimonial-text">« J'avais des signes que j'ignorais.
                                    L'orientation m'a permis d'aller voir le bon spécialiste à temps. »</p>
                                <p class="mb-0 fw-bold">Joel Mombele</p>
                                <p class="small text-muted">Lubumbashi</p>
                            </div>
                        </div>
                    </div>
                </div>

                {# Témoignage 3 — photo : static/img/testimonial-3.jpg #}
                <div class="carousel-item">
                    <div class="gf-testimonial-slide">
                        <div class="row g-0 align-items-center">
                            <div class="col-md-4">
                                <img src="{% static 'images/ginni26.jpg' %}" class="gf-testimonial-slide__img"
                                    alt="Grace T." loading="lazy">
                            </div>
                            <div class="col-md-8 p-4 p-lg-5">
                                <i class="bi bi-quote text-primary fs-2 opacity-50"></i>
                                <p class="lead mb-3 gf-testimonial-text">« Le suivi quotidien et les rendez-vous en
                                    visio me rassurent. Je me sens moins seule face à ma maladie. »</p>
                                <p class="mb-0 fw-bold">Prisca Mukinzi</p>
                                <p class="small text-muted">Goma</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#gfTestimonialCarousel"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Précédent</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#gfTestimonialCarousel"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Suivant</span>
            </button>
        </div>
    </div>
</section>

{# ——— SECTION 8 : FAQ ——— #}
<section class="container-xxl py-5 gf-section bg-light">
    <div class="container" style="max-width: 760px;">
        <h2 class="display-6 text-center mb-4 wow fadeInUp">Questions fréquentes</h2>
        <div class="accordion accordion-flush gf-faq wow fadeInUp" id="gfFaq">
            <div class="accordion-item border-0 mb-2 shadow-sm rounded-3 overflow-hidden">
                <h3 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#faq1">Est-ce un diagnostic médical ?</button>
                </h3>
                <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#gfFaq">
                    <div class="accordion-body small text-muted">Non. GiniFollow ne pose pas de diagnostic et ne
                        prescrit aucun traitement. Nous accompagnons et orientons vers les soins appropriés.</div>
                </div>
            </div>
            <div class="accordion-item border-0 mb-2 shadow-sm rounded-3 overflow-hidden">
                <h3 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#faq2">Comment se déroule le suivi ?</button>
                </h3>
                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#gfFaq">
                    <div class="accordion-body small text-muted">Par appel vidéo (Google Meet) ou messagerie (WhatsApp
                        Business), selon votre choix et les créneaux publiés sur l'agenda.</div>
                </div>
            </div>
            <div class="accordion-item border-0 shadow-sm rounded-3 overflow-hidden">
                <h3 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#faq3">Mes données sont-elles confidentielles ?</button>
                </h3>
                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#gfFaq">
                    <div class="accordion-body small text-muted">Oui. Vos informations de santé sont traitées avec
                        confidentialité, uniquement pour l'accompagnement. <a href="{% url 'confidentialite' %}">En
                            savoir plus</a>.</div>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— SECTION 9 : CONTACT ——— #}
<section class="container-xxl py-5 gf-section" id="contact">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 650px;">
            <p class="text-primary fw-semibold mb-2">Une question ? Besoin d'assistance ?</p>
            <h2 class="display-6 fw-bold mb-3">Contactez notre équipe</h2>
            <p class="text-muted small mb-0">
                Notre équipe d'accompagnateurs et de professionnels de santé est à votre écoute pour vous guider,
                répondre à vos questions et vous accompagner.
            </p>
        </div>

        <div class="row g-4 g-lg-5 align-items-center">
            <!-- Colonne gauche : Image d'assistance & Infos de contact -->
            <div class="col-lg-5 wow fadeInUp" data-wow-delay="0.2s">
                <div class="position-relative rounded-4 overflow-hidden shadow-lg bg-light p-3">
                    <img src="{% static 'images/ginni53.png' %}" class="img-fluid rounded-3 w-100 object-fit-cover"
                        alt="Assistance GiniFollow" style="max-height: 400px;" loading="lazy">
                    <div class="p-4 bg-white rounded-3 shadow-sm mt-3">
                        <h4 class="h5 fw-bold mb-3 text-dark">
                            <i class="bi bi-headset text-primary me-2"></i>Besoin d'aide immédiate ?
                        </h4>
                        <ul class="list-unstyled small text-muted mb-0">
                            <li class="mb-2 d-flex align-items-center gap-2">
                                <i class="bi bi-telephone-fill text-primary fs-6"></i>
                                <span>Téléphone : <a href="tel:+{{ support_whatsapp_intl }}"
                                        class="fw-bold text-dark text-decoration-none">{{ support_phone }}</a></span>
                            </li>
                            <li class="mb-2 d-flex align-items-center gap-2">
                                <i class="fab fa-whatsapp text-success fs-5"></i>
                                <span>WhatsApp : <a href="https://wa.me/{{ support_whatsapp_intl }}" target="_blank"
                                        rel="noopener noreferrer" class="fw-bold text-success text-decoration-none">+{{
                                        support_whatsapp_intl }}</a></span>
                            </li>
                            <li class="d-flex align-items-center gap-2">
                                <i class="bi bi-clock-history text-primary fs-6"></i>
                                <span>Disponibilité : du Lundi au Samedi, 08h00 - 20h00</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Colonne droite : Formulaire de contact -->
            <div class="col-lg-7 wow fadeInUp" data-wow-delay="0.3s">
                <div class="bg-white p-4 p-md-5 rounded-4 border shadow-sm">
                    <h3 class="h4 fw-bold mb-3 text-dark">Envoyez-nous un message</h3>
                    <p class="text-muted small mb-4">
                        Remplissez les informations ci-dessous, nous vous répondrons dans les plus brefs délais par
                        e-mail ou téléphone.
                    </p>

                    <form method="post" action="{% url 'contact' %}">
                        {% csrf_token %}

                        {# Pot de miel (Honeypot Anti-Robot) - Champ invisible #}
                        <div style="display:none !important; opacity:0; position:absolute; left:-9999px;"
                            aria-hidden="true">
                            <input type="text" name="website_hp" tabindex="-1" autocomplete="off" value="">
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="contact_nom" class="form-label small fw-bold text-dark">Nom complet <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="nom" id="contact_nom"
                                    class="form-control form-control-lg rounded-3" placeholder="Votre nom" required>
                            </div>
                            <div class="col-md-6">
                                <label for="contact_email" class="form-label small fw-bold text-dark">Email de contact
                                    <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="contact_email"
                                    class="form-control form-control-lg rounded-3" placeholder="exemple@email.com"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label for="contact_telephone" class="form-label small fw-bold text-dark">Numéro de
                                    téléphone</label>
                                <input type="tel" name="telephone" id="contact_telephone"
                                    class="form-control form-control-lg rounded-3" placeholder="+243 ...">
                            </div>
                            <div class="col-md-6">
                                <label for="contact_sujet" class="form-label small fw-bold text-dark">Sujet <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="sujet" id="contact_sujet"
                                    class="form-control form-control-lg rounded-3"
                                    placeholder="Ex: Question sur un forfait" required>
                            </div>
                            <div class="col-12">
                                <label for="contact_message" class="form-label small fw-bold text-dark">Votre message
                                    <span class="text-danger">*</span></label>
                                <textarea name="message" id="contact_message" rows="4" class="form-control rounded-3"
                                    placeholder="Expliquez-nous votre demande en quelques phrases..."
                                    required></textarea>
                            </div>
                            <div class="col-12 mt-4">
                                <button type="submit"
                                    class="btn btn-primary btn-lg rounded-pill px-5 fw-bold shadow-sm w-100 w-sm-auto">
                                    <i class="bi bi-send-fill me-2"></i>Envoyer mon message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

{# ——— CTA final ——— #}
<section class="container-xxl pb-5 gf-section">
    <div class="container">
        <div class="gf-cta-final text-center text-white rounded-4 p-4 p-lg-5 wow fadeInUp">
            <h2 class="h2 fw-bold mb-3">Prenez votre santé au sérieux, sans rester seul</h2>
            <p class="opacity-90 mb-4 small">Ce service ne remplace pas une consultation médicale.</p>
            <a href="{% url 'tarifs' %}" class="btn btn-light btn-lg rounded-pill px-5 fw-semibold">Commencer
                maintenant</a>
        </div>
    </div>
</section>

{# Modal vidéo présentation #}
<div class="modal fade" id="gfVideoModal" tabindex="-1" aria-labelledby="gfVideoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg overflow-hidden">
            <div class="modal-header border-0 bg-dark text-white">
                <h2 class="modal-title h5" id="gfVideoModalLabel">Présentation GiniFollow</h2>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>
            <div class="modal-body p-0 bg-dark text-center">
                <div class="ratio ratio-16x9">
                    <video controls playsinline preload="metadata" class="w-100 h-100 object-fit-cover"
                        id="gfPresentationVideo">
                        <source src="{% static 'images/gini45.mp4' %}" type="video/mp4">
                        Votre navigateur ne prend pas en charge la lecture de vidéos HTML5.
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    (function () {
        var modal = document.getElementById('gfVideoModal');
        if (modal) {
            modal.addEventListener('hidden.bs.modal', function () {
                var video = modal.querySelector('video');
                if (video) {
                    video.pause();
                    video.currentTime = 0;
                }
            });
        }



        function animateCounter(el) {
            var target = parseInt(el.getAttribute('data-gf-count'), 10);
            if (isNaN(target)) return;
            var duration = 1400;
            var start = 0;
            var startTime = null;
            function step(ts) {
                if (!startTime) startTime = ts;
                var p = Math.min((ts - startTime) / duration, 1);
                var eased = 1 - Math.pow(1 - p, 3);
                el.textContent = Math.floor(start + (target - start) * eased);
                if (p < 1) requestAnimationFrame(step);
                else el.textContent = target;
            }
            requestAnimationFrame(step);
        }

        var statsObserved = false;
        var statsSection = document.getElementById('stats');
        if (statsSection && 'IntersectionObserver' in window) {
            var obs = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && !statsObserved) {
                        statsObserved = true;
                        document.querySelectorAll('[data-gf-count]').forEach(animateCounter);
                        obs.disconnect();
                    }
                });
            }, { threshold: 0.25 });
            obs.observe(statsSection);
        } else {
            document.querySelectorAll('[data-gf-count]').forEach(animateCounter);
        }
    })();
</script>
{% endblock %}