{% extends 'base.html.twig' %}
{% block title %}Votre domaine — 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-md'} %}
{% block heading %}
<div class="w-full max-w-md text-center mb-3 sm:mb-6">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-800 mb-2 whitespace-nowrap">Quel est votre domaine ?</h1>
    <p class="text-sm text-gray-400">On vous guide vers les bons outils dès le premier jour.</p>
</div>
{% endblock %}
{% block card %}
<div data-controller="welcome-role">

    <form method="POST" action="{{ path('app_welcome') }}" data-welcome-role-target="form">
        <input type="hidden" name="step" value="role">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        <input type="hidden" name="redirect_to" data-welcome-role-target="redirectInput" value="">

        <div class="relative mb-5">
            <div class="absolute inset-y-0 left-3.5 flex items-center pointer-events-none">
                {% include '_atoms/icon/icon.html.twig' with {name: 'user-id', size: 'sm', colorPrimary: '#9ca3af', colorSecondary: '#9ca3af'} only %}
            </div>
            <div class="absolute inset-y-0 right-3.5 flex items-center pointer-events-none">
                {% include '_atoms/icon/icon.html.twig' with {name: 'chevron-down', size: 'sm', colorPrimary: '#9ca3af', colorSecondary: '#9ca3af'} only %}
            </div>
            <select name="role"
                    data-welcome-role-target="select"
                    data-action="change->welcome-role#onSelect"
                    class="w-full pl-10 pr-10 py-3 border border-gray-200 rounded-xl text-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary appearance-none cursor-pointer">
                <option value="">Choisissez votre domaine…</option>
                {% for slug, domain in constant('App\\Config\\WelcomeConfig::DOMAINS') %}
                <option value="{{ slug }}">{{ domain.label }}</option>
                {% endfor %}
            </select>
        </div>

        {# Cartes outils — apparaissent après sélection #}
        <div data-welcome-role-target="toolsSection" class="hidden mb-5">
            <div class="flex items-center gap-2 mb-3">
                <div class="flex-1 h-px bg-gray-100"></div>
                <p class="text-xs text-gray-400 px-2">Recommandé pour <strong data-welcome-role-target="selectedLabel" class="text-gray-600"></strong></p>
                <div class="flex-1 h-px bg-gray-100"></div>
            </div>
            <div class="flex flex-col gap-2">
                {% for slug, tool in constant('App\\Config\\WelcomeConfig::TOOLS_DISPLAY') %}
                {% set colors = tool_color_details[slug] ?? {bg: '#F3F4F6', primary: '#6B7280'} %}
                <button type="button"
                        data-welcome-role-target="toolCard"
                        data-slug="{{ slug }}"
                        data-route="{{ tool.route }}"
                        data-action="click->welcome-role#selectTool"
                        class="hidden flex items-center gap-3 p-3 bg-white border-2 border-gray-100 rounded-xl hover:border-primary hover:bg-blue-50 transition-all duration-150 text-left group cursor-pointer">
                    <div class="w-10 h-10 rounded-xl flex-shrink-0 flex items-center justify-center" style="background-color: {{ colors.bg }};">
                        {% include '_atoms/icon/icon.html.twig' with {name: tool.icon, size: 'md', colorPrimary: colors.primary, colorSecondary: colors.primary} only %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="font-semibold text-sm text-gray-900 group-hover:text-primary">{{ tool.label }}</div>
                        <div class="text-xs text-gray-400 leading-snug">{{ tool.description }}</div>
                    </div>
                    {% include '_atoms/icon/icon.html.twig' with {name: 'arrow-right', size: 'sm', colorPrimary: '#d1d5db', colorSecondary: '#d1d5db'} only %}
                </button>
                {% endfor %}
            </div>
        </div>

        {% include '_atoms/button/button.html.twig' with {label: 'Accéder à Bubul 🚀', type: 'submit', variant: 'primary', width: 'full'} only %}
    </form>

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