<div class="space-y-8 animate-fade-in">
    {# En-tête avec switch de mode #}
    <div class="border-b border-gray-100 pb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Modifier mon profil</h2>
            <p class="text-sm text-gray-500">Mettez à jour vos informations pour vos futurs contrats Ludik Event.</p>
        </div>
        <div class="flex items-center gap-2 bg-gray-100 p-1 rounded-xl w-fit">
            <span class="px-4 py-2 rounded-lg text-xs font-bold {{ customer.type == 'personal' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400' }}">Particulier</span>
            <span class="px-4 py-2 rounded-lg text-xs font-bold {{ customer.type == 'buisness' ? 'bg-white shadow-sm text-purple-600' : 'text-gray-400' }}">Professionnel</span>
        </div>
    </div>

    <form data-turbo="false" action="{{ path('gestion_contrat',{active:'profils'}) }}" method="POST" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">

            {# --- SECTION : IDENTITÉ --- #}
            <div class="space-y-4">
                <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                    Identité
                </h3>

                <div class="grid grid-cols-3 gap-4">
                    <div class="col-span-1">
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Civilité</label>
                        <select name="civ" class="w-full bg-white border border-gray-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all">
                            <option value="M." {{ customer.civ == 'M.' ? 'selected' }}>M.</option>
                            <option value="Mme" {{ customer.civ == 'Mme' ? 'selected' }}>Mme</option>
                        </select>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Prénom</label>
                        <input type="text" name="surname" value="{{ customer.surname }}" class="w-full bg-white border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1">Nom de famille</label>
                    <input type="text" name="name" value="{{ customer.name }}" class="w-full bg-white border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
            </div>

            {# --- SECTION : CONTACT --- #}
            <div class="space-y-4">
                <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                    Coordonnées
                </h3>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1">Adresse Email (Identifiant)</label>
                    <input type="email" name="email" value="{{ customer.email }}" class="w-full bg-gray-100 border border-gray-200 rounded-xl px-4 py-2.5 text-gray-500 cursor-not-allowed" readonly>
                    <p class="text-[10px] text-gray-400 mt-1 italic text-right">L'email ne peut être modifié pour des raisons de sécurité.</p>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1">Téléphone mobile</label>
                    <input type="tel" name="phone" value="{{ customer.phone }}" class="w-full bg-white border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-500 outline-none" placeholder="06 .. .. .. ..">
                </div>
            </div>

            {# --- SECTION : PROFESSIONNELLE (CONDITIONNELLE) --- #}
            {% if customer.type == 'buisness' %}
                <div class="md:col-span-2 bg-purple-50 p-6 rounded-3xl border border-purple-100 space-y-4">
                    <h3 class="text-sm font-bold text-purple-400 uppercase tracking-widest flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
                        Informations Entreprise
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-purple-700 mb-1">Numéro SIRET</label>
                            <input type="text" name="siret" value="{{ customer.siret }}" class="w-full bg-white border border-purple-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-purple-500 outline-none font-mono tracking-wider">
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        {# --- PIED DE FORMULAIRE --- #}
        <div class="pt-8 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-4">
            <div class="flex items-center gap-2 text-sm text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                Données sécurisées
            </div>
            <div class="flex gap-3 w-full sm:w-auto">
                <button type="reset" class="flex-1 sm:flex-none px-6 py-3 rounded-xl font-bold text-gray-500 hover:bg-gray-100 transition-all text-sm uppercase tracking-wide">
                    Annuler
                </button>
                <button type="submit" class="flex-1 sm:flex-none px-8 py-3 rounded-xl font-bold text-white bg-blue-600 hover:bg-blue-700 shadow-lg shadow-blue-200 transition-all text-sm uppercase tracking-wide">
                    Enregistrer les changements
                </button>
            </div>
        </div>
    </form>
</div>
