{# templates/quote_request/multi_step_insurance_form.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Demande de devis d'assurance{% endblock %}

{% block header %}{% include 'partials/_header-no-item.html.twig' %}{% endblock %}

{% block content %}
    <div class="bg-gray-50 min-h-screen py-10"> {# Ajout de pt-24 pour l'espace du header #}
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto mb-8">
                <h1 class="text-3xl font-bold text-gray-900 text-center">Votre devis personnalisé</h1>
                <p class="mt-2 text-center text-gray-600">Complétez les informations en 3 étapes simples pour obtenir votre devis d'assurance</p>
            </div>

            {# Intégration du composant de formulaire multi-étapes avec nouvelle mise en page grid #}
            <div data-controller="scroll">
                {{ component('multistep_quote_form') }}
            </div>

            {# Informations complémentaires #}
            <div class="max-w-6xl mx-auto mt-12 bg-white shadow overflow-hidden rounded-lg">
                <div class="px-4 py-5 sm:px-6 bg-blue-50">
                    <h2 class="text-lg leading-6 font-medium text-blue-900">Pourquoi nous faire confiance ?</h2>
                </div>
                <div class="px-4 py-5 sm:p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div class="flex flex-col items-center text-center">
                            <div class="bg-blue-100 p-3 rounded-full mb-4">
                                <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                </svg>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Protection optimale</h3>
                            <p class="mt-2 text-sm text-gray-500">Des couvertures adaptées à vos besoins spécifiques pour une tranquillité d'esprit totale.</p>
                        </div>
                        <div class="flex flex-col items-center text-center">
                            <div class="bg-blue-100 p-3 rounded-full mb-4">
                                <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Tarifs compétitifs</h3>
                            <p class="mt-2 text-sm text-gray-500">Des prix justes et transparents pour toutes vos assurances, sans mauvaise surprise.</p>
                        </div>
                        <div class="flex flex-col items-center text-center">
                            <div class="bg-blue-100 p-3 rounded-full mb-4">
                                <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
                                </svg>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Accompagnement personnalisé</h3>
                            <p class="mt-2 text-sm text-gray-500">Un conseiller dédié à votre écoute pour vous accompagner dans toutes vos démarches.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}