{% load wagtailimages_tags %}

<section class="semana-countdown-section" id="semana-countdown"
    style="
        background-color: {{ value.cor_fundo }};
        {% if value.imagem_fundo %}position: relative; overflow: hidden;{% endif %}
        {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}
    ">

    {% if value.imagem_fundo %}
        {% image value.imagem_fundo original as bg_img %}
        <div class="semana-countdown-bg"
             style="background-image: url('{{ bg_img.url }}');"></div>
        <div class="semana-countdown-overlay"
             style="background-color: rgba(0,0,0,{{ value.overlay_opacity }});"></div>
    {% endif %}

    <div class="semana-countdown-content">
        {% if value.titulo %}
            <h2 class="semana-countdown-title" style="color: {{ value.cor_titulo }};">
                {{ value.titulo }}
            </h2>
        {% endif %}

        {% if value.subtitulo %}
            <p class="semana-countdown-subtitle" style="color: {{ value.cor_labels }};">
                {{ value.subtitulo }}
            </p>
        {% endif %}

        <div class="semana-countdown-timer" id="semana-timer-{{ value.data_evento|date:'U' }}">
            <div class="semana-countdown-unit">
                <span class="semana-countdown-number" style="color: {{ value.cor_numeros }};" id="semana-days-{{ value.data_evento|date:'U' }}">00</span>
                <span class="semana-countdown-label" style="color: {{ value.cor_labels }};">Dias</span>
            </div>
        </div>

        <p class="semana-countdown-ended" id="semana-ended-{{ value.data_evento|date:'U' }}"
           style="color: {{ value.cor_titulo }}; display: none;">
            {{ value.texto_encerrado }}
        </p>
    </div>
</section>

<style>
.semana-countdown-section {
    position: relative;
    padding: 80px 20px;
    text-align: center;
}

.semana-countdown-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.semana-countdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.semana-countdown-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    margin: 0 auto;
    background-color: #E96335;
    border-radius: 24px;
}

.semana-countdown-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.semana-countdown-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 48px;
    opacity: 0.9;
}

.semana-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.semana-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.semana-countdown-number {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.semana-countdown-label {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
}

.semana-countdown-sep {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    line-height: 1;
    align-self: flex-start;
    padding-top: 4px;
}

.semana-countdown-ended {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 480px) {
    .semana-countdown-unit {
        min-width: 70px;
    }

    .semana-countdown-sep {
        padding-top: 0;
    }
}
</style>

<script>
(function () {
    var targetTimestamp = {{ value.data_evento|date:'U' }} * 1000;
    var suffix = '{{ value.data_evento|date:"U" }}';

    var daysEl     = document.getElementById('semana-days-' + suffix);
    var hoursEl    = document.getElementById('semana-hours-' + suffix);
    var minutesEl  = document.getElementById('semana-minutes-' + suffix);
    var secondsEl  = document.getElementById('semana-seconds-' + suffix);
    var timerEl    = document.getElementById('semana-timer-' + suffix);
    var endedEl    = document.getElementById('semana-ended-' + suffix);

    function pad(n) {
        return String(n).padStart(2, '0');
    }

    function tick() {
        var now = Date.now();
        var diff = targetTimestamp - now;

        if (diff <= 0) {
            timerEl.style.display = 'none';
            endedEl.style.display = 'block';
            return;
        }

        var days    = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours   = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((diff % (1000 * 60)) / 1000);

        daysEl.textContent    = pad(days);
        hoursEl.textContent   = pad(hours);
        minutesEl.textContent = pad(minutes);
        secondsEl.textContent = pad(seconds);

        setTimeout(tick, 1000);
    }

    tick();
})();
</script>