{% extends 'layouts/front_layout.html.twig' %}

{% block title %}
    {{ page.seoTitre|default("Accueil | Luxim - Promotion Immobilière d'Excellence") }}
{% endblock %}

{% block meta_description %}
    {{ page.seoDescription|default("Luxim conçoit et réalise des programmes immobiliers modernes, accessibles et durables à Abidjan et en Côte d'Ivoire.") }}
{% endblock %}

{% block meta_keyword %}
    {{ page.seoKeywords|default("immobilier, côte d'ivoire, abidjan, luxe, promotion immobilière") }}
{% endblock %}

{% block body %}
    {# Hero Section #}
    {% include 'visiteur/_hero.html.twig' %}

    {# Mission #}
   {# Section Contenu / À Propos #}
     {% include 'visiteur/_contenu.html.twig' %}

    {# atouts Section #}
    {% include 'visiteur/_atouts.html.twig' %}

   
    {# Stats #}
     {% set stats = page.statistiques|sort((a, b) => a.ordre <=> b.ordre) %}
    <section class="bg-primary py-20">
        <div class="container mx-auto grid grid-cols-2 gap-8 px-4 md:grid-cols-4">
            {% for s in stats %}
                <div data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}" class="text-center text-white">
                    <div class="font-heading text-5xl font-black md:text-6xl">
                        {{ s.value }}
                    </div>
                    <div class="mt-3 text-xs font-bold uppercase tracking-[0.2em] opacity-90">
                        {{ s.label }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>

    {# Team Section Dynamique #}
<section class="py-24">
    <div class="container mx-auto px-4">
        <div data-aos="fade-up" class="mb-16 text-center">
            <span class="font-heading text-sm font-semibold uppercase tracking-widest text-primary">
                L'équipe
            </span>
            <h2 class="mt-2 font-heading text-4xl font-bold text-slate-900">
                Notre direction
            </h2>
        </div>

        <div class="grid gap-12 md:grid-cols-3">
            {# On boucle sur la variable 'users' envoyée par le contrôleur #}
            {% for t in users %}
                <div data-aos="fade-up" data-aos-delay="{{ loop.index0 * 150 }}" class="group text-center">
                    <div class="mx-auto mb-8 h-72 w-72 overflow-hidden rounded-[2rem] grayscale transition-all duration-500 group-hover:grayscale-0 shadow-2xl group-hover:rounded-2xl">
                        <img
                            {# Utilisation de la propriété photo de l'entité User #}
                            src="{{ t.photo ? asset('uploads/users/photo/' ~ t.photo) : '' }}"
                            alt="{{ t.fullName }}"
                            class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                        />
                    </div>
                    
                    <h3 class="font-heading text-2xl font-bold text-slate-900">
                        {# Utilisation de la méthode getFullName() définie dans ton entité #}
                        {{ t.fullName }}
                    </h3>
                    
                    <p class="mt-2 text-primary font-bold uppercase tracking-widest text-sm">
                        {# Récupération du titre du poste via la relation ManyToOne #}
                        {{ t.poste ? t.poste.libelle : 'Direction Luxim' }}
                    </p>
                </div>
            {% else %}
                <p class="col-span-3 text-center text-slate-500">Aucun membre de la direction à afficher.</p>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}