{% 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}) }}" />{% 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 class="bg-gray-50 min-h-screen py-16 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto">

            <!-- Header et Localisation -->
            <div class="text-center mb-12 p-6 bg-white shadow-xl rounded-xl">
                <h1 class="text-4xl font-extrabold tracking-tight text-indigo-700 sm:text-5xl mb-4">
                    {{'who_page.title'|trans({'%s': city|trans})}}
                </h1>
                <p class="mt-4 text-xl text-gray-600">
                    {{ 'who_page.description'|trans({'%s': city}) }}
                </p>
                <div class="mt-6 inline-flex items-center space-x-2 p-3 bg-indigo-100 rounded-lg">
                    <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>
                    <span class="text-lg font-semibold text-indigo-800">
                    {{ 'who_page.city_pretitle'|trans }} <span class="text-indigo-900">{{ city|trans }}</span>
                </span>
                </div>
            </div>

            <!-- Section Activités -->
            <div class="mt-16 bg-white shadow-xl rounded-xl p-8">
                <h2 class="text-3xl font-bold text-gray-900 mb-8 border-b-2 border-indigo-200 pb-3">
                    {{ 'who_page.activity_intro'|trans }}
                </h2>

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

                    <!-- Cosplay -->
                    <div class="text-center p-4 bg-indigo-50 rounded-lg transition duration-300 hover:shadow-lg">
                        <svg class="w-10 h-10 mx-auto text-indigo-600 mb-3" 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>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ 'home_activities.cosplay_title'|trans }}</h3>
                        <p class="text-gray-600 text-sm">{{ 'home_activities.cosplay_text'|trans }}</p>
                    </div>

                    <!-- Communauté -->
                    <div class="text-center p-4 bg-indigo-50 rounded-lg transition duration-300 hover:shadow-lg">
                        <svg class="w-10 h-10 mx-auto text-indigo-600 mb-3" 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>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ 'home_activities.community_title'|trans }}</h3>
                        <p class="text-gray-600 text-sm">{{ 'home_activities.community_text'|trans }}</p>
                    </div>

                    <!-- Diversité -->
                    <div class="text-center p-4 bg-indigo-50 rounded-lg transition duration-300 hover:shadow-lg">
                        <svg class="w-10 h-10 mx-auto text-indigo-600 mb-3" 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>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ 'home_activities.diversity_title'|trans }}</h3>
                        <p class="text-gray-600 text-sm">{{ 'home_activities.diversity_text'|trans }}</p>
                    </div>

                </div>
            </div>

            <!-- CTA rapide -->
            <div class="mt-12 text-center">
                <a href="{{ path('app_contact') }}" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 shadow-lg transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                    {{ 'home_cta.button'|trans }}
                </a>
            </div>
        </div>
    </div>
{% endblock %}
