<?php
// PHP non essentiel pour cette page, mais conservé pour l'intégration future
error_reporting(E_ALL);
ini_set('display_errors', 1);
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
// Vous pouvez ajouter ici la logique de connexion à la base de données si les articles d'aide sont dynamiques.
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centre d'Aide - Olomi</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <style>
        /* ======================================= */
        /* BASE & PALETTE (Coordonnée au thème Inscription) */
        /* ======================================= */
        :root {
            --primary-dark: #1d3557; /* Bleu très foncé (Titre/Boutons) */
            --accent-medium: #457b9d; /* Bleu moyen (Fond/Hover) */
            --accent-light: #a8dadc; /* Bleu clair (Secondaire) */
            --page-bg: #f1faee; /* Fond très clair */
            --white: #ffffff;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--page-bg);
            color: var(--primary-dark);
            min-height: 100vh;
            padding-top: 50px;
        }

        /* Conteneur principal */
        .help-container {
            max-width: 1000px;
            margin: 40px auto;
            padding: 20px;
            background: var(--white);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* Titre de la page */
        .help-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 3px solid var(--accent-light);
        }

        .help-header h1 {
            color: var(--primary-dark);
            font-weight: 700;
            font-size: 2.5rem;
        }

        /* ======================================= */
        /* ACCORDÉON (FAQ) */
        /* ======================================= */
        .accordion-item {
            border: 1px solid var(--accent-light);
            margin-bottom: 10px;
            border-radius: 10px !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .accordion-button {
            background-color: var(--white);
            color: var(--primary-dark);
            font-weight: 600;
            padding: 15px 20px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--accent-medium); /* Couleur lors de l'ouverture */
            color: var(--white);
            box-shadow: none;
        }

        .accordion-button:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(69, 123, 157, 0.25);
            border-color: var(--accent-medium);
        }
        
        .accordion-button::after {
            filter: grayscale(100%) brightness(0.5); 
        }

        .accordion-button:not(.collapsed)::after {
            filter: brightness(10) invert(1) !important; /* Rendre la flèche blanche */
        }

        .accordion-body {
            background-color: var(--page-bg);
            color: #333;
            padding: 20px;
            border-top: 1px solid var(--accent-light);
            font-size: 1rem;
            line-height: 1.6;
        }

        .accordion-body a {
            color: var(--accent-medium);
            font-weight: 500;
        }
        
        .accordion-body ul, .accordion-body ol {
            padding-left: 20px;
            margin-top: 10px;
        }

        /* ======================================= */
        /* SECTION CONTACT RAPIDE */
        /* ======================================= */
        .contact-section {
            background-color: var(--primary-dark);
            color: var(--white);
            padding: 30px;
            border-radius: 10px;
            margin-top: 40px;
            text-align: center;
        }

        .contact-section h3 {
            font-weight: 700;
            margin-bottom: 20px;
        }

        .contact-btn {
            background-color: var(--accent-light);
            color: var(--primary-dark);
            border: none;
            padding: 12px 30px;
            font-weight: 700;
            border-radius: 30px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .contact-btn:hover {
            background-color: var(--white);
            color: var(--primary-dark);
            transform: scale(1.05);
        }

        /* Boutons de navigation fixes */
        .navigation-buttons {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        @media (max-width: 600px) {
            .help-container { margin: 20px auto; }
            .help-header h1 { font-size: 2rem; }
            .accordion-button { font-size: 1rem; }
            .navigation-buttons { bottom: 10px; right: 10px; }
        }

    </style>
</head>
<body>

    <div class="help-container">
        <div class="help-header">
            <p><i class="fas fa-headset me-2" style="color: var(--accent-medium);"></i> Centre d'Aide Olomi</p>
            <h1>Comment pouvons-nous vous aider ?</h1>
            <p class="text-muted">Trouvez rapidement les réponses à vos questions dans notre FAQ.</p>
        </div>

        <div class="accordion" id="helpAccordion">
            
            <h2 class="h4 mt-4 mb-3 text-start" style="color: var(--accent-medium);"><i class="fas fa-user-circle me-2"></i> Mon Compte</h2>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Comment créer mon compte Olomi ?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        L'inscription est simple ! Cliquez sur le bouton **"S'inscrire"** dans la barre de navigation. Remplissez le formulaire avec votre nom, prénom, postnom, sexe et adresse e-mail. Un lien d'activation vous sera envoyé par e-mail pour finaliser la création de votre mot de passe.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        J'ai oublié mon mot de passe. Que faire ?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Sur la page de connexion, cliquez sur le lien **"Mot de passe oublié ?"**. Entrez votre adresse e-mail, et nous vous enverrons un lien pour réinitialiser votre mot de passe en toute sécurité.
                    </div>
                </div>
            </div>

            <h2 class="h4 mt-4 mb-3 text-start" style="color: var(--accent-medium);"><i class="fas fa-video me-2"></i> Contenu et Accès</h2>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Les enseignements et prédications sont-ils gratuits ?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Oui, la majorité de notre contenu (prédications, certaines conférences) est accessible **gratuitement**. Cependant, certains séminaires ou cours approfondis peuvent nécessiter un **abonnement premium** ou un accès payant unique. Le paiement sert à accéder à ce contenu spécifique.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        Comment participer aux conférences en direct ?
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Les liens vers les conférences en direct sont publiés sur la section **"Conférences"** de notre site. Vous devez être connecté à votre compte Olomi pour vous inscrire et recevoir les notifications. L'heure de début est toujours affichée en heure locale.
                    </div>
                </div>
            </div>
            
            <h2 class="h4 mt-4 mb-3 text-start" style="color: var(--accent-medium);"><i class="fas fa-mobile-alt me-2"></i> Application Mobile & Tarification</h2>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSix">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                        L'application Olomi est-elle disponible sur le Play Store ?
                    </button>
                </h2>
                <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Oui, l'application officielle **Olomi** est disponible en téléchargement sur le **Google Play Store** (pour les appareils Android). Vous pouvez la trouver en cherchant "Olomi" ou en cliquant sur le lien direct suivant : **[Lien direct vers l'application Olomi sur Play Store]**.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSeven">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                        Le téléchargement de l'application Olomi est-il payant ?
                    </button>
                </h2>
                <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        **L'application Olomi est GRATUITE à télécharger** sur le Google Play Store. 
                        <br>
                        Le paiement concerne l'accès à la **bibliothèque de contenu premium** (vidéos, audios, enseignements détaillés et textes exclusifs), et non l'application elle-même. Cet accès se fait via un **abonnement** ou un **achat unique** (un achat dans l'application) géré par le système de facturation de Google Play.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingEight">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                        Quels modes de paiement sont acceptés pour l'achat de contenu (vidéo, audio, texte) ?
                    </button>
                </h2>
                <div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Tous les paiements pour l'accès au contenu premium sont traités via le système de facturation de **Google Play**. Les méthodes acceptées dans votre région incluent généralement :
                        <br>
                        <ul>
                            <li><i class="fas fa-credit-card me-2"></i> Cartes de crédit ou de débit (Visa, Mastercard, etc.)</li>
                            <li><i class="fas fa-mobile me-2"></i> **Réseaux Mobiles (Mobile Money)**, comme **Orange Money, Airtel Money, ou M-Pesa** (selon la disponibilité et l'intégration par Google Play dans votre pays).</li>
                            <li><i class="fas fa-wallet me-2"></i> Facturation via votre opérateur téléphonique (si disponible)</li>
                            <li><i class="fab fa-paypal me-2"></i> PayPal ou Solde Google Play (cartes cadeaux).</li>
                        </ul>
                        Pour gérer ou ajouter un mode de paiement pour vos achats de contenu, veuillez vous rendre dans les **Paramètres > Paiements et abonnements** de l'application Google Play Store.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingNine">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                        Comment annuler mon abonnement pour l'accès au contenu Premium ?
                    </button>
                </h2>
                <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        L'annulation doit être effectuée directement via le **Google Play Store** :
                        <ol>
                            <li>Ouvrez l'application **Google Play Store**.</li>
                            <li>Appuyez sur votre **icône de profil** en haut à droite.</li>
                            <li>Sélectionnez **Paiements et abonnements**, puis **Abonnements**.</li>
                            <li>Trouvez l'abonnement **Olomi** (Accès au Contenu Premium) et sélectionnez **Annuler l'abonnement**.</li>
                        </ol>
                        L'annulation prendra effet à la fin de la période de facturation en cours.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTen">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
                        Puis-je demander un remboursement pour un achat ou un abonnement ?
                    </button>
                </h2>
                <div id="collapseTen" class="accordion-collapse collapse" aria-labelledby="headingTen" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Les demandes de remboursement pour les applications et achats intégrés sont gérées conformément aux **politiques de Google Play**.
                        <br>
                        Veuillez consulter la page d'aide de Google Play pour soumettre une demande de remboursement : [Lien vers la Politique de Remboursement de Google Play].
                    </div>
                </div>
            </div>

            <h2 class="h4 mt-4 mb-3 text-start" style="color: var(--accent-medium);"><i class="fas fa-cogs me-2"></i> Questions Techniques</h2>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingEleven">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">
                        L'application ne s'ouvre pas ou j'ai un bug. Que faire ?
                    </button>
                </h2>
                <div id="collapseEleven" class="accordion-collapse collapse" aria-labelledby="headingEleven" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        La plupart des problèmes peuvent être résolus en suivant ces étapes :
                        <ul>
                            <li>**Vérifiez votre connexion Internet.**</li>
                            <li>**Redémarrez l'application :** Forcez l'arrêt et relancez-la.</li>
                            <li>**Videz le cache de l'application :** Allez dans les paramètres de votre téléphone > Applications > Olomi > Stockage > Vider le cache.</li>
                            <li>**Mettez à jour l'application :** Assurez-vous d'avoir la dernière version depuis le Play Store.</li>
                        </ul>
                        Si le problème persiste, veuillez nous contacter via le bouton ci-dessous en précisant le modèle de votre téléphone et la version d'Android.
                    </div>
                </div>
            </div>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFive">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                        Le site est-il adapté aux téléphones mobiles (PWA) ?
                    </button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Oui ! Olomi est une Progressive Web App (PWA). Sur la plupart des navigateurs mobiles, vous devriez voir une option **"Installer l'application"** ou "Ajouter à l'écran d'accueil". Cela vous permet d'utiliser Olomi comme une application native, même hors ligne pour certains contenus.
                    </div>
                </div>
            </div>

            <h2 class="h4 mt-4 mb-3 text-start" style="color: var(--accent-medium);"><i class="fas fa-file-contract me-2"></i> Informations Légales</h2>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwelve">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwelve" aria-expanded="false" aria-controls="collapseTwelve">
                        Où puis-je consulter vos Conditions d'Utilisation et votre Politique de Confidentialité ?
                    </button>
                </h2>
                <div id="collapseTwelve" class="accordion-collapse collapse" aria-labelledby="headingTwelve" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        Ces documents sont accessibles en tout temps et sont essentiels pour l'utilisation de la plateforme :
                        <ul>
                            <li>**Conditions d'Utilisation (CGU) :** <a href="/cgu.php" target="_blank">Cliquez ici pour lire les CGU</a></li>
                            <li>**Politique de Confidentialité :** <a href="/confidentialite.php" target="_blank">Cliquez ici pour lire la Politique de Confidentialité</a></li>
                        </ul>
                        Ces liens se trouvent également sur la page de l'application sur le Google Play Store.
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="contact-section">
            <h3>Votre question n'est pas ici ?</h3>
            <p>Notre équipe de support est là pour vous aider. Contactez-nous directement.</p>
            <a href="/Contacter.php" class="contact-btn"><i class="fas fa-envelope me-2"></i> propheteEmmanuel1@gmail.com</a>
        </div>
    </div>
    
    <div class="navigation-buttons">
        <a href="/index.php" class="btn btn-primary" title="Retour à l'Accueil" style="background-color: var(--accent-medium); border-color: var(--accent-medium);"><i class="fas fa-home"></i></a>
        <a href="#helpAccordion" class="btn btn-primary" title="Haut de page" style="background-color: var(--accent-medium); border-color: var(--accent-medium);"><i class="fas fa-arrow-up"></i></a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>