{% extends 'base.twig' %}

{% block title %}{{'joint_page.title'|trans}}{% endblock %}
{% block meta_description %}{{'joint_page.description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_recruit') }}" />{% 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": "{{ 'breadcrumb.joint'|trans }}", "item": "{{ app.request.schemeAndHttpHost }}{{ path('app_recruit') }}" }
          ]
        }
    </script>

    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [{
                "@type": "Question",
                "name": "{{ 'faq.validation.question'|trans }}",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "{{ 'faq.validation.answer'|trans }}"
                }
            }]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="bg-white text-gray-900 font-sans leading-normal">

        {# --- HERO SECTION --- #}
        <section class="relative py-24 bg-[#1A1A1A] text-white overflow-hidden text-center border-b-8 border-[#FFC107]">
            <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 40px 40px;"></div>
            <div class="container mx-auto px-6 relative z-10">
                <h1 class="text-5xl md:text-8xl font-black mb-6 tracking-tighter uppercase italic">
                    <span class="text-white">{{ 'hero.join.text'|trans }}</span> <span class="text-[#FFC107]">{{ 'hero.brand.name'|trans }}</span>
                </h1>
                <div class="inline-block bg-[#E63946] text-white px-10 py-6 rounded-sm shadow-[8px_8px_0px_0px_rgba(255,193,7,1)] transform -rotate-1 border-2 border-black">
                    <span class="text-sm font-black uppercase tracking-widest block mb-1">{{ 'hero.fee.label'|trans }}</span>
                    <div class="text-5xl font-black">{{ 'hero.fee.amount'|trans }}</div>
                </div>
            </div>
        </section>

        {# --- SECTION PROCESSUS D'ADHÉSION --- #}
        <section class="py-16 bg-gray-50 border-b-4 border-black">
            <div class="container mx-auto px-6 max-w-5xl">
                <h2 class="text-4xl font-black uppercase italic mb-10 tracking-tighter text-center">{{ 'process.title'|trans }}</h2>
                <div class="grid md:grid-cols-2 gap-8 items-stretch">
                    <div class="bg-white border-4 border-black p-8 shadow-[10px_10px_0px_0px_rgba(26,26,26,1)]">
                        <div class="text-[#E63946] text-4xl font-black mb-4">{{ 'process.unanimous.percent'|trans }}</div>
                        <h3 class="text-xl font-black uppercase mb-4">{{ 'process.unanimous.title'|trans }}</h3>
                        <p class="font-bold text-gray-700 leading-relaxed">
                            {{ 'process.unanimous.description'|trans|raw }}
                        </p>
                    </div>
                    <div class="bg-[#1A1A1A] border-4 border-[#FFC107] p-8 text-white shadow-[10px_10px_0px_0px_rgba(255,193,7,1)]">
                        <div class="text-[#FFC107] text-4xl font-black mb-4 text-center">{{ 'process.feedback.icon'|trans }}</div>
                        <h3 class="text-xl font-black uppercase mb-4 text-[#FFC107]">{{ 'process.feedback.title'|trans }}</h3>
                        <p class="font-medium text-gray-300 leading-relaxed text-center">
                            {{ 'process.feedback.description'|trans|raw }}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        {# --- GOUVERNANCE PARTAGÉE --- #}
        <section class="py-16 bg-[#FFC107] border-b-8 border-black">
            <div class="container mx-auto px-6">
                <div class="bg-white border-4 border-black p-8 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)]">
                    <h2 class="text-3xl md:text-5xl font-black uppercase italic mb-8 tracking-tighter text-center">{{ 'governance.title'|trans }}</h2>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        {% set steps = {
                            '💡': 'governance.step.propose'|trans,
                            '👂': 'governance.step.listen'|trans,
                            '🗳️': 'governance.step.vote'|trans,
                            '🚀': 'governance.step.apply'|trans
                        } %}
                        {% for icon, title in steps %}
                            <div class="p-4 border-2 border-black bg-gray-50 text-center transform hover:scale-105 transition">
                                <div class="text-3xl mb-2">{{ icon }}</div>
                                <h4 class="font-black uppercase text-sm">{{ title }}</h4>
                            </div>
                        {% endfor %}
                    </div>
                    <p class="mt-8 text-center font-black uppercase text-gray-800 tracking-tighter">
                        {{ 'governance.footer'|trans }}
                    </p>
                </div>
            </div>
        </section>

        {# --- SERVICES & HANDICAP --- #}
        <section class="py-20">
            <div class="container mx-auto px-6">
                <div class="grid lg:grid-cols-2 gap-12">
                    <div class="flex gap-6 items-start">
                        <div class="bg-black text-[#FFC107] p-4 font-black text-2xl border-2 border-black">01</div>
                        <div>
                            <h3 class="text-2xl font-black uppercase italic">{{ 'services.portfolio.title'|trans }}</h3>
                            <p class="text-gray-600 font-bold">{{ 'services.portfolio.description'|trans }}</p>
                        </div>
                    </div>
                    <div class="flex gap-6 items-start p-6 bg-gray-100 border-l-8 border-[#E63946]">
                        <div class="text-5xl">♿</div>
                        <div>
                            <h3 class="text-xl font-black uppercase">{{ 'services.inclusion.title'|trans }}</h3>
                            <p class="text-gray-600 italic">{{ 'services.inclusion.description'|trans }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# --- SAFE SPACE --- #}
        <section class="py-12 bg-[#1A1A1A] text-white text-center">
            <h2 class="text-2xl font-black uppercase italic text-[#FFC107]">{{ 'safespace.title'|trans }}</h2>
            <p class="mt-4 font-bold tracking-widest text-sm">{{ 'safespace.subtitle'|trans }}</p>
        </section>

        {# --- FORMULAIRE --- #}
        <section class="py-24 bg-gray-50">
            <div class="container mx-auto px-6 max-w-4xl">
                <div class="bg-white border-8 border-black p-8 md:p-12 shadow-[20px_20px_0px_0px_rgba(26,26,26,1)]">
                    <h2 class="text-4xl md:text-6xl font-black uppercase italic mb-10 tracking-tighter text-center decoration-[#FFC107] underline decoration-8">
                        {{ 'form.header.title'|trans }}
                    </h2>

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

                    {# CIVilité & PSEUDO #}
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="flex flex-col">
                            {{ form_label(form.civ, 'form.label.civ'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.civ, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition font-bold'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.pseudo, 'form.label.pseudo'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.pseudo, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition font-bold'}}) }}
                        </div>
                    </div>

                    {# IDENTITÉ #}
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="flex flex-col">
                            {{ form_label(form.name, 'form.label.name'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.name, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.surname, 'form.label.surname'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.surname, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
                        </div>
                    </div>

                    {# IDENTITÉ (SUITE) #}
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="flex flex-col">
                            {{ form_label(form.crossCosplay, 'form.label.cross_cosplay'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.crossCosplay, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition font-bold cursor-pointer'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.trans, 'form.label.trans'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.trans, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition font-bold cursor-pointer'}}) }}
                        </div>
                    </div>

                    {# CONTACT #}
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="flex flex-col">
                            {{ form_label(form.email, 'form.label.email'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.email, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.phone, 'form.label.phone'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.phone, {'attr': {'class': 'border-4 border-black p-3 focus:bg-yellow-50 outline-none transition'}}) }}
                        </div>
                    </div>

                    {# INFOS PERSO #}
                    <div class="grid md:grid-cols-3 gap-6">
                        <div class="flex flex-col">
                            {{ form_label(form.dateBirth, 'form.label.birthdate'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.dateBirth, {'attr': {'class': 'border-4 border-black p-3'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.sexe, 'form.label.gender'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.sexe, {'attr': {'class': 'border-4 border-black p-3'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.pronom, 'form.label.pronouns'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.pronom, {'attr': {'class': 'border-4 border-black p-3'}}) }}
                        </div>
                    </div>

                    {# ADRESSE #}
                    <div class="flex flex-col">
                        {{ form_label(form.address, 'form.label.address'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                        {{ form_widget(form.address, {'attr': {'class': 'border-4 border-black p-3'}}) }}
                    </div>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="flex flex-col">
                            {{ form_label(form.zipCode, 'form.label.zipcode'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.zipCode, {'attr': {'class': 'border-4 border-black p-3'}}) }}
                        </div>
                        <div class="flex flex-col">
                            {{ form_label(form.city, 'form.label.city'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                            {{ form_widget(form.city, {'attr': {'class': 'border-4 border-black p-3'}}) }}
                        </div>
                    </div>

                    {# RÉSEAUX SOCIAUX #}
                    <div class="p-6 bg-gray-100 border-4 border-black border-dashed">
                        <h3 class="font-black uppercase italic mb-4 text-[#E63946]">{{ 'form.section.social'|trans }}</h3>
                        <div class="grid md:grid-cols-2 gap-4">
                            {{ form_row(form.discordAccount, {'label': 'form.label.discord'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full font-bold'}}) }}
                            {{ form_row(form.instaLink, {'label': 'form.label.insta'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full font-bold'}}) }}
                            {{ form_row(form.tiktokLink, {'label': 'form.label.tiktok'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full font-bold'}}) }}
                            {{ form_row(form.facebookLink, {'label': 'form.label.facebook'|trans, 'attr': {'class': 'border-2 border-black p-2 w-full font-bold'}}) }}
                        </div>
                    </div>

                    {# RÔLE & MOTIVATION #}
                    <div class="flex flex-col">
                        {{ form_label(form.who, 'form.label.who'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                        {{ form_widget(form.who, {'attr': {'class': 'border-4 border-black p-3 min-h-[120px]'}}) }}
                    </div>

                    <div class="flex flex-col">
                        {{ form_label(form.role, 'form.label.role'|trans, {'label_attr': {'class': 'font-black uppercase text-sm mb-2'}}) }}
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
                            {{ form_widget(form.role) }}
                        </div>
                    </div>

                    {# BOUTON ENVOI #}
                    <div class="pt-10 text-center">
                        <button type="submit" class="inline-block px-16 py-8 bg-[#FFC107] text-black font-black text-2xl rounded-sm border-4 border-black shadow-[10px_10px_0px_0px_rgba(26,26,26,1)] hover:bg-[#E63946] hover:text-white transition-all transform hover:-translate-y-2 uppercase cursor-pointer">
                            {{ 'form.button.submit'|trans }}
                        </button>
                    </div>

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

    </div>
{% endblock %}