{% load wagtailcore_tags wagtailimages_tags %}

<section class="video-section"
         {% if value.imagem_bg %}
             {% image value.imagem_bg original as bg_image %}
             style="background-image: url('{{ bg_image.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat; {% 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 %}>

    <div class="video-container">
        <div class="video-texto">
            {% if value.titulo %}
            <h2 class="video-titulo">{{ value.titulo|upper }}</h2>
            {% endif %}
            {% if value.subtitulo %}
            <p class="video-subtitulo">{{ value.subtitulo }}</p>
            {% endif %}
        </div>
        {% if value.video_url %}
        <div class="video-player-wrapper">
            <div class="video-player">
                <iframe
                    src="{{ embed_url }}"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen>
                </iframe>
            </div>
        </div>
        {% endif %}

        <!-- Descrição opcional -->
        {% if value.descricao %}
        <div class="video-description">
            {{ value.descricao }}
        </div>
        {% endif %}
    </div>
</section>

<style>
.video-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
}

.video-container {
    max-width: 900px;
    width: 100%;
    text-align: center;
    font-size: 32px;
}

.video-texto {
    text-align: center;
    margin-bottom: 32px;
    justify-self: center;
}

.video-titulo {
    font-size: 32px !important;
    line-height: 120% !important;
    text-align: center;
    vertical-align: middle;
    background: #173741;
    padding: 15px 30px;
    width: fit-content;
    margin: 10px;
    {% if value.cor_titulo %}
    color: {{ value.cor_titulo }}
    {% endif %}
}

/* Subtítulo */
.video-subtitulo {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
    {% if value.cor_subtitulo %}
    color: {{ value.cor_subtitulo }}
    {% endif %}
}

/* Wrapper do player */
.video-player-wrapper {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

/* Player de vídeo */
.video-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Descrição do vídeo */
.video-description {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

/* Responsividade */
@media (max-width: 768px) {
    .video-section {
        padding: 2rem 1rem;
        min-height: 60vh;
    }
    
    .video-player-wrapper {
        padding: 0.8rem;
    }
    
    .video-description {
        font-size: 0.9rem;
        padding: 0.8rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .video-section {
        padding: 1.5rem 0.5rem;
    }
    

}

/* Animação suave */
.video-player-wrapper {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-player-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Efeito de loading no iframe */
.video-player iframe {
    opacity: 1;
    transition: opacity 0.5s ease;
}
</style>

<script>
// Aguardar carregamento dos iframes
document.addEventListener('DOMContentLoaded', function() {
    const iframes = document.querySelectorAll('.video-player iframe');
    
    iframes.forEach(function(iframe) {
        iframe.addEventListener('load', function() {
            this.style.opacity = '1';
        });
    });
});

// Melhorar extração do ID do YouTube
function getYouTubeVideoId(url) {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);
    return (match && match[2].length === 11) ? match[2] : null;
}

// Melhorar extração do ID do Vimeo
function getVimeoVideoId(url) {
    const regExp = /(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
    const match = url.match(regExp);
    return match ? match[1] : null;
}
</script>