{% extends 'base.html.twig' %}

{% block title %}FAQs{% endblock %}
{% block customStyle %}
    <style>
        .accordion-button {
            min-width:100%;
            text-align: left;
            padding: 2%;
            border: none;
            background-color:  #e7e7e7;
            color: black;
        }
        .accordion-button:hover {
            background-color: white;
            color: black;
            border: 2px solid #e7e7e7;
        }
        .accordion-button:active {
            background-color: #e7e7e7;
            color: black;
            border: 2px solid #e7e7e7;
        }

        .collapsed {
            border: none;
        }
    </style>
{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Besoin d'aide ?"}) }}
    
    <div class="container">

        <div class="text-center pb-2">
          <p class="section-title px-5">
            <span class="px-2">FAQS</span>
          </p>
          <h1 class="mb-4">Les réponses à vos questions</h1>
        </div>

        <div class="row flex-center">
            <div class="col justify-content-center">
                <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingOne">
                        <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                            Je viens de me procurer la CBA : comment j’active mon compte ?
                        </button>
                        </h4>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Bravo pour ton achat ! Utilise les codes que tu as créé à ton achat, et connecte toi ici : <a href="/parent/{{ user.id }}/survey1" target="_blank">Je me connecte</a>
                                <br /><br />
                                Voici une petite vidéo de toutes les étapes avant d’avoir accès à ton contenu, c’est super simple !
                                <br /><br />
                                <center>
                                    <video controls width="60%">
                                        <source src="/medias/videos/FAQ-video.mp4"
                                                type="video/mp4">
                                        Sorry, your browser doesn't support embedded videos.
                                    </video>
                                </center>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingTwo">
                        <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Je ne trouve pas l’application, où est-ce que je peux la télécharger ?
                        </button>
                        </h4>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Tu peux télécharger l’application ici : <br />
                                <br />
                                <a href="https://apps.apple.com/app/cool-baby-academy/id1644060573">
                                    <img src="/images/dispo-appstore.png" alt="Application Cool Baby Academy sur Apple"/>
                                </a>
                                <br /><br />
                                <a href="https://play.google.com/store/apps/details?id=com.evenetmoi.coolbabyacademy">
                                    <img src="/images/dispo-android.png" alt="Application Cool Baby Academy sur Android"/>
                                </a>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingThree">
                        <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Où se trouve mon contenu ? 
                        </button>
                        </h4>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Ton contenu est disponible à deux endroits : 
                                sur ton espace web, en cliquant sur ton <a href="/classes"><strong style="color:#4fbece;">tableau de bord</strong></a>, ou dans ton <strong style="color:#4fbece;">application mobile</strong>.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingFour">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
                                Je ne vois pas mon contenu ?
                            </button>
                        </h4>
                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Il peut y avoir plusieurs raisons à cela : 
                                <ul>
                                    <li>
                                        As-tu bien envoyé la date de naissance de ton bébé ? Si non merci de le faire <strong><a target="_blank" href="parent/{{ user.id }}/survey1">ici</a></strong> tu auras ensuite accès à ton contenu. 
                                    </li>
                                    <li>
                                        Si ton bébé n’a pas encore un mois, c’est normal ! Ton contenu arrivera à la date des 1 mois de ton bébé.
                                    </li> 
                                </ul>
                                Si tu n’es dans les deux situations précédentes, tu devrais avoir accès à ton contenu sur ton tableau de bord : <br />
                                Clique sur le menu, <strong style="color:#4fbece;">“Academy”</strong> puis <a href="/classes"><strong style="color:#4fbece;">“Tableau de bord”</strong></a> et retrouves tes audios et vidéos dans les parties “apaisement, développement, activités et news”.
                                <br /><br />
                                Si tu ne constate toujours aucun contenu, écris-nous à <strong>cba@evenetmoi.com</strong>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingFive">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                A quelle date se débloque mon nouveau contenu du mois ? 
                            </button>
                        </h4>
                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Le contenu se débloque <strong style="color:#4fbece;">tous les 30 jours</strong>, ce qui correspond environ au jour de naissance de ton bébé. 
                                Tu reçois un e-mail à chaque fois que ton nouveau contenu est disponible.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingSix">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                Le contenu déjà acquis reste disponible en cas de résiliation de mon abonnement à la CBA ?
                            </button>
                        </h4>
                        <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                               Oui le contenu déjà acquis sur la Cool Baby Academy restera <strong style="color:#4fbece;">disponible en cas de résiliation de l’abonnement</strong> sur ton espace web et sur ton application.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingSeven">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                Quand puis-je résilier mon abonnement ? Et qu’elle est la marche à suivre pour résilier mon abonnement ?
                            </button>
                        </h4>
                        <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Tu peux résilier ton abonnement à tout moment. <br /><br />
                                Dans le menu du haut sélectionne <strong style="color:#4fbece;">“Compte”</strong> puis <a href="https://even-et-moi.mykajabi.com/settings/account"><strong style="color:#4fbece;">“Mon abonnement”</strong></a>. <br />
                                Tu sera invitée à de nouveau te connecter pour des raisons de sécurité.<br /> 
                                Une fois connecté, en cliquant sur l'onglet <strong style="color:#4fbece;">"Informations de facturation"</strong> (en haut à droite), tu pourras te désabonner en sélectionnant le programme concerné.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingHeight">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHeight" aria-expanded="false" aria-controls="collapseHeight">
                                Comment mettre à jour mes coordonnées bancaires ?
                            </button>
                        </h4>
                        <div id="collapseHeight" class="accordion-collapse collapse" aria-labelledby="headingHeight" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Dans le menu du haut sélectionne <strong style="color:#4fbece;">“Compte”</strong> puis <a href="https://even-et-moi.mykajabi.com/settings/account"><strong style="color:#4fbece;">“Mon abonnement”</strong></a>. <br />
                                Tu seras invité à de nouveau te connecter pour des raisons de sécurité. <br />
                                Une fois connecté, en cliquant sur l'onglet <strong style="color:#4fbece;">"Informations de facturation"</strong> (en
                                haut à droite), tu pourras changer les informations concernant ta carte bancaire. <br />

                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingNine">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                                Où se trouvent les news du mois, à quelle date sont-elles disponibles ?
                            </button>
                        </h4>
                        <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Les news du mois sont disponibles au <strong style="color:#4fbece;">début de chaque mois</strong>, comprenant une vidéo et un magazine. <br />
                                Tu peux les découvrir dans ton onglet <a href="/bibliotheque"><strong style="color:#4fbece;">“Bibliothèque”</strong></a> sur ton <strong>espace web</strong> ou dans ton <strong>application mobile</strong>. <br />
                                Le magazine du mois est un pdf à télécharger.<br />

                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingTen">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
                                En cas de problème technique à qui je peux m'adresser ? 
                            </button>
                        </h4>
                        <div id="collapseTen" class="accordion-collapse collapse" aria-labelledby="headingTen" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Tu peux adresser un mail à l'adresse suivante: <strong style="color:#4fbece;">cba@evenetmoi.com</strong>

                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingEleven">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">
                                J’ai posé une question sur le forum, mais personne ne me répond !? 
                            </button>
                        </h4>
                        <div id="collapseEleven" class="accordion-collapse collapse" aria-labelledby="headingEleven" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Le forum est un lieu d’échange entre les mamans de l’academy. 
                                Elodie ou l’équipe d’Even et Moi n’y intervient pas. Pour contacter l’équipe technique merci de contacter : <strong style="color:#4fbece;">cba@evenetmoi.com</strong>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="headingTwelve">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwelve" aria-expanded="false" aria-controls="collapseTwelve">
                                Que faire en cas de problème de connexion ?
                            </button>
                        </h4>
                        <div id="collapseTwelve" class="accordion-collapse collapse" aria-labelledby="headingTwelve" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                               Tu peux adresser un mail à l'adresse suivante: <strong style="color:#4fbece;">cba@evenetmoi.com</strong>

                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="heading13">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse13" aria-expanded="false" aria-controls="collapse13">
                                Quand se déroulent les Lives ?
                            </button>
                        </h4>
                        <div id="collapse13" class="accordion-collapse collapse" aria-labelledby="heading13" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Les Lives de la CBA sont tous indiqués dans <a href="/planning"><strong style="color:#4fbece;">le planning</strong></a>, dans ton application et dans ton espace web. 
                                Tu peux réserver ta place en appuyant sur le bouton prévu pour cela !
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="heading14">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse14" aria-expanded="false" aria-controls="collapse14">
                                Pourquoi je ne peux pas réserver de place au live ?
                            </button>
                        </h4>
                        <div id="collapse14" class="accordion-collapse collapse" aria-labelledby="heading14" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Certains lives ont un <strong style="color:#4fbece;">nombre de places limitées</strong>. 
                                En effet les professionnels doivent pouvoir répondre à toutes les mamans présentes ! Mais pas d’inquiétude, il y a minimum 2 lives par semaines !
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="heading15">
                            <button style="min-width:100%;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
                                Je ne vois pas mon contenu
                            </button>
                        </h4>
                        <div id="collapse15" class="accordion-collapse collapse" aria-labelledby="heading15" data-bs-parent="#accordionExample">
                            <div class="accordion-body shadow p-3 mb-5 bg-white rounded">
                                Durant les périodes de mises à jour, il se peut que tu ais du mal à accéder à ton contenu.<br />
                                Dans ce cas, désinstalle l'application et réinstalle là pour corriger le problème.<br />
                                Si malgré tout le contenu ne s'affiche pas, envoie un mail à <strong>cba@evenetmoi.com</strong> pour signaler le problème.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr />

        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe01.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>

    </div>

{% endblock %}