{% extends 'base.html.twig' %}
{% set useContainer = false %}

{% block body %}

    <div class="container-fluid">
        {# 🌟 CAROUSEL (React Component) #}
        <carousel-home></carousel-home>
    </div>
    <section class="stats-modern" data-observe>
        <h1>L'AS Manissieux en chiffres</h1>
        <div class="stats-grid">
            <div class="stat-modern">
                <span class="emoji">🧑‍🤝‍🧑</span>
                <p class="number counter" data-target="385">0</p>
                <p class="label">Licencié(e)s</p>
            </div>
            <div class="stat-modern">
                <span class="emoji">🥅</span>
                <p class="number counter" data-target="22">0</p>
                <p class="label">Équipes</p>
            </div>
            <div class="stat-modern">
                <span class="emoji">🎓</span>
                <p class="number counter" data-target="28">0</p>
                <p class="label">Éducateurs</p>
            </div>
        </div>
    </section>

    {# 📰 Articles épinglés #}
    <section class="home-actualite-section fade-in p-4" data-observe>
        <h2 class="home-section-title">Notre actualité</h2>

        <div class="home-actualite-grid">
            {% for article in articlesPinned %}
                <a href="{{ path('app_article_show', { id: article.id }) }}" class="home-actualite-card slide-in-left" data-observe>
                    {% if article.banner %}
                        <img src="{{ vich_uploader_asset(article, 'bannerFile') | imagine_filter('article_front') }}" alt="{{ article.title }}">
                    {% endif %}
                    <div class="content">
                        <h3 class="title">{{ article.title }}</h3>
                        <p class="date">Publié le {{ article.createdAt|date('d/m/Y') }}</p>
                        <p class="desc">{{ article.shortDescription|slice(0, 150) }}...</p>
                    </div>
                </a>
            {% else %}
                <p class="text-center col-span-full text-gray-500">Aucun article disponible.</p>
            {% endfor %}
        </div>
    </section>
    {# 🤝 Nos Partenaires (Fade-in) #}
    <section class="home-partners-section fade-in" data-observe>
        <h2 class="home-section-title">Nos Partenaires</h2>

        <div class="home-partners-logos">
            {% for partner in partners %}
                {% if partner.logo %}
                    <a href="{{ partner.link ?: '#' }}"
                       target="{{ partner.link ? '_blank' : '_self' }}"
                       class="home-partner-logo"
                       title="{{ partner.name }}">
                        <img src="{{ vich_uploader_asset(partner, 'logoFile') }}"
                             alt="{{ partner.name }}"
                             loading="lazy">
                    </a>
                {% endif %}
            {% else %}
                <p class="text-center col-span-full text-gray-500">Aucun partenaire enregistré.</p>
            {% endfor %}
        </div>
    </section>
{% endblock %}

{% block js %}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add("visible");
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.2 });

            document.querySelectorAll("[data-observe]").forEach(element => {
                observer.observe(element);
            });

            const counters = document.querySelectorAll(".counter");
            counters.forEach(counter => {
                let target = +counter.getAttribute("data-target");
                let count = 0;
                let speed = 50;
                let updateCount = () => {
                    count += Math.ceil(target / speed);
                    counter.innerText = count;
                    if (count < target) {
                        setTimeout(updateCount, 30);
                    } else {
                        counter.innerText = target;
                    }
                };
                updateCount();
            });
        });
    </script>
{% endblock %}