(function () {
    const videos = [{"id":"XGz2iHYZw1k","title":"USA Special! Norbi i Driftstang na #71BURNYARD EP.7","url":"https://www.youtube.com/watch?v=XGz2iHYZw1k","thumbnail":"https://i.ytimg.com/vi/XGz2iHYZw1k/hqdefault.jpg"},{"id":"Ov0Cua4t6b8","title":"Poczciwy Krzychu w swojej niepoczciwej wersji na #71burnyard! EP.6","url":"https://www.youtube.com/watch?v=Ov0Cua4t6b8","thumbnail":"https://i.ytimg.com/vi/Ov0Cua4t6b8/hqdefault.jpg"},{"id":"zQiLYSHejxU","title":"#Fajny Drift! Ponczak ukręca obie półosie w #71BURNYARD EP.5","url":"https://www.youtube.com/watch?v=zQiLYSHejxU","thumbnail":"https://i.ytimg.com/vi/zQiLYSHejxU/hqdefault.jpg"},{"id":"CZAaJGNN3ow","title":"800HP w BMW E36 - Kevin Wróbel #71BURNYARD EP.4","url":"https://www.youtube.com/watch?v=CZAaJGNN3ow","thumbnail":"https://i.ytimg.com/vi/CZAaJGNN3ow/hqdefault.jpg"}];

    function render() {
        const widget = document.getElementById('fx-youtube');

        if (!widget) return;

        const innerbox = widget.querySelector('.innerbox');

        if (!innerbox) return;

        let container = innerbox.querySelector('#youtube-videos');

        if (!container) {
            container = document.createElement('div');
            container.id = 'youtube-videos';
            innerbox.appendChild(container);
        }

        if (!document.getElementById('youtube-widget-css')) {
            const style = document.createElement('style');
            style.id = 'youtube-widget-css';

            style.textContent = `
                #fx-youtube #youtube-videos {
                    display: grid;
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                    gap: 20px;
                    width: 100%;
                }

                #fx-youtube .youtube-video {
                    display: block;
                    min-width: 0;
                    overflow: hidden;
                    background: #151515;
                    color: #fff;
                    text-decoration: none;
                    border: 1px solid #292929;
                    transition: border-color .2s;
                }

                #fx-youtube .youtube-video:hover {
                    border-color: #e31b23;
                }

                #fx-youtube .youtube-video img {
                    display: block;
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    object-fit: cover;
                }

                #fx-youtube .youtube-video-title {
                    padding: 14px;
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1.4;
                }

                @media(max-width: 768px) {
                    #fx-youtube #youtube-videos {
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                    }
                }

                @media(max-width: 480px) {
                    #fx-youtube #youtube-videos {
                        grid-template-columns: 1fr;
                    }
                }
            `;

            document.head.appendChild(style);
        }

        container.innerHTML = '';

        if (!videos.length) {
            container.textContent = 'Brak dostępnych filmów.';
            return;
        }

        videos.forEach(function(video) {
            const card = document.createElement('a');
            card.className = 'youtube-video';
            card.href = video.url;
            card.target = '_self';
            card.rel = 'noopener noreferrer';

            const img = document.createElement('img');
            img.src = video.thumbnail;
            img.alt = video.title;
            img.loading = 'lazy';

            const title = document.createElement('div');
            title.className = 'youtube-video-title';
            title.textContent = video.title;

            card.append(img, title);
            container.appendChild(card);
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', render);
    } else {
        render();
    }
})();