e-cosplay/templates/contact.twig

{% extends 'base.twig' %}

{# --- METADATA & SCHEMA --- #}
{% block title %}{{'contact_page.title'|trans}}{% endblock %}
{% block meta_description %}{{'contact_page.description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_contact') }}" />{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{ 'breadcrumb.home'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
            },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{'contact_page.breadcrumb'|trans}}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 overflow-x-hidden">

        {# --- HEADER --- #}
        <header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
            <div class="max-w-7xl mx-auto relative z-10">
                <h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
                    {{ 'contact_page.title'|trans }}
                </h1>
                <div class="h-3 w-48 bg-indigo-600 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_#eab308]"></div>
            </div>
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
                <span class="text-[20rem] font-black italic uppercase leading-none">REACH_OUT</span>
            </div>
        </header>

        <div class="container mx-auto px-4 py-16">

            {# --- FLASH MESSAGES (Style Neubrutaliste) --- #}
            {% for message in app.flashes('success') %}
                <div class="max-w-4xl mx-auto mb-12 p-6 bg-green-500 text-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] flex items-center gap-4 animate-bounce">
                    <i class="fas fa-check-circle text-3xl"></i>
                    <div class="font-black uppercase italic italic tracking-tight">
                        <span class="block text-xs opacity-70">SYSTEM_SUCCESS</span>
                        {{ message }}
                    </div>
                </div>
            {% endfor %}

            {% for message in app.flashes('error') %}
                <div class="max-w-4xl mx-auto mb-12 p-6 bg-red-600 text-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] flex items-center gap-4">
                    <i class="fas fa-exclamation-triangle text-3xl"></i>
                    <div class="font-black uppercase italic italic tracking-tight">
                        <span class="block text-xs opacity-70">SYSTEM_ERROR</span>
                        {{ message }}
                    </div>
                </div>
            {% endfor %}

            <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-12 italic">

                {# --- COLONNE INFO : COMMAND CENTER --- #}
                <aside class="lg:col-span-1 space-y-8">
                    <div class="bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] h-full">
                        <h2 class="text-3xl font-black uppercase tracking-tighter mb-8 border-b-4 border-indigo-600 pb-2 inline-block">
                            {{ 'contact_info.title'|trans }}
                        </h2>

                        <div class="space-y-10">
                            {# Email #}
                            <div class="group">
                                <p class="text-[10px] font-black uppercase text-gray-400 tracking-widest mb-2">// {{ 'contact_info.email'|trans }}</p>
                                <a href="mailto:contact@e-cosplay.fr" class="text-xl font-black text-indigo-600 hover:text-yellow-500 break-all transition-colors">
                                    contact@e-cosplay.fr
                                </a>
                            </div>

                            {# Adresse #}
                            <div>
                                <p class="text-[10px] font-black uppercase text-gray-400 tracking-widest mb-2">// {{ 'contact_info.address'|trans }}</p>
                                <p class="text-xl font-black leading-tight">
                                    42 RUE DE SAINT-QUENTIN<br>
                                    02800 BEAUTOR, FRANCE
                                </p>
                            </div>

                            {# Recrutement #}
                            <div class="pt-8 border-t-2 border-gray-100">
                                <h3 class="text-2xl font-black uppercase text-green-600 mb-4">{{ 'contact_info.join_title'|trans }}</h3>
                                <p class="font-bold text-gray-600 mb-6">{{ 'contact_info.join_text'|trans }}</p>
                                <a href="{{ path('app_recruit') }}" class="inline-block bg-gray-900 text-white px-6 py-3 font-black uppercase tracking-tighter hover:bg-indigo-600 transition-colors skew-x-[-10deg]">
                                    {{ 'Nous rejoindre'|trans }} →
                                </a>
                            </div>
                        </div>
                    </div>
                </aside>

                {# --- COLONNE FORMULAIRE : UPLOAD_MESSAGE --- #}
                <section class="lg:col-span-2 bg-white border-4 border-gray-900 p-8 md:p-12 shadow-[16px_16px_0px_#4f46e5]">
                    <h2 class="text-4xl font-black uppercase tracking-tighter mb-10">{{ 'form.title'|trans }}</h2>

                    {{ form_start(form, {'attr': {'class': 'space-y-8'}}) }}

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-2">
                            {{ form_label(form.name, 'contact_form.name.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
                                {{ form_widget(form.name, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all', 'placeholder': 'contact_name_pl'}}) }}
                        </div>
                        <div class="space-y-2">
                            {{ form_label(form.surname, 'contact_form.surname.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
                            {{ form_widget(form.surname, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all', 'placeholder': 'contact_surname_pl'}}) }}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-2">
                            {{ form_label(form.email, 'form_email_label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
                            {{ form_widget(form.email, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all', 'placeholder': 'contact_email_pl'}}) }}
                        </div>
                        <div class="space-y-2">
                            {{ form_label(form.subject, 'contact_form.subject.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
                            {{ form_widget(form.subject, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all','placeholder':'contact_email_subject'}}) }}
                        </div>
                    </div>

                    <div class="space-y-2">
                        {{ form_label(form.tel, 'contact_form.tel.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
                        {{ form_widget(form.tel, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all'}}) }}
                    </div>

                    <div class="space-y-2">
                        {{ form_label(form.message, 'contact_form.message.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
                        {{ form_widget(form.message, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all h-40 resize-none', 'placeholder': 'contact_email_message'}}) }}
                    </div>

                    <div class="pt-6">
                        <button type="submit" class="group relative w-full overflow-hidden">
                            <div class="absolute inset-0 bg-gray-900 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                            <div class="relative border-4 border-gray-900 bg-indigo-600 text-white py-5 font-black uppercase italic tracking-widest text-xl group-hover:text-white transition-colors">
                                <i class="fas fa-paper-plane mr-3 group-hover:rotate-12 transition-transform"></i>
                                {{ 'form.submit_button'|trans }}
                            </div>
                        </button>
                    </div>

                    {{ form_end(form) }}
                </section>
            </div>
        </div>

        {# --- DECORATIVE MARQUEE --- #}
        <div class="mt-20 bg-yellow-500 py-4 overflow-hidden border-y-4 border-gray-900">
            <div class="whitespace-nowrap flex animate-marquee font-black uppercase italic">
                {% for i in 1..15 %}
                    <span class="mx-8 text-gray-900">{{ 'contact_roll'|trans }}</span>
                {% endfor %}
            </div>
        </div>

    </div>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 30s linear infinite;
        }
        /* Correction pour les erreurs de formulaire Symfony */
        .form-error-message {
            @apply text-red-600 font-bold text-xs uppercase mt-1;
        }
    </style>
{% endblock %}