{{ partial:partials/background }}
<article class="relative __shuffle">
    <div class="flex flex-col items-center justify-center h-[50vh] bg-gradient-to-t from-white to-transparent px-8">
        <h1 class="h1 text-center">{{ title }}</h1>
        {{ if hero_texte_intro }}
            <div class="font-medium text-center max-w-2xl text-lg my-8">{{ hero_texte_intro }}</div>
        {{ /if }}
        {{ if hero_lien }}
            <a href="{{ hero_lien.url }}" class="btn--link mt-4">{{ hero_lien.text }}</a>
        {{ /if }}
        <div class="mt-8 flex flex-wrap justify-center items-center gap-4">
            {{ taxonomy:categorie }}
                <button class="font-medium border border-var-dark rounded-full py-1 px-3 transition [&.active]:bg-var-dark [&.active]:text-var-light __shuffle_filter" data-cat="{{ slug }}">{{ title }}</button>
            {{ /taxonomy:categorie }}
            <button class="font-medium border border-var-dark rounded-full py-1 px-3 transition [&.active]:bg-var-dark [&.active]:text-var-light __shuffle_filter_all">Tout</button>
        </div>
    </div>
    <div class="bg-var-light min-h-[50vh]">
        <div class="container opacity-0 animate-appear  __shuffle_grid">
            {{ collection from="faq"}}
                <div class="group relative w-[300px] lg:w-[33%] xl:w-[18%] aspect-video cursor-pointer lg:aspect-square mb-8 bg-l-grey rounded-xl p-4 __shuffle_item __modal_toggle" data-groups="{{ categorie }}{{ slug }}{{ /categorie }}" data-title="{{ title }}" data-text="{{ content }}">
                    <div class="font-semibold text-base lg:text-lg text-pretty pointer-events-none">{{ title }}</div>
                </div>
            {{ /collection }}
        </div>
    </div>
    <div class="fixed top-0 left-0 w-full h-full z-50 bg-dark bg-opacity-60 transition-all invisible [&.active]:visible group __modal">
        <div class="centered w-[calc(100%-4rem)] max-h-[calc(100vh-4rem)] sm:w-1/2 sm:min-h-1/3 overflow-y-auto bg-l-grey rounded-2xl flex flex-col justify-start p-8 z-10 scale-x-0 origin-center transition group-[&.active]:scale-x-100 ">
            <button class="cursor-pointer absolute top-6 right-6 border border-dark rounded-full __modal_close">{{ svg src="assets/images/arrow-straight" class="fill-dark w-10 rotate-180 pointer-events-none" }}</button>
            <h2 class="h2 mb-8 max-w-[calc(100%-4rem)] md:max-w-xl transition opacity-0 delay-300 group-[&.active]:opacity-100 text-pretty __modal_title"></h2>
            <div class="mb-4 transition opacity-0 delay-300 group-[&.active]:opacity-100 __modal_text"></div>
            <a href="" class="btn--secondary mt-auto ml-auto transition opacity-0 delay-300 group-[&.active]:opacity-100">Start planning</a>
        </div>
    </div>
</article>

{{# <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {{ if liste_de_questions }}
                {{ liste_de_questions }}
                    {
                        "@type": "Question",
                        "name": "{{ titre }}",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "{{ reponse | add_slashes | strip_tags }}"
                        }
                    }{{ unless last }},{{ /unless }}
                {{ /liste_de_questions }}
            {{ /if }}
        ]
    }
</script> #}}