{% extends 'base.html.twig' %}
{% block title %}Les outils Bubul — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' %}
{% block heading %}
<div class="w-full max-w-md text-center mb-3 sm:mb-8">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-700 mb-2 leading-tight">Découvrez vos outils</h1>
    <p class="text-sm text-gray-500">Trois outils IA pour transformer votre pédagogie.</p>
</div>
{% endblock %}
{% block card %}
    <div class="flex flex-col gap-3 mb-3 sm:mb-6">
        <div class="flex items-center gap-4 p-4 bg-blue-50 border border-blue-100 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-gradient-middle to-gradient-end flex items-center justify-center text-white font-bold text-lg flex-shrink-0">M</div>
            <div>
                <div class="font-semibold text-gray-900 text-sm">Moodia</div>
                <div class="text-xs text-gray-500">Générez des cours Moodle depuis un PDF en quelques minutes</div>
            </div>
        </div>
        <div class="flex items-center gap-4 p-4 bg-purple-50 border border-purple-100 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">S</div>
            <div>
                <div class="font-semibold text-gray-900 text-sm">Slidia</div>
                <div class="text-xs text-gray-500">Créez des présentations PowerPoint avec l'IA</div>
            </div>
        </div>
        <div class="flex items-center gap-4 p-4 bg-green-50 border border-green-100 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">S</div>
            <div>
                <div class="font-semibold text-gray-900 text-sm">Serenia</div>
                <div class="text-xs text-gray-500">Assistant IA conversationnel avec contexte documentaire</div>
            </div>
        </div>
    </div>
    <form method="POST" action="{{ path('app_welcome') }}">
        <input type="hidden" name="step" value="tools">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        {% include '_atoms/button/button.html.twig' with {label: 'Continuer', type: 'submit', variant: 'primary', width: 'full'} only %}
    </form>
{% endblock %}
{% endembed %}
{% endblock %}