{#
 # ============================================================================
 # ORGANISM: LANDING FEATURES
 # ============================================================================
 #
 # Grid section displaying feature cards with icons. Fully parameterized.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre  | Type   | Defaut                              | Description                 |
 # |------------|--------|-------------------------------------|-----------------------------|
 # | surtitle   | string | 'POURQUOI CHOISIR BUBUL'            | Eyebrow text above title    |
 # | title      | string | 'La solution complète...'           | Main H2 title               |
 # | features   | array  | (default 6 Bubul features)          | [{icon, title, description}]|
 # | class      | string | ''                                  | Additional CSS classes      |
 # | id         | string | 'features'                          | HTML anchor id              |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # {% include '_organisms/landing/features.html.twig' with {
 #     surtitle: 'CE QUE SAM FAIT POUR VOUS',
 #     title: 'Tout votre Moodle, dans un seul tableau de bord',
 #     features: samFeatures
 # } only %}
 #
 # ============================================================================
 #}

{% set surtitle = surtitle ?? 'POURQUOI CHOISIR BUBUL' %}
{% set title = title ?? 'La solution complète pour l\'enseignement' %}
{% set id = id ?? 'features' %}
{% set class = class ?? '' %}

{% set defaultFeatures = [
    {
        icon: 'rocket',
        title: 'Gain de temps massif',
        description: 'Transformez 8 heures de travail en 30 minutes. Libérez-vous des tâches répétitives et retrouvez du temps pour ce qui fait la différence : enseigner.'
    },
    {
        icon: 'fire',
        title: 'Intelligence pédagogique',
        description: 'Une IA qui pense pédagogie. Quiz, activités, ressources... tout est généré automatiquement et adapté à vos objectifs. Votre expertise, amplifiée par l\'intelligence artificielle.'
    },
    {
        icon: 'user-id',
        title: 'Support multi-formats',
        description: 'Donnez une seconde vie à vos contenus. PDF, PowerPoint, documents... Bubul transforme tout en ressources pédagogiques interactives. Vos supports existants deviennent des cours complets.'
    },
    {
        icon: 'message',
        title: 'Un assistant du quotidien',
        description: 'Votre assistant pédagogique quotidien automatisé par l\'IA. Moodia, Serenia et Slidia sont déjà disponibles. Bientôt : bots pédagogiques, vidéos et podcasts assistés par IA.'
    },
    {
        icon: 'chart',
        title: 'Un modèle vertueux',
        description: 'Usage responsable de l\'IA avec forfait en tokens et suivi en temps réel de votre empreinte écologique. Connexion OpenAI sécurisée par contrat. Instance IA souveraine prévue dès 2026.'
    },
    {
        icon: 'rocket',
        title: 'Bubul sera accessible quand ?',
        description: 'Beta gratuite limitée à 50 accès pour co-construire Bubul avec nous. Sortie publique prévue en janvier 2026. Chaque retour récompensé en tokens. Tarif préférentiel pour les premiers testeurs.'
    }
] %}

{% set features = features ?? defaultFeatures %}

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

        {# ===== Header ===== #}
        <div class="text-center mb-16">
            <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-4 uppercase">
                {{ surtitle }}
            </p>
            <h2 class="font-secondary text-3xl md:text-4xl lg:text-[2.5rem] font-bold text-gray-900">
                {{ title }}
            </h2>
        </div>

        {# ===== Features Grid ===== #}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {% for feature in features %}
                <div class="text-center p-4 sm:p-8">
                    {# Icon #}
                    <div class="flex justify-center mb-6">
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: feature.icon,
                            size: '2xl',
                            color: 'primary'
                        } only %}
                    </div>

                    {# Title #}
                    <h3 class="font-secondary text-xl font-semibold text-gray-900 mb-3 text-center">
                        {{ feature.title }}
                    </h3>

                    {# Description #}
                    <p class="text-gray-600 leading-relaxed text-center">
                        {{ feature.description }}
                    </p>
                </div>
            {% endfor %}
        </div>

    </div>
</section>