{% extends 'base.html.twig' %}
{% block title %}Comment utilisez-vous Bubul ? — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' with { cardClass: 'w-full max-w-lg' } %}
{% block heading %}
<div class="w-full max-w-2xl text-center mb-6 sm:mb-10 px-2">
    <h1 class="text-2xl sm:text-3xl font-semibold text-gray-800 mb-3 leading-snug">Qui va utiliser Bubul ?</h1>
    <p class="text-sm sm:text-base text-gray-500 leading-relaxed">On adapte votre expérience en moins de 30 secondes.</p>
</div>
{% endblock %}
{% block card %}
    <form method="POST" action="{{ path('app_welcome') }}" id="usage-form" class="w-full">
        <input type="hidden" name="step" value="usage">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        <input type="hidden" name="usage" id="usage-value">
        <div class="flex flex-col sm:flex-row gap-4 sm:gap-5 items-stretch">

            {# ── B2C — Particulier ── #}
            <button type="button"
                    onclick="document.getElementById('usage-value').value='b2c'; document.getElementById('usage-form').submit();"
                    class="flex-1 flex flex-col items-center text-center p-6 sm:p-7 border-2 border-gray-200 rounded-2xl bg-white hover:border-primary hover:shadow-md transition-all duration-200 group cursor-pointer">
                <div class="mb-4 sm:mb-5 flex justify-center">
                    {% include '_atoms/logo/logo.html.twig' with {
                        variant: 'simple',
                        size: 'fluid',
                        class: 'w-12 h-12 sm:w-14 sm:h-14'
                    } only %}
                </div>
                <div class="font-bold text-gray-900 group-hover:text-primary mb-2 text-base sm:text-lg">Particulier</div>
                <div class="text-xs sm:text-sm text-gray-500 leading-relaxed w-full min-h-[3rem] sm:min-h-[3.5rem]">
                    Pour les formateurs, enseignants et créateurs solo
                </div>
            </button>

            {# ── B2B — Établissement ── #}
            <button type="button"
                    onclick="document.getElementById('usage-value').value='b2b'; document.getElementById('usage-form').submit();"
                    class="flex-1 flex flex-col items-center text-center p-6 sm:p-7 border-2 border-gray-200 rounded-2xl bg-white hover:border-violet-400 hover:shadow-md transition-all duration-200 group cursor-pointer">
                <div class="mb-4 sm:mb-5 flex justify-center">
                    {% include '_atoms/logo/logo.html.twig' with {
                        variant: 'simple',
                        size: 'fluid',
                        tint: 'cohorts',
                        class: 'w-12 h-12 sm:w-14 sm:h-14'
                    } only %}
                </div>
                <div class="font-bold text-gray-900 group-hover:text-violet-700 mb-2 text-base sm:text-lg">Établissement</div>
                <div class="text-xs sm:text-sm text-gray-500 leading-relaxed w-full min-h-[3rem] sm:min-h-[3.5rem]">
                    Pour les écoles, entreprises et centres de formation
                </div>
            </button>

        </div>
    </form>
{% endblock %}
{% endembed %}
{% endblock %}