{% 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;"
         {% endif %}>
    
    <div class="video-container">
        <!-- Título da seção -->
        {% if value.titulo %}
        {{ value.titulo|upper }}
        {% endif %}
        {% if value.subtitulo %}
        <p class="video-subtitulo">{{ value.subtitulo }}</p>
        {% endif %}


        <!-- Player de vídeo -->
        {% if value.video_url %}
        <div class="video-player-wrapper">
            <div class="video-player">
                {% if "youtube.com" in value.video_url or "youtu.be" in value.video_url %}
                    <!-- YouTube Embed -->
                    {% if "watch?v=" in value.video_url %}
                        {% with video_id=value.video_url|slice:"-11:" %}
                        <iframe 
                            src="{{ video_id }}" 
                            frameborder="0" 
                            allowfullscreen>
                        </iframe>
                        {% endwith %}
                    {% elif "youtu.be" in value.video_url %}
                        {% with video_id=value.video_url|slice:"-11:" %}
                        <iframe 
                            src="https://www.youtube.com/embed/{{ video_id }}?rel=0&showinfo=0&modestbranding=1" 
                            frameborder="0" 
                            allowfullscreen>
                        </iframe>
                        {% endwith %}
                    {% endif %}
                {% elif "vimeo.com" in value.video_url %}
                    <!-- Vimeo Embed -->
                    {% with video_id=value.video_url|slice:"-9:" %}
                    <iframe 
                        src="https://player.vimeo.com/video/{{ video_id }}" 
                        frameborder="0" 
                        allowfullscreen>
                    </iframe>
                    {% endwith %}
                {% else %}
                    <!-- Fallback para outras URLs -->
                    <iframe 
                        src="{{ value.video_url }}" 
                        frameborder="0" 
                        allowfullscreen>
                    </iframe>
                {% endif %}
            </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;
}

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

/* 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: 0;
    transition: opacity 0.5s ease;
}

.video-player iframe:loaded {
    opacity: 1;
}
</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>