{% extends 'base.twig' %}

{% block title %}{{'who_page.title'|trans({'%s': city})}}{% endblock %}
{% block meta_description %}{{'who_page.description'|trans({'%s': city})}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_who',{city:city}) }}?lang={{ app.request.locale }}" />{% 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.who'|trans({'%s': city}) }} ",
              "item": "{{ app.request.schemeAndHttpHost }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <div id="who-city" class="max-w-6xl mx-auto px-4 py-12 font-sans text-gray-800 bg-[#fbfbfb]">

        {# HEADER : STYLE IMPACT ESPORT #}
        <header class="mb-20 relative py-10">
            <div class="relative z-10">
                <h1 class="text-5xl md:text-7xl font-black text-gray-900 tracking-tighter uppercase italic leading-none esrgaa-voice">
                    {{ 'who_page.title'|trans({'%s': city|trans}) }}
                </h1>

                <div class="mt-6 flex flex-wrap items-center gap-4">
                    {# Badge Localisation Style Neubrutaliste #}
                    <div class="bg-yellow-500 text-gray-900 px-6 py-2 font-black italic skew-x-[-15deg] border-2 border-gray-900 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex items-center gap-2">
                        <svg class="h-5 w-5 skew-x-[15deg]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" 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" />
                        </svg>
                        <span class="skew-x-[15deg] uppercase tracking-tighter">
                        {{ 'who_page.city_pretitle'|trans }} {{ city|trans }}
                    </span>
                    </div>

                    <div class="h-1 w-24 bg-indigo-600 hidden md:block skew-x-[-20deg]"></div>
                </div>

                <p class="mt-8 text-xl font-bold text-gray-600 italic max-w-2xl border-l-4 border-indigo-600 pl-4">
                    {{ 'who_page.description'|trans({'%s': city}) }}
                </p>
            </div>

            {# Filigrane de fond #}
            <div class="absolute top-0 right-0 -mr-8 opacity-[0.04] pointer-events-none select-none hidden md:block">
                <span class="text-[12rem] font-black italic uppercase tracking-tighter leading-none">LOCAL</span>
            </div>
        </header>

        {# SECTION ACTIVITÉS : GRID NEUBRUTALISTE #}
        <section class="mt-20">
            <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-2 border-yellow-600">
            <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                // {{ 'who_page.activity_intro'|trans }}
            </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

                {# Carte 1 : Cosplay #}
                <div class="group bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] transition-all duration-300 italic">
                    <div class="bg-indigo-600 text-white w-14 h-14 flex items-center justify-center rounded-sm mb-6 -mt-12 shadow-lg group-hover:rotate-6 transition-transform">
                        <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L15 15m0 0l3.586-3.586a2 2 0 012.828 0M15 15l2-2m-2-2l2-2" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 uppercase tracking-tighter mb-3">{{ 'home_activities.cosplay_title'|trans }}</h3>
                    <p class="text-sm font-semibold text-gray-600 leading-relaxed">{{ 'home_activities.cosplay_text'|trans }}</p>
                </div>

                {# Carte 2 : Communauté #}
                <div class="group bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] transition-all duration-300 italic">
                    <div class="bg-indigo-600 text-white w-14 h-14 flex items-center justify-center rounded-sm mb-6 -mt-12 shadow-lg group-hover:rotate-6 transition-transform">
                        <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6m-6 0v-1a6 6 0 01-2.055-1.115M17 10v3m-2-3a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 uppercase tracking-tighter mb-3">{{ 'home_activities.community_title'|trans }}</h3>
                    <p class="text-sm font-semibold text-gray-600 leading-relaxed">{{ 'home_activities.community_text'|trans }}</p>
                </div>

                {# Carte 3 : Diversité #}
                <div class="group bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] transition-all duration-300 italic">
                    <div class="bg-indigo-600 text-white w-14 h-14 flex items-center justify-center rounded-sm mb-6 -mt-12 shadow-lg group-hover:rotate-6 transition-transform">
                        <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.045 2.502.518 4.956 1.341 7.23M17 12V7" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 uppercase tracking-tighter mb-3">{{ 'home_activities.diversity_title'|trans }}</h3>
                    <p class="text-sm font-semibold text-gray-600 leading-relaxed">{{ 'home_activities.diversity_text'|trans }}</p>
                </div>

            </div>
        </section>

        {# CTA : BOUTON MASSIVE #}
        <div class="mt-24 text-center relative">
            <a href="{{ path('app_contact') }}" class="group relative inline-block">
                <div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-200"></div>
                <div class="relative bg-indigo-600 text-white px-12 py-5 font-black uppercase italic tracking-widest border-2 border-gray-900 hover:bg-yellow-500 hover:text-gray-900 transition-colors duration-200">
                    {{ 'home_cta.contact'|trans }}
                </div>
            </a>

            <a href="{{ path('app_recruit') }}" class="ml-2 group relative inline-block">
                <div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-200"></div>
                <div class="relative bg-indigo-600 text-white px-12 py-5 font-black uppercase italic tracking-widest border-2 border-gray-900 hover:bg-yellow-500 hover:text-gray-900 transition-colors duration-200">
                    {{ 'home_cta.button'|trans }}
                </div>
            </a>
        </div>

    </div>
{% endblock %}