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

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

{% block page_header %}
<div class="container-fluid page-header py-5 mb-0 wow fadeIn" data-wow-delay="0.1s"
    style="background-image: url('{% static 'images/ginni7.jpg' %}');">
    <div class="container py-5 position-relative" style="z-index: 2;">
        <div class="mb-3 gf-breadcrumb-slot">
            {% include "partials/gf_page_breadcrumb.html" with breadcrumb_current="À propos" %}
        </div>
        <h1 class="display-5 text-white mb-3">À propos de GiniFollow</h1>
        <p class="lead text-white mb-2">Le suivi qui sécurise, l'accompagnement qui rassure.</p>
        <p class="text-white-50 mb-0" style="max-width: 720px;">
            GiniFollow est une plateforme de suivi thérapeutique et d'orientation médicale conçue pour accompagner les
            personnes vivant avec des maladies chroniques et aider à reconnaître les signes d'alerte nécessitant une
            prise en charge médicale.
        </p>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container-xxl py-5">
    <div class="container">

        <section class="mb-5 pb-4 border-bottom wow fadeInUp">
            <h2 class="h3 fw-bold mb-3">Pourquoi avons-nous créé GiniFollow ?</h2>
            <p class="text-muted mb-2">Trop de personnes interrompent leurs traitements. Trop de symptômes sont ignorés
                jusqu'à devenir graves.</p>
            <p class="mb-4">Nous avons créé GiniFollow pour rapprocher le suivi, renforcer l'accompagnement et
                encourager une meilleure orientation médicale — sans remplacer votre médecin traitant.</p>

            <div class="card border-0 shadow-lg rounded-4 overflow-hidden mt-4">
                <div class="position-relative bg-dark">
                    <video id="gfAproposVideo" autoplay loop muted playsinline controls class="w-100 d-block rounded-4"
                        style="max-height: 480px; object-fit: cover;">
                        <source src="{% static 'images/gini46.mp4' %}" type="video/mp4">
                        Votre navigateur ne prend pas en charge la lecture de vidéos HTML5.
                    </video>

                    {# Bouton pour activer/désactiver le son en un clic #}
                    <button type="button" id="gfUnmuteBtn"
                        class="btn btn-dark bg-opacity-75 text-white border border-light border-opacity-25 btn-sm rounded-pill position-absolute top-0 end-0 m-3 shadow d-flex align-items-center gap-2"
                        style="z-index: 10;">
                        <i class="bi bi-volume-up-fill text-warning"></i>
                        <span id="gfUnmuteText">Activer le son</span>
                    </button>
                </div>
            </div>
        </section>

        <section class="mb-5 wow fadeInUp">
            <h2 class="h3 fw-bold text-center mb-4">Mission, vision et valeurs</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body">
                            <h3 class="h6 text-primary fw-bold">Mission</h3>
                            <p class="small text-muted mb-0">Faciliter un accompagnement thérapeutique régulier et une
                                orientation médicale responsable.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body">
                            <h3 class="h6 text-primary fw-bold">Vision</h3>
                            <p class="small text-muted mb-0">Rendre le suivi santé plus accessible, humain et rassurant.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body">
                            <h3 class="h6 text-primary fw-bold">Valeurs</h3>
                            <ul class="small text-muted mb-0 ps-3">
                                <li>Bienveillance</li>
                                <li>Confidentialité</li>
                                <li>Responsabilité</li>
                                <li>Éducation santé</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-5 wow fadeInUp">
            <h2 class="h3 fw-bold mb-4">Comment nous vous accompagnons</h2>
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="bg-light rounded-3 p-4 h-100 border border-primary border-opacity-25">
                        <h3 class="h5 mb-3"><i class="bi bi-heart-pulse text-primary me-2"></i>Volet 1 — Suivi
                            thérapeutique</h3>
                        <p class="small mb-2">Pour les personnes vivant avec une maladie chronique :</p>
                        <ul class="small mb-3">
                            <li>Rappels et suivi des traitements</li>
                            <li>Journal quotidien (mesures, symptômes)</li>
                            <li>Rendez-vous avec un accompagnateur (visio ou messagerie)</li>
                            <li>Éducation thérapeutique personnalisée</li>
                        </ul>
                        {# Liste éditable — maladies accompagnées #}
                        <p class="small text-muted mb-0">Maladies accompagnées : Hypertension artérielle, Diabète sucré,
                            Asthme, VIH/SIDA, Drépanocytose, Glaucome, BPCO, Épilepsie.</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="bg-white rounded-3 p-4 h-100 shadow-sm border">
                        <h3 class="h5 mb-3"><i class="bi bi-geo-alt text-primary me-2"></i>Volet 2 — Orientation
                            médicale</h3>
                        <p class="small mb-2">Pour les personnes sans maladie chronique suivie sur la plateforme :</p>
                        <ul class="small mb-0">
                            <li>Reconnaissance des signes d'alerte</li>
                            <li>Orientation vers le spécialiste ou l'établissement adapté</li>
                            <li>Prise en compte de votre lieu de résidence</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {# ——— Notre équipe (éditable ici — photos : static/img/team-1..2.jpg) ——— #}
        <section class="mb-5">
            <h2 class="h3 fw-bold mb-4 text-center">Notre équipe</h2>
            <p class="text-center text-muted small mb-4">Survolez une photo pour découvrir nos réseaux et nous
                contacter.</p>
            <div class="row g-4 justify-content-center">

                {# Membre 1 — photo : 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>
                        </div>
                    </article>
                </div>

                {# Membre 2 — photo : 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>
        </section>

        <section class="mb-5 p-4 rounded-3 border bg-light wow fadeInUp">
            <h2 class="h5 fw-bold mb-2">Votre confidentialité est une priorité</h2>
            <p class="small text-muted mb-3">Les informations partagées sur GiniFollow sont traitées avec
                confidentialité et utilisées uniquement dans le cadre du suivi et de l'accompagnement.</p>
            <a href="{% url 'confidentialite' %}" class="btn btn-outline-primary btn-sm rounded-pill">Lire notre
                engagement confidentialité</a>
        </section>

        <section class="gf-cta-block text-center text-white rounded-3 p-4 p-lg-5 wow fadeInUp">
            <h2 class="h4 fw-bold mb-2">Besoin d'un accompagnement ?</h2>
            <p class="opacity-90 mb-4 small">Ce service ne remplace pas une consultation médicale, ne pose pas de
                diagnostic et ne prescrit aucun traitement.</p>
            <div class="d-flex flex-wrap gap-3 justify-content-center">
                <a href="{% url 'tarifs' %}" class="btn btn-light btn-lg rounded-pill px-4">Commencer maintenant</a>
                <a href="{% url 'blog' %}" class="btn btn-outline-light btn-lg rounded-pill px-4">Découvrir le blog</a>
                <a href="tel:+{{ support_whatsapp_intl }}" class="btn btn-outline-light btn-lg rounded-pill px-4"><i
                        class="bi bi-telephone me-1"></i>{{ support_phone }}</a>
            </div>
        </section>

    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var video = document.getElementById('gfAproposVideo');
        var btn = document.getElementById('gfUnmuteBtn');
        var text = document.getElementById('gfUnmuteText');

        function toggleSound() {
            if (!video) return;
            video.muted = !video.muted;
            if (!video.muted) {
                if (text) text.textContent = 'Désactiver le son';
                if (btn) btn.classList.replace('btn-dark', 'btn-primary');
                video.play();
            } else {
                if (text) text.textContent = 'Activer le son';
                if (btn) btn.classList.replace('btn-primary', 'btn-dark');
            }
        }

        if (btn) {
            btn.addEventListener('click', function (e) {
                e.stopPropagation();
                toggleSound();
            });
        }

        if (video) {
            video.addEventListener('volumechange', function () {
                if (!video.muted && text) {
                    text.textContent = 'Désactiver le son';
                    if (btn) btn.classList.replace('btn-dark', 'btn-primary');
                } else if (video.muted && text) {
                    text.textContent = 'Activer le son';
                    if (btn) btn.classList.replace('btn-primary', 'btn-dark');
                }
            });
        }
    });
</script>
{% endblock %}