{% 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 %}

    {# --- SECTION 1: BANNIÈRE HÉRO --- #}
    <div class="bg-indigo-700 text-white py-24 px-4 sm:px-6 lg:px-8 shadow-2xl">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-5xl md:text-6xl font-extrabold tracking-tight mb-4">
                {{ 'home_hero.title'|trans }}
            </h1>
            <p class="mt-3 max-w-2xl mx-auto text-xl text-indigo-200 sm:mt-4">
                {{ 'home_hero.subtitle'|trans }}
            </p>
            <div class="mt-10 flex justify-center space-x-4">
                <a href="{{ url('app_members') }}" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-indigo-700 bg-white hover:bg-gray-100 shadow-lg transition duration-300">
                    {{ 'home_hero.button_members'|trans }}
                </a>
                <a href="{{ url('app_contact') }}" class="inline-flex items-center justify-center px-8 py-3 border border-white text-base font-medium rounded-full text-white bg-indigo-500 hover:bg-indigo-400 transition duration-300">
                    {{ 'home_hero.button_contact'|trans }}
                </a>
            </div>
        </div>
    </div>

    {# --- SECTION 2: À PROPOS DE NOUS --- #}
    <div class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">{{ 'home_about.pretitle'|trans }}</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    {{ 'home_about.title'|trans }}
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    {{ 'home_about.text_1'|trans }}
                </p>
            </div>

            <div class="mt-10">
                <p class="text-lg text-gray-700">
                    {{ 'home_about.text_2'|trans }}
                </p>
            </div>
        </div>
    </div>

    {# --- SECTION 3: NOS ACTIVITÉS (CARACTÉRISTIQUES) --- #}
    <div class="bg-gray-50 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center mb-12">
                <h2 class="text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    {{ 'home_activities.title'|trans }}
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">

                {# Activité 1: Cosplay #}
                <div class="p-6 bg-white rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <span class="text-4xl text-indigo-500 mb-4 inline-block">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mask"><path d="M12 7h.01"/><path d="M22 17c0 4-4 4-4 4H6c-4 0-4-4-4-4V7c0-4 4-4 4-4h12c4 0 4 4 4 4v10z"/><path d="M9 13s1.5 2 3 2 3-2 3-2"/></svg>
                    </span>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ 'home_activities.cosplay_title'|trans }}</h3>
                    <p class="text-gray-600">{{ 'home_activities.cosplay_text'|trans }}</p>
                </div>

                {# Activité 2: Communauté & Événements #}
                <div class="p-6 bg-white rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <span class="text-4xl text-indigo-500 mb-4 inline-block">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 21a8 8 0 0 0-16 0"/><path d="M16 3.999a4.5 4.5 0 0 1-2.9 3.86"/><circle cx="16" cy="7.999" r="3.5"/></svg>
                    </span>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ 'home_activities.community_title'|trans }}</h3>
                    <p class="text-gray-600">{{ 'home_activities.community_text'|trans }}</p>
                </div>

                {# Activité 3: Diversité et Inclusion #}
                <div class="p-6 bg-white rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <span class="text-4xl text-indigo-500 mb-4 inline-block">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-handshake"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5"/><path d="M12 6.5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5.5l-.33-1.66a1 1 0 0 0-.96-.75H12"/><path d="m18 13-1.4-1.4"/><path d="m14 17 1.4 1.4"/></svg>
                    </span>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ 'home_activities.diversity_title'|trans }}</h3>
                    <p class="text-gray-600">{{ 'home_activities.diversity_text'|trans }}</p>
                </div>
            </div>
        </div>
    </div>

    {# --- SECTION 4: PARTENAIRES --- #}
    <div class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center mb-12">
                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">{{ 'home_partners.pretitle'|trans }}</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    {{ 'home_partners.title'|trans }}
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    {{ 'home_partners.subtitle'|trans }}
                </p>
            </div>

            {# Définition de la grille responsive pour la boucle #}
            <div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-3">

                {# BOUCLE SUR LES PARTENAIRES #}
                {# NOTE: La variable `partners` doit être passée par le contrôleur (e.g., [ { image: '/asset/partenair/house-of-geek.jpg', name: 'House Of Geek', facebook_link: 'lien' }, ... ] ) #}
                {% for partner in partners|default([
                    { 'w':64,'h':64, 'image': '/assets/partenair/house-of-geek.jpg', 'name': 'House Of Geek', 'facebook_link': 'https://www.facebook.com/houseofgeek02' },
                    { 'w':64,'h':64, 'image': '/assets/partenair/cosplay-familly.jpg', 'name': 'Cosplays family arts', 'facebook_link': 'https://www.facebook.com/profile.php?id=61568494078902' },
                    { 'w':64,'h':64, '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/' },
                    { 'w':64,'h':64, 'image': '/assets/partenair/siteconseil.png', 'name': 'SARL SITECONSEIL', 'facebook_link': 'https://www.facebook.com/siteconseil','website':'https://www.siteconseil.fr' }
                ]) %}
                    {# Conteneur du partenaire #}
                    <a  href="{% if partner.website is defined and partner.website %}{{ partner.website }}{% else %}{{ partner.facebook_link ?? '#' }}{% endif %}" target="_blank"
                       class="col-span-1 flex flex-col items-center justify-center py-6 px-4 bg-white rounded-xl shadow-md border border-gray-100 hover:shadow-lg hover:border-indigo-200 transition duration-300 group">

                        {# Logo/Image du partenaire #}
                        <img class="max-h-16 w-auto object-contain mb-3"
                            {# MODIFICATION 1 : Utilisation du nouveau filtre 'avatar_partner' #}
                             src="{{ partner.image | imagine_filter('avatar_partner') }}"
                             alt="{{ partner.name }}"
                             width="64"
                             height="64">

                        {# Fallback en texte si l'image ne se charge pas #}
                        <span class="text-xl font-bold text-indigo-700 group-hover:text-indigo-900 transition duration-300">
                        {{ partner.name }}
                    </span>

                        {# Icône Facebook (Optionnelle) #}
                        {# Le reste du bloc de code pour l'icône reste inchangé #}
                        {% if partner.website is defined and partner.website %}
                            <span class="text-sm text-gray-500 mt-2 flex items-center">
                            Site internet
                        </span>
                        {% else %}
                            {% if partner.facebook_link is defined and partner.facebook_link %}
                                <span class="text-sm text-gray-500 mt-2 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook mr-1"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                            Page Facebook
                        </span>
                            {% endif %}
                        {% endif %}
                    </a>
                {% endfor %}
                {# FIN BOUCLE PARTENAIRES #}
            </div>
        </div>
    </div>

    {# --- SECTION 5: APPEL À L'ADHÉSION (CTA) --- #}
    <div class="bg-indigo-600">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
            <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                <span class="block">{{ 'home_cta.title'|trans }}</span>
                <span class="block text-indigo-200">{{ 'home_cta.subtitle'|trans }}</span>
            </h2>
            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
                <div class="inline-flex rounded-md shadow">
                    <a href="{{ url('app_contact') }}" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 transition duration-300">
                        {{ 'home_cta.button'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
