{% extends 'base.html.twig' %}

{% block title %}Organisateurs - E-Ticket{% endblock %}
{% block description %}Decouvrez les organisateurs d'evenements sur E-Ticket{% endblock %}
{% block og_title %}Nos organisateurs - E-Ticket{% endblock %}
{% block og_description %}{{ organizers|length }} organisateur{{ organizers|length > 1 ? 's' : '' }} font confiance a E-Ticket pour gerer leurs evenements.{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">

    <section class="relative flex items-center justify-center bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
            <span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">ORGA</span>
        </div>

        <div class="max-w-7xl mx-auto relative z-10 text-center">
            <h1 class="text-5xl md:text-8xl font-black uppercase tracking-tighter leading-[0.85] mb-4">
                <span class="block">Nos organisateurs</span>
            </h1>
            <p class="max-w-2xl mx-auto text-xl font-bold text-gray-600 italic">
                {{ organizers|length }} organisateur{{ organizers|length > 1 ? 's' : '' }} font confiance a E-Ticket pour gerer leurs evenements.
            </p>
        </div>
    </section>

    <section class="py-16 px-4">
        <div class="max-w-7xl mx-auto">
            {% if organizers|length > 0 %}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for orga in organizers %}
                <div class="group bg-white border-4 border-gray-900 p-8 flex flex-col items-center shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
                    {% if orga.logoName %}
                    <div class="border-4 border-gray-900 flex items-center justify-center mb-6 group-hover:rotate-3 transition-transform overflow-hidden bg-white p-2">
                        <img src="{{ ('/uploads/logos/' ~ orga.logoName) | imagine_filter('organizer_logo') }}" alt="{{ orga.companyName }}" class="h-[120px] w-auto object-contain">
                    </div>
                    {% else %}
                    <div class="w-24 h-24 bg-yellow-400 border-4 border-gray-900 flex items-center justify-center mb-6 group-hover:rotate-3 transition-transform">
                        <span class="text-3xl font-black">{{ orga.firstName|first|upper }}{{ orga.lastName|first|upper }}</span>
                    </div>
                    {% endif %}

                    <h2 class="text-2xl font-black uppercase tracking-tighter text-center group-hover:text-indigo-600 transition-colors">
                        {{ orga.companyName ?? (orga.firstName ~ ' ' ~ orga.lastName) }}
                    </h2>

                    {% if orga.city %}
                    <p class="text-xs font-black uppercase tracking-widest text-gray-600 mt-2">
                        {{ orga.postalCode }} {{ orga.city }}
                    </p>
                    {% endif %}

                    {% include 'components/_social_icons.html.twig' with {organizer: orga, class: 'mt-4 flex-wrap justify-center'} only %}

                    <a href="{{ path('app_organizer_detail', {id: orga.id, slug: orga.slug}) }}" class="mt-6 inline-block px-6 py-3 bg-yellow-400 text-gray-900 font-black uppercase italic text-xs tracking-widest border-3 border-gray-900 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                        Voir les evenements
                    </a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-16">
                <div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-12 max-w-lg mx-auto">
                    <p class="text-gray-600 font-black text-lg uppercase">Aucun organisateur pour le moment</p>
                    <p class="text-gray-500 font-bold mt-2 italic">Soyez le premier a rejoindre E-Ticket !</p>
                    <a href="{{ path('app_register') }}" class="inline-block mt-6 px-8 py-4 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                        Devenir organisateur
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </section>

    <section class="relative py-16 px-4 bg-yellow-400 overflow-hidden">
        <div class="absolute inset-0 bg-gray-900 skew-y-2 transform origin-bottom-right translate-y-12"></div>
        <div class="max-w-7xl mx-auto relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8">
            <div class="text-center lg:text-left text-white">
                <h2 class="text-4xl md:text-6xl font-black uppercase tracking-tighter mb-2">
                    Vous etes une association ?
                </h2>
                <p class="text-xl font-bold text-yellow-300 uppercase tracking-tighter italic">
                    Rejoignez E-Ticket et gerez vos evenements simplement.
                </p>
            </div>
            <a href="{{ path('app_register') }}" class="group relative px-12 py-6 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-xl border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
                Creer un compte
            </a>
        </div>
    </section>

</div>
{% endblock %}
