<?php
$datas = $args['data'];
$titre = isset($datas['titre']) ? $datas['titre'] : '';
$soustitre = isset($datas['sous-titre']) ? $datas['sous-titre'] : '';
$items = isset($datas['videos_grid']) ? $datas['videos_grid'] : '';
$grid_columns = count($items);
?>
<style>
    @media (min-width: 768px) {
        .video-grid {
            display: grid;
            grid-template-columns: repeat(<?php echo $grid_columns ?>, 1fr);
        }
    }
</style>

<section>
    <div class="container-fluid">
        <?php if (!empty($titre)) : ?>
            <div class="scroll-appear flex md:flex-col gap-4 mb-8 md:mb-16 justify-center text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20 w-full max-w-4xl mx-auto text-white pointer-events-none">
                <?php

                if (is_front_page()) {
                ?>
                    <h1 class="heading-section scroll-appear leading-tight"><?php echo $titre; ?>
                    </h1>
                    <small class="block scroll-appear text-xl md:text-3xl font-cursive italic leading-tight normal-case">
                        <?php echo $soustitre; ?>
                    </small>
                <?php } else { ?>
                    <h2 class="heading-section scroll-appear leading-tight"><?php echo $titre; ?></h2>
                    <small class="block scroll-appear text-xl md:text-3xl font-cursive italic leading-tight normal-case">
                        <?php echo $soustitre; ?>
                    </small>
                <?php } ?>
            </div>
        <?php
        endif; ?>
        <div class="video-grid z-0" data-columns="<?php echo esc_attr($grid_columns); ?>">

            <?php foreach ($items as $item) :
                $video_url = $item['video']['url'];
                $video_poster = $item['poster'];
                $video_titre = $item['titre'];
                $video_lien = $item['lien'];

            ?>
                <a href="<?php echo esc_url($video_lien['url']); ?>"
                    target="<?php echo esc_attr($video_lien['target']); ?>" class="video-item relative">
                    <div class="video-wrapper relative  aspect-video md:aspect-[12/16] cursor-pointer overflow-hidden group"
                        data-video-url="<?php echo esc_url($video_url); ?>">
                        <?php if ($video_poster) : ?>
                            <?php echo wp_get_attachment_image($video_poster['ID'], 'large', false, array('class' => 'video-poster ')); ?>
                        <?php endif; ?>
                        <video class="video-element"
                            src="<?php echo esc_url($video_url); ?>"
                            muted
                            loop
                            playsinline>
                        </video>
                        <?php if ($video_titre) : ?>
                            <div class="video-footer absolute bottom-4 left-4 z-10 text-white text-center w-full ">
                                <span class="video-titre "><?php echo esc_html($video_titre); ?></span>
                                <button class="video-button "><?php echo esc_html($video_lien['title']); ?></button>
                            </div>
                        <?php endif; ?>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const videoWrappers = document.querySelectorAll('.video-wrapper');

        if (videoWrappers.length > 0) {
            videoWrappers.forEach(wrapper => {
                const video = wrapper.querySelector('.video-element');

                wrapper.addEventListener('mouseenter', () => {
                    video.play();
                });

                wrapper.addEventListener('mouseleave', () => {
                    video.pause();
                    video.currentTime = 0;
                });
            });
        }
    });
</script>
