{% extends 'base.html.twig' %}

{% block title %}Formulaire de contact{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/contact.css') }}">
{% endblock %}

{% block meta_description %} Besoin d’un devis ou d’informations ? Contactez SMA, expert en formation santé et PSDM. Profitez d’un accompagnement personnalisé pour réussir vos projets. {% endblock %}

{% block body %}

    <div class="w-full h-2 bg-[#045B79] mb-16"></div>

    <section class="wrapper">
        <h1 class="text-center text-5xl font-bold leading-normal text-[#045B79] mb-8">Nous sommes là pour<br><span class="text-white bg-[#E30713] rounded-xl px-4">vous!<span></br></h1>
        <h2 class="text-center mb-16">Besoin d'un conseil ou d'une assistance personnalisée ? Nous sommes là pour vous guider.</h2>
    </section>

    <div class="wrapper">  

        <div class="contact-map-containers">
        
        <section class="contact-container">
        {{ form_start(form) }}  
        {{ form_row(form.nom) }}
        {{ form_row(form.prenom) }}
        {{ form_row(form.email) }}
        {{ form_row(form.telephone) }}
        {{ form_row(form.nom_entreprise) }}
        {{ form_row(form.sujet) }}
        {{ form_row(form.message) }}
        {{ form_end(form) }}
        </section>

        <div class="map-container">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2531.3912222192766!2d3.174000376944019!3d50.61984877515178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c2d7ec08c34f95%3A0xd152090dd9fb36d0!2s11%20Rue%20du%20Grand%20Ruage%2C%2059493%20Villeneuve-d&#39;Ascq!5e0!3m2!1sfr!2sfr!4v1732196697163!5m2!1sfr!2sfr" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade"
                title="Carte montrant l'emplacement de l'adresse à Villeneuve-d'Ascq">
            </iframe>
        </div>

        </div>

    </div>

    {# <div class="wrapper">
        <div class="flex justify-center flex-wrap mb-16">
            <p class="mt-12 text-center text-[#045B79] flex border-2 p-4 border-[#045B79] rounded-lg gap-2"> {{ ux_icon('tabler:clock-hour-4',  {height: '1.5rem', width: '1.5rem'}) }} Nous sommes ouvert du Lundi au Vendredi de 9h30 à 17h30</p>  
        </div>
    </div> #}

{% endblock %}