{#
 # ============================================================================
 # ORGANISM: CONTACT FORM
 # ============================================================================
 # Section complète de contact — split layout deux colonnes.
 # Gauche : grand titre + checklist.
 # Droite : card formulaire sticky (AJAX via Stimulus landing--contact-form).
 #
 # PARAMETRES
 # | form         | FormView | requis | Symfony form view  |
 # | contactEmail | string   | requis | Email de contact   |
 # ============================================================================
 #}

<section class="relative overflow-hidden flex-1 flex flex-col justify-center pt-36 pb-16 sm:pt-32 lg:pt-36 lg:pb-20"
         data-controller="landing--contact-form">

    {# ── Background identique au hero landing ── #}
    <div class="absolute inset-0 bg-[#FAFCFF]"></div>
    <div class="absolute w-[600px] h-[600px] rounded-full opacity-[0.07] blur-[120px] -top-[200px] -left-[100px] pointer-events-none"
         style="background: radial-gradient(circle, #0C81E4 0%, #3AB8E8 100%);"></div>
    <div class="absolute w-[500px] h-[500px] rounded-full opacity-[0.05] blur-[100px] -bottom-[100px] right-[10%] pointer-events-none"
         style="background: radial-gradient(circle, #3AB8E8 0%, #00BCD4 100%);"></div>
    <div class="absolute w-[300px] h-[300px] rounded-full opacity-[0.04] blur-[80px] top-[30%] right-[30%] pointer-events-none"
         style="background: radial-gradient(circle, #00BCD4 0%, #0C81E4 100%);"></div>
    <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
         style="background-image: radial-gradient(circle, #0C81E4 1px, transparent 1px); background-size: 40px 40px;"></div>

    {# ── Contenu ── #}
    <div class="relative z-10 max-w-[1100px] mx-auto px-6 lg:px-8 w-full">
        <div class="grid grid-cols-1 lg:grid-cols-[1fr_440px] gap-12 lg:gap-20 items-center">

            {# ── Colonne gauche ── #}
            <div>

                {# Badge contextuel #}
                <div class="inline-flex items-center gap-2 rounded-full px-4 py-1.5 mb-7 border border-[#CCE4F8] bg-[#EBF5FD]">
                    <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
                    <span class="text-xs font-semibold text-primary tracking-wider uppercase">Contactez-nous</span>
                </div>

                <h1 class="font-display text-5xl sm:text-6xl font-bold leading-[1.05] mb-6 text-[#1A2B3F]">
                    Parlons de<br>
                    <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">
                        votre projet.
                    </span>
                </h1>

                <p class="text-[17px] text-[#5A6B7F] leading-relaxed mb-10 max-w-[400px]">
                    Une question, une démo ou une offre sur mesure —
                    décrivez votre besoin, notre équipe vous répondra.
                </p>

                {# Checklist #}
                <ul class="flex flex-col gap-3">
                    {% for item in [
                        'Découvrir Bubul avec une démo guidée',
                        'Choisir la formule adaptée à votre équipe',
                        "Être accompagné dans la prise en main",
                        "Explorer une collaboration ou un partenariat"
                    ] %}
                    <li class="flex items-center gap-3">
                        <span class="w-5 h-5 rounded-full flex-shrink-0 flex items-center justify-center"
                              style="background: linear-gradient(135deg, #0A6BC4, #3AB8E8); box-shadow: 0 2px 6px rgba(12,129,228,0.25);">
                            <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </span>
                        <span class="text-[15px] text-[#1A2B3F] font-medium">{{ item }}</span>
                    </li>
                    {% endfor %}
                </ul>

            </div>

            {# ── Colonne droite : formulaire ── #}
            <div class="lg:sticky lg:top-8">
                <div class="bg-white rounded-2xl border border-[#E4EBF5] shadow-[0_4px_32px_rgba(12,129,228,0.10),0_1px_4px_rgba(0,0,0,0.04)] overflow-hidden">

                    {# Barre accent gradient en haut de la card #}
                    <div class="h-[3px]" style="background: linear-gradient(90deg, #0C81E4, #3AB8E8, #00BCD4);"></div>

                    {# ── Contenu formulaire (masqué après envoi réussi) ── #}
                    <div data-landing--contact-form-target="formWrapper" class="p-6 sm:p-8">

                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-[#1A2B3F]">Parlez-nous de votre projet</h3>
                            <p class="text-sm text-[#8A9AB0] mt-1">
                                Les champs marqués <span class="text-primary font-semibold">*</span> sont obligatoires.
                            </p>
                        </div>

                        {# Erreur globale (rate limit, réseau) #}
                        <div data-global-error class="hidden mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-xl px-4 py-3"></div>

                        {{ form_start(form, {'attr': {
                            'novalidate': 'novalidate',
                            'class': 'flex flex-col gap-4',
                            'data-action': 'submit->landing--contact-form#submit'
                        }}) }}

                            {# Honeypot — caché aux humains, visible aux bots #}
                            <div style="display:none;visibility:hidden;" aria-hidden="true">
                                {{ form_row(form.website) }}
                            </div>

                            {# Prénom + Nom côte à côte #}
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-[13px] font-semibold text-[#374151] mb-1.5">
                                        Prénom <span class="text-primary">*</span>
                                    </label>
                                    {{ form_widget(form.firstName, {'attr': {'class': 'w-full border border-[#DDE5EF] rounded-xl px-3.5 py-2.5 text-sm text-[#1A2B3F] bg-white outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all', 'placeholder': 'Marie'}}) }}
                                    <p data-field-error="firstName" class="hidden text-xs text-red-500 mt-1"></p>
                                    {{ form_errors(form.firstName) }}
                                </div>
                                <div>
                                    <label class="block text-[13px] font-semibold text-[#374151] mb-1.5">
                                        Nom <span class="text-primary">*</span>
                                    </label>
                                    {{ form_widget(form.lastName, {'attr': {'class': 'w-full border border-[#DDE5EF] rounded-xl px-3.5 py-2.5 text-sm text-[#1A2B3F] bg-white outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all', 'placeholder': 'Dupont'}}) }}
                                    <p data-field-error="lastName" class="hidden text-xs text-red-500 mt-1"></p>
                                    {{ form_errors(form.lastName) }}
                                </div>
                            </div>

                            {# Email #}
                            <div>
                                <label class="block text-[13px] font-semibold text-[#374151] mb-1.5">
                                    Email professionnel <span class="text-primary">*</span>
                                </label>
                                {{ form_widget(form.email, {'attr': {'class': 'w-full border border-[#DDE5EF] rounded-xl px-3.5 py-2.5 text-sm text-[#1A2B3F] bg-white outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all', 'placeholder': 'marie@ecole.fr'}}) }}
                                <p data-field-error="email" class="hidden text-xs text-red-500 mt-1"></p>
                                {{ form_errors(form.email) }}
                            </div>

                            {# Organisation #}
                            <div>
                                <label class="block text-[13px] font-semibold text-[#374151] mb-1.5">
                                    Organisation
                                    <span class="font-normal text-[#A0AEC0] text-[12px]">— optionnel</span>
                                </label>
                                {{ form_widget(form.organisation, {'attr': {'class': 'w-full border border-[#DDE5EF] rounded-xl px-3.5 py-2.5 text-sm text-[#1A2B3F] bg-white outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all', 'placeholder': 'Lycée Victor Hugo'}}) }}
                            </div>

                            {# Sujet #}
                            <div>
                                <label class="block text-[13px] font-semibold text-[#374151] mb-1.5">
                                    Sujet <span class="text-primary">*</span>
                                </label>
                                {{ form_widget(form.subject, {'attr': {'class': 'w-full border border-[#DDE5EF] rounded-xl px-3.5 py-2.5 text-sm text-[#5A6B7F] bg-white outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all cursor-pointer'}}) }}
                                <p data-field-error="subject" class="hidden text-xs text-red-500 mt-1"></p>
                                {{ form_errors(form.subject) }}
                            </div>

                            {# Message #}
                            <div>
                                <label class="block text-[13px] font-semibold text-[#374151] mb-1.5">
                                    Message <span class="text-primary">*</span>
                                </label>
                                {{ form_widget(form.message, {'attr': {'class': 'w-full border border-[#DDE5EF] rounded-xl px-3.5 py-2.5 text-sm text-[#1A2B3F] bg-white outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all resize-none', 'rows': '4', 'placeholder': 'Décrivez votre besoin…'}}) }}
                                <p data-field-error="message" class="hidden text-xs text-red-500 mt-1"></p>
                                {{ form_errors(form.message) }}
                            </div>

                            {# Bouton submit — atome button existant #}
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Envoyer le message',
                                type: 'submit',
                                variant: 'primary',
                                size: 'lg',
                                width: 'full'
                            } only %}

                        {{ form_end(form) }}

                    </div>

                    {# ── État de succès (affiché après envoi AJAX réussi) ── #}
                    <div data-landing--contact-form-target="success"
                         class="hidden p-6 sm:p-8 flex flex-col items-center text-center py-12">

                        {# Icône check animée #}
                        <div class="w-14 h-14 rounded-2xl mb-5 flex items-center justify-center flex-shrink-0"
                             style="background: linear-gradient(135deg, #0A6BC4, #3AB8E8); box-shadow: 0 6px 20px rgba(12,129,228,0.28);">
                            <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </div>

                        <h3 class="text-xl font-bold text-[#1A2B3F] mb-2">Vérifiez votre email !</h3>
                        <p class="text-sm text-[#5A6B7F] leading-relaxed max-w-[280px]">
                            Nous vous avons envoyé un lien de confirmation.
                            Cliquez dessus pour transmettre votre message à notre équipe.
                        </p>

                        <p class="text-xs text-[#A0AEC0] mt-4">
                            Email envoyé à :
                            <span data-landing--contact-form-target="emailDisplay" class="font-medium text-[#5A6B7F]"></span>
                        </p>

                    </div>

                </div>
            </div>

        </div>
    </div>
</section>