{% extends 'base.twig' %}

{# --- METADATA & SCHEMA --- #}
{% block title %}{{'page.title'|trans({})}}{% endblock %}
{% block meta_description %}{{'hero.subheading'|trans({})}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages') }}" />{% 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": "{{ 'page.title'|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 : THE ROSTER --- #}
        <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-4xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
                    {{ 'creators.title_plural'|trans({'%count%': cosplayers|length}) }}
                </h1>
                <div class="h-3 w-48 bg-pink-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
                <p class="mt-8 text-2xl font-bold italic text-gray-600 max-w-2xl border-l-8 border-indigo-600 pl-6 uppercase tracking-tighter">
                    {{ 'creators.intro_text'|trans({}) }}
                </p>
            </div>
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block text-right">
                <span class="text-[15rem] font-black italic uppercase leading-none block">CREATORS</span>
                <span class="text-[10rem] font-black italic uppercase leading-none block text-indigo-600">COMMUNITY</span>
            </div>
        </header>

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

            {# --- LISTING DES CARTES (ROSTER GRID) --- #}
            {% if cosplayers|length > 0 %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 max-w-7xl mx-auto">

                    {% for creator in cosplayers %}
                        <div class="group relative bg-white border-4 border-gray-900 shadow-[12px_12px_0px_rgba(0,0,0,1)] hover:shadow-[16px_16px_0px_#4f46e5] hover:-translate-y-2 transition-all duration-300 flex flex-col italic overflow-hidden">

                            {# IMAGE : PRO PLAYER STYLE #}
                            <div class="relative h-[400px] bg-gray-200 overflow-hidden border-b-4 border-gray-900">
                                <img class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
                                     src="{{ creator.image }}"
                                     alt="{{ creator.pseudo }}"
                                     onerror="this.onerror=null;this.src='https://placehold.co/400x600/111827/4b5563?text=NO_SIGNAL';">

                                {# Overlay dégradé technique #}
                                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>

                                {# Pseudo flottant sur l'image #}
                                <div class="absolute bottom-4 left-4 right-4">
                                    <h3 class="text-4xl font-black text-white uppercase tracking-tighter group-hover:text-yellow-400 transition-colors">
                                        {{ creator.pseudo }}
                                    </h3>
                                </div>
                            </div>

                            <div class="p-6 flex flex-col flex-grow bg-white">
                                {# Description #}
                                <p class="text-gray-600 font-bold mb-6 h-12 overflow-hidden leading-tight">
                                    {{ creator.description }}
                                </p>

                                {# Socials : Connectivity #}
                                <div class="mb-8 p-4 bg-gray-50 border-2 border-gray-900 relative">
                                <span class="absolute -top-3 left-3 bg-indigo-600 text-white text-[10px] font-black px-2 py-0.5 uppercase tracking-widest">
                                    {{ 'creators.social_label'|trans({}) }}
                                </a></span>
                                    <div class="flex flex-wrap gap-4 mt-1">
                                        {% for platform, url in creator.social %}
                                            <a href="{{ url }}" target="_blank" rel="noopener noreferrer"
                                               class="w-10 h-10 border-2 border-gray-900 flex items-center justify-center hover:bg-pink-500 hover:text-white transition-all transform hover:rotate-12"
                                               title="{{ platform|capitalize }}">
                                                <i class="fab fa-{{ platform|lower }} text-lg"></i>
                                                {# Fallback si FontAwesome n'est pas là, on garde le SVG générique du snippet précédent si besoin #}
                                            </a>
                                        {% endfor %}
                                    </div>
                                </div>

                                {# Bouton Profil #}
                                <a href="/cosplayer/{{ creator.pseudo|lower|replace({' ': '-'}) }}"
                                   class="mt-auto relative group/btn overflow-hidden border-4 border-gray-900 bg-white py-4 text-center transition-all hover:bg-gray-900">
                                <span class="relative z-10 font-black uppercase italic tracking-widest text-sm group-hover/btn:text-white">
                                    {{ 'creators.button'|trans({}) }} <span class="ml-2">→</span>
                                </span>
                                </a>
                            </div>
                        </div>
                    {% endfor %}

                </div>
            {% else %}
                {# EMPTY STATE #}
                <div class="max-w-4xl mx-auto text-center py-20 border-8 border-dashed border-gray-200">
                    <p class="text-4xl font-black uppercase italic text-gray-300 tracking-tighter">
                        {{ 'creators.empty_list'|trans({}) }}
                    </p>
                </div>
            {% endif %}

            {# --- CTA : JOIN THE ROSTER --- #}
            <section class="mt-32 relative">
                <div class="absolute inset-0 bg-indigo-600 skew-y-1 transform origin-bottom-right -z-10 shadow-[20px_20px_0px_#eab308]"></div>

                <div class="relative p-12 md:p-20 text-center text-white border-4 border-gray-900 bg-gray-900/40 backdrop-blur-sm italic">
                    <h2 class="text-4xl md:text-7xl font-black uppercase tracking-tighter mb-6">
                        {{ 'cta_creator.heading'|trans }}
                    </h2>
                    <p class="text-xl md:text-2xl font-bold text-indigo-200 mb-12 max-w-3xl mx-auto">
                        {{ 'cta_creator.subtext'|trans({}) }}
                    </p>

                    <a href="{{ path('app_pages_discover') }}"
                       class="group relative inline-block">
                        <div class="absolute inset-0 bg-white translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
                        <div class="relative bg-pink-600 text-white px-12 py-6 font-black uppercase italic tracking-widest text-xl border-4 border-gray-900 flex items-center gap-4">
                            {{ 'cta_creator.button'|trans({}) }}
                            <i class="fas fa-bolt animate-pulse"></i>
                        </div>
                    </a>
                </div>
            </section>

        </div>

        {# --- TECH MARQUEE FOOTER --- #}
        <div class="mt-20 bg-gray-900 py-6 overflow-hidden border-t-4 border-pink-500">
            <div class="whitespace-nowrap flex animate-marquee italic">
                {% for i in 1..10 %}
                    <span class="text-white font-black uppercase mx-8 text-2xl opacity-20">
                    {{ 'page_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;
        }
    </style>
{% endblock %}