{#
 # ============================================================================
 # ORGANISM: LANDING FAQ
 # ============================================================================
 #
 # Enhanced FAQ section with icons and grid-template-rows accordion animation.
 # Fully parameterized: all text content passed via Twig parameters.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre  | Type   | Defaut                              | Description                    |
 # |------------|--------|-------------------------------------|--------------------------------|
 # | eyebrow    | string | 'FAQ'                               | Mono label above title         |
 # | title      | string | 'Questions <span...>fréquentes</span>' | H2 title (HTML allowed)     |
 # | subtitle   | string | 'Tout ce que vous devez savoir...'  | Subtitle below title           |
 # | questions  | array  | (default Bubul FAQ)                 | [{question, answer, icon}]     |
 # | class      | string | ''                                  | Additional CSS classes         |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # Default (Bubul main FAQ):
 # {% include '_organisms/landing/faq.html.twig' only %}
 #
 # Custom FAQ for a tool page:
 # {% include '_organisms/landing/faq.html.twig' with {
 #     eyebrow: 'FAQ SAM',
 #     title: 'Questions sur SAM',
 #     questions: samFaqItems
 # } only %}
 #
 # ============================================================================
 #}

{% set eyebrow = eyebrow ?? 'FAQ' %}
{% set accentColor = accentColor ?? null %}
{% set accentColorDark = accentColorDark ?? accentColor %}
{% if accentColor and title is not defined %}
    {% set gtStyle = 'background:linear-gradient(135deg,' ~ accentColor ~ ',' ~ accentColorDark ~ ');-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;' %}
    {% set title = 'Questions <span style="' ~ gtStyle ~ '">fréquentes</span>' %}
{% else %}
    {% set title = title ?? 'Questions <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">fréquentes</span>' %}
{% endif %}
{% set subtitle = tagline ?? subtitle ?? 'Tout ce que vous devez savoir sur Bubul.' %}
{% set class = class ?? '' %}
{% set freemiumTokens = freemiumTokens ?? 50000 %}
{% set freemiumTokensFormatted = freemiumTokens|number_format(0, ',', ' ') %}


{% set defaultQuestions = [
    {
        question: "Qu'est-ce que Bubul exactement ?",
        answer: 'Bubul est une plateforme IA pédagogique qui centralise <strong>9 outils de création de contenus</strong> (Moodia, Scormia, Slidia, Castia, Monalisia, Serenia, Pixia, Promptly et SAM) dans une interface unique. Conçue par des pédagogues pour des pédagogues, elle vous permet de créer des cours LMS, des modules SCORM, des présentations, des podcasts, des infographies, des images et des prompts réutilisables en quelques minutes.',
        icon: 'help'
    },
    {
        question: 'Mes données sont-elles en sécurité ?',
        answer: 'La protection de vos données est une priorité. Vos données sont hébergées exclusivement sur des <strong>serveurs européens (France)</strong> et ne sont jamais utilisées pour entraîner des modèles IA. Bubul a pour objectif de devenir pleinement souverain et nous travaillons activement à nous rapprocher des exigences RGPD.',
        icon: 'shield'
    },
    {
        question: 'Que signifient les tokens dans les plans tarifaires ?',
        answer: "Les tokens sont l'unité de mesure de l'IA générative. Chaque action (générer un cours, créer une présentation, envoyer un message, générer une image) consomme des tokens. Un compteur en temps réel vous permet de suivre votre consommation depuis le tableau de bord.",
        icon: 'bolt'
    },
    {
        question: 'Puis-je essayer Bubul gratuitement ?',
        answer: "Oui ! Bubul propose une <strong>version gratuite</strong> avec " ~ freemiumTokensFormatted ~ " tokens par mois — sans carte bancaire requise. Accédez immédiatement aux outils de création et créez autant que vous le souhaitez dans la limite de votre enveloppe mensuelle.",
        icon: 'earth'
    },
    {
        question: 'Quels outils sont inclus dans chaque formule ?',
        answer: 'Tous les plans incluent <strong>les outils de création</strong> : Moodia (cours LMS depuis PDF), Slidia (présentations PowerPoint), Castia (podcasts audio), Monalisia (infographies), Serenia (assistant conversationnel), Pixia (illustrations IA) et Promptly (bibliothèque de prompts). <strong>Scormia</strong> (éditeur SCORM) est inclus dans les offres Pro, Expert et Entreprise, et SAM (suivi apprenants Moodle) dans l\'offre Entreprise. Le reste de la différence entre les plans porte sur l\'enveloppe mensuelle de tokens.',
        icon: 'book'
    },
    {
        question: "Qu'est-ce que le service LMS avec dotTilde ?",
        answer: "En partenariat avec dotTilde, Bubul propose un <strong>service complet d'infrastructure LMS</strong> : installation, configuration, hébergement sur serveurs européens, maintenance et mises à jour automatiques. C'est la solution idéale si vous n'avez pas de LMS ou souhaitez migrer vers une infrastructure sécurisée.",
        icon: 'book'
    },
    {
        question: 'Pourquoi affichez-vous l\'empreinte carbone ?',
        answer: 'Parce que nous croyons qu\'un <strong>usage responsable de l\'IA commence par la transparence</strong>. Chaque génération dans Bubul affiche en temps réel les Wh consommés et le CO2 estimé. Un compteur mensuel vous permet de suivre l\'impact global de vos usages et de prendre des décisions éclairées.',
        icon: 'lightbulb-bolt'
    }
] %}

{% set questions = questions ?? defaultQuestions %}

{% if accentColor %}
<style>
    #faq .faq-item:hover { border-color: {{ accentColor }}33 !important; }
    #faq .faq-item.open { border-color: {{ accentColor }}44 !important; }
</style>
{% endif %}

<section class="py-28 lg:py-32 bg-white {{ class }}" id="faq">
    <div class="max-w-[800px] mx-auto px-6 lg:px-8">

        {# ===== Header ===== #}
        <div class="text-center mb-16 reveal">
            <p class="font-secondary text-xs font-bold tracking-[3px] mb-4 uppercase"
               style="{{ accentColor ? 'color: ' ~ accentColor : 'color: var(--color-primary)' }}">{{ eyebrow }}</p>
            <h2 class="font-display text-3xl md:text-4xl lg:text-[2.75rem] font-bold mb-4 text-[#1A2B3F]">
                {{ title|raw }}
            </h2>
            <p class="text-lg max-w-[500px] mx-auto text-[#5A6B7F]">
                {{ subtitle }}
            </p>
        </div>

        {# ===== FAQ List ===== #}
        <div class="space-y-3">
            {% for item in questions %}
                <div class="faq-item border border-[#E4EBF5] rounded-2xl overflow-hidden transition-all duration-300 bg-white reveal {{ loop.index > 1 ? 'reveal-delay-' ~ (loop.index - 1) : '' }}" data-index="{{ loop.index }}">
                    <button
                        type="button"
                        class="faq-question w-full flex items-center gap-3.5 px-5 py-[18px] text-left bg-transparent border-none cursor-pointer transition-colors duration-200"
                        onclick="toggleFaq(this)"
                    >
                        <span class="w-9 h-9 rounded-[10px] flex items-center justify-center shrink-0"
                              style="{{ accentColor ? 'background: ' ~ accentColor ~ '12' : 'background: var(--color-primary-muted)' }}">
                            {% if accentColor %}
                                {% include '_atoms/icon/icon.html.twig' with { name: item.icon, size: 'sm', colorPrimary: accentColor, colorSecondary: accentColor, opacitySecondary: '0.3' } only %}
                            {% else %}
                                {% include '_atoms/icon/icon.html.twig' with { name: item.icon, size: 'sm', color: 'primary' } only %}
                            {% endif %}
                        </span>
                        <span class="flex-1 font-secondary text-[0.95rem] font-semibold text-[#1A2B3F]">{{ item.question }}</span>
                        <span class="faq-chevron w-7 h-7 rounded-lg flex items-center justify-center shrink-0 transition-all duration-base"
                              style="{{ accentColor ? 'background:' ~ accentColor ~ '12; color:' ~ accentColor : 'background:#F3F4F6; color:#8A96A8' }}">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M6 9l6 6 6-6"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer grid transition-[grid-template-rows] duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)]">
                        <div class="overflow-hidden">
                            <div class="faq-answer-text px-5 pb-5 pl-[70px] opacity-0 transition-opacity duration-base delay-100">
                                <p class="text-[0.9rem] leading-[1.7] text-[#5A6B7F] [&>strong]:text-[#1A2B3F]">{{ item.answer|raw }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

{# FAQPage JSON-LD — Rich snippets Google #}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {% for item in questions %}
        {
            "@type": "Question",
            "name": {{ item.question|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }},
            "acceptedAnswer": {
                "@type": "Answer",
                "text": {{ item.answer|striptags|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }}
            }
        }{{ not loop.last ? ',' : '' }}
        {% endfor %}
    ]
}
</script>

<script>
function toggleFaq(btn) {
    var item = btn.closest('.faq-item');
    var allItems = document.querySelectorAll('.faq-item');

    allItems.forEach(function(el) {
        if (el !== item) { el.classList.remove('open'); }
    });

    item.classList.toggle('open');
}
</script>