{% load wagtailcore_tags %}

<section class="gn-section" style="background-color: {{ value.cor_fundo }}; padding: 60px 0;">
    <div class="container">
        {% if value.titulo %}
        <h2 class="gn-titulo" style="color: {{ value.cor_titulo }};">
            {{ value.titulo }}
        </h2>
        {% endif %}

        <div class="gn-wrapper" id="gn-{{ block.id|default:'main' }}">

            {% if value.lista_numeros|length > 3 %}
            <button class="gn-btn gn-btn--prev" aria-label="Anterior">&#8249;</button>
            {% endif %}

            <div class="gn-viewport">
                <div class="gn-track">
                    {% for item in value.lista_numeros %}
                    <div class="gn-card" style="background-color: {{ item.cor_card }};">
                        <div class="gn-numero" style="color: {{ item.cor_fonte }};">
                            {{ item.numero }}
                        </div>
                        <div class="gn-descricao" style="color: {{ item.cor_fonte }};">
                            {{ item.descricao }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            {% if value.lista_numeros|length > 3 %}
            <button class="gn-btn gn-btn--next" aria-label="Próximo">&#8250;</button>
            {% endif %}

        </div>

        {% if value.lista_numeros|length > 3 %}
        <div class="gn-dots" id="gn-dots-{{ block.id|default:'main' }}"></div>
        {% endif %}
    </div>
</section>

<style>
    .gn-section .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .gn-titulo {
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 48px;
    }

    .gn-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
    }

    .gn-viewport {
        flex: 1;
        overflow: hidden;
    }

    .gn-track {
        display: flex;
        gap: 24px;
        transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    .gn-card {
        flex: 0 0 calc((100% - 48px) / 3);
        border-radius: 16px;
        padding: 56px 32px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        box-sizing: border-box;
    }

    .gn-numero {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 24px;
    }

    .gn-descricao {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

    .gn-btn {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 3rem;
        cursor: pointer;
        padding: 0 8px;
        line-height: 1;
        opacity: 0.7;
        transition: opacity 0.2s;
        flex-shrink: 0;
    }

    .gn-btn:hover {
        opacity: 1;
    }

    .gn-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 32px;
    }

    .gn-dot {
        width: 32px;
        height: 6px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 0.35);
        border: none;
        cursor: pointer;
        transition: background-color 0.25s, width 0.25s;
        padding: 0;
    }

    .gn-dot.active {
        background-color: #ffffff;
        width: 48px;
    }

    @media (max-width: 768px) {
        .gn-card {
            flex: 0 0 calc(100% - 0px);
        }

        .gn-track {
            gap: 16px;
        }

        .gn-numero {
            font-size: 2.25rem;
        }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .gn-card {
            flex: 0 0 calc((100% - 24px) / 2);
        }
    }
</style>

<script>
(function () {
    var wrapper = document.getElementById('gn-{{ block.id|default:"main" }}');
    if (!wrapper) return;

    var track = wrapper.querySelector('.gn-track');
    var cards = Array.from(track.querySelectorAll('.gn-card'));
    var total = cards.length;

    if (total <= 3) return;

    var dotsContainer = document.getElementById('gn-dots-{{ block.id|default:"main" }}');
    var prevBtn = wrapper.querySelector('.gn-btn--prev');
    var nextBtn = wrapper.querySelector('.gn-btn--next');

    var perPage = getPerPage();
    var currentPage = 0;
    var totalPages = Math.ceil(total / perPage);

    function getPerPage() {
        var w = window.innerWidth;
        if (w <= 768) return 1;
        if (w <= 1024) return 2;
        return 3;
    }

    function getCardWidth() {
        var viewport = wrapper.querySelector('.gn-viewport');
        var gap = perPage === 1 ? 16 : 24;
        return (viewport.offsetWidth - gap * (perPage - 1)) / perPage + gap;
    }

    function goTo(page) {
        currentPage = ((page % totalPages) + totalPages) % totalPages;
        var offset = currentPage * perPage * getCardWidth();
        track.style.transform = 'translateX(-' + offset + 'px)';
        updateDots();
    }

    function buildDots() {
        if (!dotsContainer) return;
        dotsContainer.innerHTML = '';
        for (var i = 0; i < totalPages; i++) {
            var dot = document.createElement('button');
            dot.className = 'gn-dot' + (i === 0 ? ' active' : '');
            dot.setAttribute('aria-label', 'Ir para grupo ' + (i + 1));
            dot.dataset.page = i;
            dot.addEventListener('click', function () {
                goTo(parseInt(this.dataset.page));
            });
            dotsContainer.appendChild(dot);
        }
    }

    function updateDots() {
        if (!dotsContainer) return;
        dotsContainer.querySelectorAll('.gn-dot').forEach(function (dot, i) {
            dot.classList.toggle('active', i === currentPage);
        });
    }

    prevBtn && prevBtn.addEventListener('click', function () { goTo(currentPage - 1); });
    nextBtn && nextBtn.addEventListener('click', function () { goTo(currentPage + 1); });

    var startX = 0;
    track.addEventListener('touchstart', function (e) { startX = e.touches[0].clientX; }, { passive: true });
    track.addEventListener('touchend', function (e) {
        var diff = startX - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 40) goTo(diff > 0 ? currentPage + 1 : currentPage - 1);
    }, { passive: true });

    window.addEventListener('resize', function () {
        perPage = getPerPage();
        totalPages = Math.ceil(total / perPage);
        currentPage = 0;
        buildDots();
        goTo(0);
    });

    buildDots();
    goTo(0);
})();
</script>