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

    {# Stats Section #}
    {% set stats = page.statistiques|sort((a, b) => a.ordre <=> b.ordre) %}

    <section class="border-b bg-primary py-8">
        <div class="container mx-auto grid grid-cols-2 gap-6 px-4 md:grid-cols-4">
            {% for stat in stats %}
                <div data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}" class="text-center text-primary-foreground">
                    <div class="font-heading text-3xl font-black md:text-4xl">
                        {{ stat.value }}
                    </div>
                    <div class="mt-1 text-sm font-medium opacity-80">
                        {{ stat.label }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>

    {# Programmes Section #}
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div data-aos="fade-up" class="mb-12 text-center">
                <span class="font-heading text-sm font-semibold uppercase tracking-widest text-primary">
                    Nos projets
                </span>
                <h2 class="mt-2 font-heading text-3xl font-bold md:text-4xl">
                    Programmes immobiliers
                </h2>
            </div>

            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                {% for prog in projets %}
                    {% include 'visiteur/_projet_unite.html.twig' %}
                {% endfor %}
            </div>

            <div class="mt-12 text-center">
                <a href="{{ path('app_programmes') }}" class="inline-flex items-center justify-center rounded-md border border-slate-200 px-6 py-3 font-heading font-semibold hover:bg-slate-50 transition-colors gap-2">
                    Voir tous les programmes
                    <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"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>

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

    {# CTA Section #}
    {% include 'visiteur/_cta.html.twig' %}
    
{% endblock %}