{% load wagtailimages_tags static %}

<style>
/* --- Cards base --- */
.profile-card_semana {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}

.card_semana {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.card-image_semana {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s;
}

.card-overlay_semana {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.3s;
}

.card-title_semana {
    color: white;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 15px;
}

.preview-text_semana {
    color: white;
    display: block;
    opacity: 1;
    max-height: 72px;
    overflow: hidden;
    transition: all 0.4s;
}

.full-text_semana {
    color: white;
    max-height: 0;
    opacity: 0;
    transition: all 0.4s;
}

.card_semana:hover .full-text_semana {
    max-height: 300px;
    opacity: 1;
    margin-bottom: 20px;
}

.card_semana:hover .preview-text_semana {
    opacity: 0;
    max-height: 0;
}

.social-links_semana {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s;
}

.card_semana:hover .social-links_semana {
    opacity: 1;
    transform: translateY(0);
}

.social-link_semana {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* --- Seção wrapper --- */
.participantes-section_semana {
    width: 100%;
    padding: 48px 24px;
    box-sizing: border-box;
}

/* --- Header --- */
.participantes-header_semana {
    text-align: center;
    margin-bottom: 40px;
}

.participantes-titulo_semana {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
}

.participantes-subtitulo_semana {
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* --- Grid --- */
.participantes-grid_semana {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.participantes-grid__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.participantes-grid__track .profile-card_semana {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* --- Carrossel --- */
.participantes-carousel_semana {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 52px;
    box-sizing: border-box;
}

.participantes-carousel__track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
    cursor: grab;
}

.participantes-carousel__track:active {
    cursor: grabbing;
}

.participantes-carousel_semana .profile-card_semana {
    flex: 0 0 calc(25% - 18px);
    max-width: none;
    margin: 0;
}

.participantes-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.participantes-carousel__btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.participantes-carousel__btn--prev { left: 0; }
.participantes-carousel__btn--next { right: 0; }

/* --- Cards dentro da seção --- */
.participantes-section_semana .card_semana {
    height: 550px;
}

.participantes-section_semana .card-overlay_semana {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
}

.participantes-section_semana .card-title_semana {
    font-size: 1.5rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.participantes-section_semana .preview-text_semana {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: relative;
    z-index: 2;
}

.participantes-section_semana .full-text_semana {
    max-height: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 80px;
    left: 20px;
    right: 20px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1;
}

.participantes-section_semana .card_semana:hover .full-text_semana {
    opacity: 1;
    visibility: visible;
}

.participantes-section_semana .card_semana:hover .card-overlay_semana {
    padding-bottom: 80px;
}

.participantes-section_semana .card_semana:hover .preview-text_semana {
    opacity: 0;
    visibility: hidden;
    max-height: none;
}

.participantes-section_semana .social-links_semana {
    opacity: 0;
    visibility: hidden;
    transform: none;
    margin-top: 20px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: relative;
    z-index: 2;
}

.participantes-section_semana .card_semana:hover .social-links_semana {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.participantes-section_semana .social-link_semana {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.participantes-section_semana .social-link_semana:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- Responsivo --- */
@media (max-width: 1024px) {
    .participantes-grid__track {
        grid-template-columns: repeat(2, 1fr);
    }

    .participantes-carousel_semana .profile-card_semana {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 600px) {
    .participantes-grid__track {
        grid-template-columns: 1fr;
    }

    .participantes-carousel_semana .profile-card_semana {
        flex: 0 0 100%;
    }
}
</style>

{% if value.background_imagem %}
    {% image value.background_imagem original as bg_img %}
{% endif %}

<section class="participantes-section_semana"
    {% if value.background_imagem %}
        style="background-image: url('{{ bg_img.url }}'); background-size: cover; background-position: center; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}"
    {% elif value.background_cor %}
        style="background-color: {{ value.background_cor }}; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}"
    {% elif value.mostrar_linha %}
        style="border-bottom: 16px solid {{ value.cor_linha }};"
    {% endif %}
>
    {% if value.titulo or value.subtitulo %}
    <div class="participantes-header_semana">
        {% if value.titulo %}
        <h2 class="participantes-titulo_semana" style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">{{ value.titulo }}</h2>
        {% endif %}
        {% if value.subtitulo %}
        <p class="participantes-subtitulo_semana" style="color: {{ value.cor_subtitulo|default:'#FFFFFF' }};">{{ value.subtitulo }}</p>
        {% endif %}
    </div>
    {% endif %}

    <div class="{% if value.layout == 'carousel' %}participantes-carousel_semana{% else %}participantes-grid_semana{% endif %}">
        {% if value.layout == 'carousel' %}
        <button class="participantes-carousel__btn participantes-carousel__btn--prev" aria-label="Anterior">&#8249;</button>
        {% endif %}

        <div class="{% if value.layout == 'carousel' %}participantes-carousel__track{% else %}participantes-grid__track{% endif %}">
            {% for p in value.participantes %}
            <div class="profile-card_semana">
                <div class="card_semana">
                    {% if p.foto %}
                        {% image p.foto fill-400x550 as img %}
                        <img class="card-image_semana" src="{{ img.url }}" alt="{{ p.nome }}">
                    {% endif %}
                    <div class="card-overlay_semana">
                        <h3 class="card-title_semana">{{ p.nome }}</h3>
                        <div class="preview-text_semana">
                            {% if p.cargo %}<p>{{ p.cargo }}</p>{% endif %}
                            {% if p.empresa %}<p>{{ p.empresa }}</p>{% endif %}
                        </div>
                        {% if p.descricao %}<div class="full-text_semana">{{ p.descricao }}</div>{% endif %}
                        <div class="social-links_semana">
                            {% if p.link_linkedin %}<a class="social-link_semana" href="{{ p.link_linkedin }}" target="_blank" aria-label="LinkedIn">in</a>{% endif %}
                            {% if p.link_instagram %}<a class="social-link_semana" href="{{ p.link_instagram }}" target="_blank" aria-label="Instagram">ig</a>{% endif %}
                            {% if p.link_twitter %}<a class="social-link_semana" href="{{ p.link_twitter }}" target="_blank" aria-label="Twitter">x</a>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        {% if value.layout == 'carousel' %}
        <button class="participantes-carousel__btn participantes-carousel__btn--next" aria-label="Próximo">&#8250;</button>
        {% endif %}
    </div>
</section>

{% if value.layout == 'carousel' %}
<script src="{% static 'enap_designsystem/blocks/participantes_carousel.js' %}"></script>
{% endif %}