ludikevent_crm/templates/revervation/contact.twig

{% extends 'revervation/base.twig' %}

{% block title %}Contact Ludik Event | Devis Location Structures Gonflables{% endblock %}
{% block description %}Besoin d'un devis express ? Contactez Ludik Event, expert en châteaux gonflables et animations dans l'Aisne (02). Réponse garantie en moins de 2h !{% endblock %}
{% block breadcrumb_json %}
    ,{
    "@type": "ListItem",
    "position": 1,
    "name": "Nous contact",
    "item": "{{ url('reservation_contact') }}"
    }
{% endblock %}

{% block body %}
    <utm-event event="view_contact"></utm-event>

    <div class="min-h-screen bg-gray-50/50 font-sans antialiased pb-20">

        {# --- HEADER --- #}
        <div class="max-w-6xl mx-auto pt-16 pb-12 px-4">
            <nav class="flex justify-center space-x-2 text-xs mb-8 uppercase tracking-[0.2em] font-black">
                <a href="{{ url('reservation') }}" class="text-slate-900 hover:text-indigo-600 transition">ACCUEIL</a>
                <span class="text-slate-300">/</span>
                {# Correction : text-amber-500 -> text-amber-700 (Contraste sur fond gris) #}
                <span class="text-amber-700">Contact</span>
            </nav>

            <div class="flex flex-col md:flex-row items-end justify-between gap-6 border-b border-slate-200 pb-8">
                <div>
                    <h1 class="text-5xl md:text-7xl font-black text-slate-900 uppercase tracking-tighter italic leading-none">
                        Parlons <span class="text-[#f39e36]">Ensemble</span>
                    </h1>
                    {# Correction : text-slate-500 -> text-slate-600 #}
                    <p class="mt-4 text-slate-600 font-medium italic">Une question ? Un devis ? Notre équipe d'experts vous répond.</p>
                </div>
                <div class="hidden md:block text-right">
                    {# Correction : text-slate-400 -> text-slate-600 #}
                    <p class="text-[10px] font-black text-slate-600 uppercase tracking-[0.3em] mb-1">Délai de réponse</p>
                    <p class="text-sm font-bold text-slate-900 italic">Moins de 2 heures</p>
                </div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-6">

                {# 1. FORMULAIRE (Bento Large) #}
                <div class="md:col-span-8 bg-white p-8 md:p-12 rounded-[3rem] shadow-sm border border-slate-100">
                    <h2 class="text-2xl font-black text-slate-900 uppercase italic mb-8 tracking-tight">Envoyer un <span class="text-[#f39e36]">Message</span></h2>

                    {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            {# Correction : text-slate-400 -> text-slate-600 #}
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-600 ml-2">Votre Nom</label>
                            {{ form_widget(form.name, {'attr': {'class': 'w-full bg-slate-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 transition-all font-medium', 'placeholder': 'Ex: Dupont'}}) }}
                        </div>
                        <div class="space-y-2">
                            {# Correction : text-slate-400 -> text-slate-600 #}
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-600 ml-2">Votre Prénom</label>
                            {{ form_widget(form.surname, {'attr': {'class': 'w-full bg-slate-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 transition-all font-medium', 'placeholder': 'Ex: Jean'}}) }}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            {# Correction : text-slate-400 -> text-slate-600 #}
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-600 ml-2">Téléphone</label>
                            {{ form_widget(form.phone, {'attr': {'class': 'w-full bg-slate-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 transition-all font-medium', 'placeholder': '06 .. .. .. ..'}}) }}
                        </div>
                        <div class="space-y-2">
                            {# Correction : text-slate-400 -> text-slate-600 #}
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-600 ml-2">Email</label>
                            {{ form_widget(form.email, {'attr': {'class': 'w-full bg-slate-50 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-blue-500 transition-all font-medium', 'placeholder': 'jean@exemple.fr'}}) }}
                        </div>
                    </div>

                    <div class="space-y-2">
                        {# Correction : text-slate-400 -> text-slate-600 #}
                        <label class="text-[10px] font-black uppercase tracking-widest text-slate-600 ml-2">Votre projet / Question</label>
                        {{ form_widget(form.message, {'attr': {'class': 'w-full bg-slate-50 border-none rounded-3xl px-6 py-4 focus:ring-2 focus:ring-blue-500 transition-all font-medium h-40', 'placeholder': 'Dites-nous tout sur votre événement...'}}) }}
                    </div>

                    <button type="submit" class="w-full md:w-auto px-6 py-4 bg-[#f39e36] text-white rounded-2xl font-black uppercase tracking-widest hover:bg-slate-900 hover:-translate-y-1 transition-all shadow-xl shadow-blue-100">
                        Envoyer ma demande ⚡
                    </button>
                    {{ form_end(form) }}
                </div>

                {# 2. INFOS DE CONTACT (Bento Side) #}
                <div class="md:col-span-4 space-y-6">

                    {# Tuile Téléphone #}
                    <div class="bg-[#f39e36] p-8 rounded-[2.5rem] shadow-xl text-white relative overflow-hidden group">
                        <div class="absolute -right-4 -bottom-4 text-7xl opacity-10 group-hover:scale-110 transition-transform">📞</div>
                        {# Correction : opacity-80 -> opacity-100 (pour contraste blanc sur bleu) #}
                        <p class="text-[10px] font-black uppercase tracking-widest mb-4 opacity-100">Appel direct</p>
                        <a href="tel:0614172447" class="text-2xl font-black italic hover:text-amber-300 transition-colors tracking-tighter">06 14 17 24 47</a>
                    </div>

                    {# Tuile Email #}
                    <div class="bg-slate-900 p-8 rounded-[2.5rem] shadow-xl text-white relative overflow-hidden group border border-slate-800">
                        <div class="absolute -right-4 -bottom-4 text-7xl opacity-10 group-hover:scale-110 transition-transform">✉️</div>
                        {# Correction : opacity-60 -> opacity-90 #}
                        <p class="text-[10px] font-black uppercase tracking-widest mb-4 opacity-90">Par écrit</p>
                        <a href="mailto:lilian@ludikevent.fr" class="text-lg font-bold italic hover:text-blue-400 transition-colors break-words">lilian@ludikevent.fr</a>
                    </div>

                    {# Tuile Services #}
                    <div class="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
                        {# Correction : text-slate-400 -> text-slate-600 #}
                        <h3 class="text-[10px] font-black uppercase tracking-widest mb-6 text-slate-600 italic">À votre service</h3>
                        <ul class="space-y-4">
                            <li class="flex items-center gap-3">
                                <span class="text-blue-600 font-bold">✓</span>
                                <span class="text-sm font-bold text-slate-700 italic">Expertise technique</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="text-blue-600 font-bold">✓</span>
                                <span class="text-sm font-bold text-slate-700 italic">Livraison flexible</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="text-blue-600 font-bold">✓</span>
                                <span class="text-sm font-bold text-slate-700 italic">Large choix de structures</span>
                            </li>
                        </ul>
                    </div>

                    {# Tuile Localisation #}
                    <div class="bg-amber-400 p-8 rounded-[2.5rem] shadow-sm flex flex-col justify-between">
                        <div>
                            <p class="text-[10px] font-black text-amber-900 uppercase tracking-widest mb-2">Secteur d'intervention</p>
                            <p class="text-sm font-black text-amber-900 italic">Aisne (02) & Hauts-de-France</p>
                        </div>
                        <div class="mt-4 flex gap-1">
                            <div class="h-1 w-12 bg-amber-900/20 rounded-full"></div>
                            <div class="h-1 w-4 bg-amber-900/20 rounded-full"></div>
                        </div>
                    </div>

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