{{ template "headersMenu.html" .}}

<section class="relative table w-full pb-16 bg-[url('../../assets/images/helpcenter.jpg')] bg-center bg-no-repeat bg-cover" style="margin-top:76px">
    <div class="absolute inset-0 bg-black opacity-80"></div>
    <div class="container">
        <div class="grid grid-cols-1 pt-8 text-center">
            <h3 class="text-md uppercase font-semibold leading-normal text-white md:text-lg md:leading-normal" style="letter-spacing:.2rem">{{ "Trouvez l'aide dont vous avez besoin" | t }}</h3>
        </div>
        <div class="pt-2 mt-4 text-center subcribe-form">
            <form class="relative mx-auto max-w-xl" method="get" action="/help">
                <input type="text" id="help" name="q" class="backdrop pt-4 ltr:pr-40 rtl:pl-40 pb-4 ltr:pl-6 rtl:pr-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white opacity-70 dark:bg-slate-900 border border-gray-100 dark:border-gray-700 text-2xl font-bold" placeholder="{{ "Votre question ou vos mots-clés..." | t }}">
                <button type="submit" class="btn absolute top-[2px] ltr:right-[3px] rtl:left-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-full">{{ "Rechercher" | t }}</button>
            </form>
        </div>
    </div>
</section>

<div class="relative">
    <div class="shape absolute right-0 sm:-bottom-px -bottom-[2px] left-0 overflow-hidden z-1 text-white dark:text-slate-900">
        <svg class="w-full h-auto" viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
        </svg>
    </div>
</div>

<section class="relative px-2 py-16 md:py-24">
    <div class="container">
        <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
            {{ range .Categories }}
            <div class="">
                <h5 class="text-xl font-semibold">{{ .Name | t }}</h5>
                <ul class="mt-4 list-none">
                {{ range .Faqs }}
                    <li class="mt-2"><a href="/help/{{ .ID }}/{{ .Slug }}" class="text-slate-400"><i class="text-indigo-600 fa fa-arrow-right ltr:mr-2 rtl:ml-2"></i>{{ .Title | t }}</a></li>
                {{ end }}
                </ul>
            </div>
            {{ end }}
        </div>
    </div>
    <div class="container px-4 mx-auto mt-24 text-center">
        <h2 class="mb-6 text-3xl font-bold">{{ "Vous n'avez pas trouvé de réponse à votre question ?" | t }}</h2>
        <p class="mx-auto mb-8 max-w-3xl text-xl">{{ "Notre équipe de support est disponible pour vous aider avec n'importe quelle question." | t }}</p>
        <div class="flex flex-wrap gap-6 justify-center">
          <a href="mailto:support@card.pm" class="flex items-center px-6 py-4 bg-white rounded-lg shadow-md transition-colors hover:bg-gray-50 text-dark">
            <i class="mx-2 text-xl fas fa-envelope text-primary"></i>
            <span class="font-semibold">support@card.pm</span>
          </a>
          <a href="tel:+33756990321" class="flex items-center px-6 py-4 bg-white rounded-lg shadow-md transition-colors hover:bg-gray-50 text-dark">
            <i class="mx-2 text-xl fas fa-phone-alt text-primary"></i>
            <span class="font-semibold">+33 7 56 99 03 21</span>
          </a>
        </div>
    </div>
</section>

{{ template "footerMenu.html" .}}