{# templates/contact/_form.html.twig #}
<form class="space-y-6" onsubmit="event.preventDefault(); alert('Formulaire de démonstration (pas d\'action backend).');">
    
    {# Nom Prénom #}
    <div>
        <label for="fullname" class="block text-sm font-medium text-gray-700 mb-1">Nom Prénom</label>
        <input type="text" id="fullname" name="fullname" class="w-full px-4 py-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow" placeholder="Jean Dupont" required>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {# Email #}
        <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow" placeholder="jean@exemple.fr" required>
        </div>
        
        {# Téléphone #}
        <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
            <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow" placeholder="06 12 34 56 78" required>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {# Type de prestation #}
        <div>
            <label for="service_type" class="block text-sm font-medium text-gray-700 mb-1">Type de prestation</label>
            <select id="service_type" name="service_type" class="w-full px-4 py-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow bg-white">
                <option value="">-- Choisir --</option>
                <option value="installation">Installation</option>
                <option value="entretien">Entretien</option>
                <option value="maintenance">Maintenance</option>
            </select>
        </div>

        {# Domaine d'intervention #}
        <div>
            <label for="domain" class="block text-sm font-medium text-gray-700 mb-1">Domaine d'intervention</label>
            <select id="domain" name="domain" class="w-full px-4 py-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow bg-white">
                <option value="">-- Choisir --</option>
                <option value="pac">Pompe à chaleur</option>
                <option value="chaudiere">Chaudières</option>
                <option value="climatisation">Climatisation</option>
                <option value="salle-de-bain">Salle de bain</option>
                <option value="chauffe-eau">Chauffe-eau</option>
                <option value="adoucisseurs">Adoucisseurs</option>
            </select>
        </div>
    </div>

    {# Message #}
    <div>
        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
        <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow" placeholder="Décrivez votre projet..." required></textarea>
    </div>

    {# Bouton Envoyer #}
    <div class="text-right">
        <button type="submit" class="bg-gray-800 text-white font-bold py-3 px-8 rounded hover:bg-gray-700 transition-colors shadow-lg w-full md:w-auto">
            Envoyer le message
        </button>
    </div>
</form>