{% extends 'base.twig' %}

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

{% block canonical_url %}<link rel="canonical" href="{{ url('app_home') }}" />{% 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 }}"
          }
        ]
      }
    </script>
{% endblock %}

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

        {# --- SECTION 1: HERO (COMMAND CENTER) --- #}
        <section class="relative min-h-[90vh] flex items-center justify-center bg-white border-b-8 border-gray-900 px-4 pt-20 pb-32">
            {# Décoration de fond #}
            <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
                <span class="text-[30rem] font-black uppercase leading-none block -rotate-12 translate-y-20">ECOSPLAY</span>
            </div>

            <div class="max-w-7xl mx-auto relative z-10 text-center">

                <h1 class="text-6xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] mb-8">
                    <span class="block">{{ 'home_hero.title'|trans }}</span>
                </h1>

                <p class="max-w-2xl mx-auto text-xl md:text-3xl font-bold text-gray-600 mb-12 border-l-8 border-indigo-600 pl-6 text-left md:text-center md:border-l-0 md:pl-0">
                    {{ 'home_hero.subtitle'|trans }}
                </p>

                <div class="flex flex-col sm:flex-row justify-center gap-6">
                    <a href="{{ url('app_members') }}" class="group relative px-10 py-6 bg-indigo-600 text-white font-black uppercase italic tracking-widest 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">
                        {{ 'home_hero.button_members'|trans }}
                    </a>
                    <a href="{{ url('app_contact') }}" class="group relative px-10 py-6 bg-white text-gray-900 font-black uppercase italic tracking-widest 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">
                        {{ 'home_hero.button_contact'|trans }}
                    </a>
                </div>
            </div>
        </section>

        {# --- MARQUEE : TECH BAR --- #}
        <div class="bg-gray-900 py-6 border-b-4 border-indigo-600 overflow-hidden">
            <div class="flex whitespace-nowrap animate-marquee italic">
                {% for i in 1..10 %}
                    <span class="text-white font-black uppercase mx-8 text-2xl opacity-80">
                    {{ 'home_roll'|trans }}
                </span>
                {% endfor %}
            </div>
        </div>

        {# --- SECTION 2: À PROPOS (THE MISSION) --- #}
        <section class="py-24 px-4 bg-white border-b-4 border-gray-900">
            <div class="max-w-7xl mx-auto  items-center">
                <div>
                    <p class="text-indigo-600 font-black uppercase tracking-[0.3em] mb-4">// {{ 'home_about.pretitle'|trans }}</p>
                    <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-8 leading-none">
                        {{ 'home_about.title'|trans }}
                    </h2>
                    <div class="space-y-6 text-xl font-bold text-gray-700 leading-relaxed">
                        <p class="border-l-8 border-yellow-400 pl-6 italic">{{ 'home_about.text_1'|trans }}</p>
                        <p>{{ 'home_about.text_2'|trans }}</p>
                    </div>
                </div>
            </div>
        </section>

        {# --- SECTION 3: ACTIVITÉS (CORE SYSTEMS) --- #}
        <section class="bg-gray-50 py-24 px-4">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-20 text-center">
                    {{ 'home_activities.title'|trans }}
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                    {# Activité 1 #}
                    <div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#4f46e5] transition-all">
                        <div class="w-16 h-16 bg-indigo-600 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
                            <i class="fas fa-mask"></i>
                        </div>
                        <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">{{ 'home_activities.cosplay_title'|trans }}</h3>
                        <p class="text-gray-600 font-bold leading-tight italic">{{ 'home_activities.cosplay_text'|trans }}</p>
                    </div>

                    {# Activité 2 #}
                    <div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#ef4444] transition-all md:translate-y-8">
                        <div class="w-16 h-16 bg-red-600 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">{{ 'home_activities.community_title'|trans }}</h3>
                        <p class="text-gray-600 font-bold leading-tight italic">{{ 'home_activities.community_text'|trans }}</p>
                    </div>

                    {# Activité 3 #}
                    <div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#eab308] transition-all">
                        <div class="w-16 h-16 bg-yellow-500 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">{{ 'home_activities.diversity_title'|trans }}</h3>
                        <p class="text-gray-600 font-bold leading-tight italic">{{ 'home_activities.diversity_text'|trans }}</p>
                    </div>
                </div>
            </div>
        </section>

        {# --- SECTION 4: PARTENAIRES (ALLIES) --- #}
        <section class="bg-white py-24 px-4 border-t-4 border-gray-900">
            <div class="max-w-7xl mx-auto">
                <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                    <div>
                        <p class="text-indigo-600 font-black uppercase tracking-[0.3em] mb-4">// {{ 'home_partners.pretitle'|trans }}</p>
                        <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-none">
                            {{ 'home_partners.title'|trans }}
                        </h2>
                    </div>
                    <p class="text-xl font-bold text-gray-500 max-w-sm italic">{{ 'home_partners.subtitle'|trans }}</p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    {% for partner in partners|default([
                        { 'image': '/assets/partenair/house-of-geek.jpg', 'name': 'House Of Geek', 'facebook_link': 'https://www.facebook.com/houseofgeek02' },
                        { 'image': '/assets/partenair/cosplay-familly.jpg', 'name': 'Cosplays family arts', 'facebook_link': 'https://www.facebook.com/profile.php?id=61568494078902' },
                        { 'image': '/assets/partenair/couronnes-d-or.jpg', 'name': 'Le Comité des Couronnes D’or', 'facebook_link': 'https://www.facebook.com/p/Le-Comit%C3%A9-des-Couronnes-Dor-61576548182126/' }
                    ]) %}
                        <a href="{% if partner.website is defined and partner.website %}{{ partner.website }}{% else %}{{ partner.facebook_link ?? '#' }}{% endif %}" target="_blank"
                           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">

                            <div class="w-32 h-32 bg-gray-100 border-2 border-gray-900 flex items-center justify-center p-4 mb-6 group-hover:rotate-3 transition-transform">
                                <img class="max-w-full max-h-full object-contain filter grayscale group-hover:grayscale-0"
                                     src="{{ partner.image | imagine_filter('avatar_partner') }}"
                                     alt="{{ partner.name }}">
                            </div>

                            <span class="text-2xl font-black uppercase tracking-tighter text-gray-900 mb-2 group-hover:text-indigo-600">
                            {{ partner.name }}
                        </span>

                            <span class="text-xs font-black uppercase tracking-widest text-gray-400">
                            {% if partner.website is defined and partner.website %}{{ 'partner_w'|trans }}{% else %}{{ 'partner_l'|trans }}{% endif %}
                        </span>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </section>

        {# --- SECTION 5: CTA (JOIN THE SQUAD) --- #}
        <section class="relative py-24 px-4 bg-indigo-600 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-12">
                <div class="text-center lg:text-left text-white">
                    <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-4">
                        {{ 'home_cta.title'|trans }}
                    </h2>
                    <p class="text-2xl font-bold text-indigo-200 uppercase tracking-tighter italic">
                        {{ 'home_cta.subtitle'|trans }}
                    </p>
                </div>

                <a href="{{ url('app_recruit') }}" class="group relative px-16 py-8 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-2xl border-4 border-gray-900 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
                    {{ 'home_cta.button'|trans }}
                </a>
            </div>
        </section>

    </div>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 40s linear infinite;
        }
    </style>
{% endblock %}