document.addEventListener('DOMContentLoaded', () => {
    const cardCovers = document.querySelectorAll('.small-card-cover, .card-cover');

    cardCovers.forEach(cardCover => {
        const thumbnail = cardCover.querySelector('.thumbnail');
        const video = cardCover.querySelector('.preview-video');
        const videoSource = video.querySelector('source');
        let hoverTimeout;

        cardCover.addEventListener('mouseenter', () => {
            hoverTimeout = setTimeout(() => {

                if (!videoSource.src) {
                    videoSource.src = video.dataset.src;
                    video.load();
                }

                thumbnail.style.display = 'none';
                video.style.display = 'block';

                video.addEventListener('loadedmetadata', () => {

                    if (video.duration > 15) {

                        video.currentTime = 10;
                        const loopSegment = () => {
                            if (video.currentTime >= 15) {
                                video.currentTime = 10;
                                video.play();
                            }
                        };
                        video.addEventListener('timeupdate', loopSegment);
                        cardCover.loopSegment = loopSegment;
                    } else {

                        video.currentTime = 0;
                        const loopEntireVideo = () => {
                            if (video.currentTime >= video.duration) {
                                video.currentTime = 0;
                                video.play();
                            }
                        };
                        video.addEventListener('timeupdate', loopEntireVideo);
                        cardCover.loopSegment = loopEntireVideo;
                    }

                    video.play();
                });
            }, 2000);
        });

        cardCover.addEventListener('mouseleave', () => {
            clearTimeout(hoverTimeout);
            video.pause();
            video.style.display = 'none';
            thumbnail.style.display = 'block';

            if (cardCover.loopSegment) {
                video.removeEventListener('timeupdate', cardCover.loopSegment);
                delete cardCover.loopSegment;
            }
        });
    });
});