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

{% block title %}Contact - ARA Solutions{% endblock %}
{% block meta_description %}Contactez ARA Solutions pour discuter de votre projet web. Devis gratuit et réponse rapide.{% endblock %}

{% block body %}
{# Header #}
<section class="bg-gradient-to-br from-primary-dark to-primary pt-28 pb-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <p class="text-accent-light text-sm font-medium tracking-wider uppercase mb-2">Parlons de votre projet</p>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white">Contactez-nous</h1>
        <p class="mt-3 text-gray-300 lg:text-lg max-w-2xl">Une idée, un projet, une question ? N'hésitez pas à nous écrire.</p>
    </div>
</section>

{# Contact Form + Info #}
<section class="py-16 bg-surface">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
            {# Form #}
            <div class="lg:col-span-3">
                <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100">
                    {% for flash in app.flashes('success') %}
                    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-lg text-sm">
                        {{ flash }}
                    </div>
                    {% endfor %}

                    {{ form_start(form, {'attr': {'class': 'space-y-6', 'novalidate': 'novalidate'}}) }}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                {{ form_label(form.name, null, {'label_attr': {'class': 'block text-sm lg:text-base font-medium text-gray-700 mb-1'}}) }}
                                {{ form_widget(form.name, {'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm lg:text-base focus:ring-2 focus:ring-accent/20 focus:border-accent outline-none transition'}}) }}
                                {{ form_errors(form.name) }}
                            </div>
                            <div>
                                {{ form_label(form.email, null, {'label_attr': {'class': 'block text-sm lg:text-base font-medium text-gray-700 mb-1'}}) }}
                                {{ form_widget(form.email, {'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm lg:text-base focus:ring-2 focus:ring-accent/20 focus:border-accent outline-none transition'}}) }}
                                {{ form_errors(form.email) }}
                            </div>
                        </div>

                        <div>
                            {{ form_label(form.subject, null, {'label_attr': {'class': 'block text-sm lg:text-base font-medium text-gray-700 mb-1'}}) }}
                            {{ form_widget(form.subject, {'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm lg:text-base focus:ring-2 focus:ring-accent/20 focus:border-accent outline-none transition'}}) }}
                            {{ form_errors(form.subject) }}
                        </div>

                        <div>
                            {{ form_label(form.message, null, {'label_attr': {'class': 'block text-sm lg:text-base font-medium text-gray-700 mb-1'}}) }}
                            {{ form_widget(form.message, {'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm lg:text-base focus:ring-2 focus:ring-accent/20 focus:border-accent outline-none transition resize-y'}}) }}
                            {{ form_errors(form.message) }}
                        </div>

                        {{ form_widget(form.honeypot) }}

                        <button type="submit" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 bg-accent text-white font-medium rounded-lg hover:bg-accent-dark transition-colors">
                            Envoyer le message
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                        </button>
                    {{ form_end(form) }}
                </div>
            </div>

            {# Contact Info #}
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100">
                    <h2 class="text-lg lg:text-xl font-semibold text-gray-900 mb-6">Nos coordonnées</h2>

                    <div class="space-y-6">
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <div>
                                <h3 class="text-sm lg:text-base font-medium text-gray-900">Adresse</h3>
                                <p class="text-sm lg:text-base text-gray-500 mt-1">{{ company.address }}<br>{{ company.city }}</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                            </div>
                            <div>
                                <h3 class="text-sm lg:text-base font-medium text-gray-900">Email</h3>
                                <a href="mailto:{{ company.email }}" class="text-sm lg:text-base text-accent hover:text-accent-dark transition-colors mt-1 block">{{ company.email }}</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
                    <iframe
                        src="https://www.openstreetmap.org/export/embed.html?bbox=-0.5335%2C44.8543%2C-0.5235%2C44.8593&layer=mapnik&marker=44.8568%2C-0.5285"
                        class="w-full h-64 border-0"
                        loading="lazy"
                        title="Localisation ARA Solutions">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}