{% extends 'base.html.twig' %}
{% block title %}Budget mensuel — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% set samColors = tool_color_details['sam'] ?? {primary: '#7C3AED', secondary: '#6D28D9', bg: '#EDE9FE'} %}
{% embed '_organisms/step-layout/step-layout.html.twig' with {blobColor: samColors.primary} %}
{% block logo %}
<a href="{{ path('app_landing') }}" class="inline-flex items-center gap-2 sm:gap-3 scale-75 sm:scale-100">
    {% include '_atoms/logo/logo-with-text.html.twig' with {showBadge: false, size: 'lg'} only %}
    <span class="text-gray-300 text-2xl font-light select-none">×</span>
    {% include '_atoms/logo/logo-with-text.html.twig' with {showBadge: false, size: 'lg', variant: 'sam'} only %}
</a>
{% endblock %}
{% block heading %}
<div class="w-full max-w-md text-center mb-6">
    <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-2 leading-snug">Une idée de votre budget mensuel ?</h1>
    <p class="text-sm text-gray-400">Sans engagement — ça aide notre équipe à préparer votre offre.</p>
</div>
{% endblock %}
{% block card %}
    <form method="POST" action="{{ path('app_welcome') }}" id="budget-form">
        <input type="hidden" name="step" value="budget">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        <input type="hidden" name="budget" id="budget-value">
        <div class="flex flex-col gap-3 mb-4">
            {% for value, info in {
                '<200':    {'label': 'Moins de 200 €/mois', 'sub': "Pour découvrir la plateforme",          'icon': 'wallet'},
                '200-500': {'label': '200 – 500 €/mois',    'sub': "Idéal pour les petites équipes",        'icon': 'rocket'},
                '500-1000':{'label': '500 – 1 000 €/mois',  'sub': "Pour les organisations en croissance",  'icon': 'star'},
                '1000+':   {'label': '1 000+ €/mois',       'sub': "Grands groupes, usage intensif",        'icon': 'crown'}
            } %}
                <button type="button"
                        onclick="document.getElementById('budget-value').value='{{ value }}'; document.getElementById('budget-form').submit();"
                        class="flex items-center gap-4 p-4 bg-white border-2 border-gray-100 rounded-2xl text-left hover:border-violet-400 hover:bg-violet-50 transition-all duration-150 shadow-sm group cursor-pointer">
                    <div class="w-10 h-10 rounded-xl flex-shrink-0 flex items-center justify-center bg-violet-50 group-hover:bg-violet-100 transition-colors">
                        {% include '_atoms/icon/icon.html.twig' with {name: info.icon, size: 'md', colorPrimary: '#7C3AED', colorSecondary: '#7C3AED'} only %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="font-semibold text-sm text-gray-900 group-hover:text-violet-700">{{ info.label }}</div>
                        <div class="text-xs text-gray-400 mt-0.5">{{ info.sub }}</div>
                    </div>
                    {% include '_atoms/icon/icon.html.twig' with {name: 'arrow-right', size: 'sm', colorPrimary: '#d1d5db', colorSecondary: '#d1d5db'} only %}
                </button>
            {% endfor %}
        </div>
        <a href="{{ path('app_welcome_team_moodle') }}" class="block text-center text-sm text-gray-400 hover:text-gray-600 transition-colors">Passer cette étape</a>
    </form>
{% endblock %}
{% endembed %}
{% endblock %}