@php
    $videos = $section['parameters']['videos'] ?? [];
    $title = $section['parameters']['title'] ?? '';
    $subtitle = $section['parameters']['subtitle'] ?? '';

    if (!function_exists('getYoutubeId')) {
        function getYoutubeId($url) {
            if (!is_string($url)) return null;
            if (preg_match('/(?:youtube(?:-nocookie)?\.com\/(?:[^\/
\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/i', $url, $match)) {
                return $match[1];
            }
            return null;
        }
    }
    
    $validVideoIds = [];
    foreach($videos as $v) {
        $id = getYoutubeId($v['url'] ?? '');
        if ($id) $validVideoIds[] = $id;
    }
@endphp

<section class="ftco-section" style="background-color: #f8f9fa; padding-top: 48px; padding-bottom: 48px;" aria-labelledby="playlist-title-{{ $section['id'] }}">
    <div class="container">
        @if($title || $subtitle)
            <header class="row text-center" style="margin-bottom: 24px;">
                <div class="col-md-12 ftco-animate">
                    @if($subtitle) <p class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--tenant-primary);">{{ $subtitle }}</p> @endif
                    <h2 id="playlist-title-{{ $section['id'] }}" style="font-size: 32px; font-weight: bold; color: #333;">{{ $title }}</h2>
                </div>
            </header>
        @endif

        @if(!empty($validVideoIds))
            <div class="row">
                <div class="col-lg-8 ftco-animate">
                    <figure class="video-main-wrapper" style="background: #000; position: relative; padding-bottom: 56.25%; height: 0; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 0.25rem; overflow: hidden;">
                        <iframe id="main-player-{{ $section['id'] }}" 
                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                                src="https://www.youtube.com/embed/{{ $validVideoIds[0] }}?rel=0&enablejsapi=1" 
                                frameborder="0" allowfullscreen
                                title="Player de vídeo principal"></iframe>
                    </figure>
                </div>
                <aside class="col-lg-4 ftco-animate" style="margin-top: 24px;">
                    <div class="playlist-sidebar" style="height: 100%; max-height: 450px; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 0.25rem; display: flex; flex-direction: column;">
                        <header style="padding: 16px; border-bottom: 1px solid #eee; background-color: #f8f9fa;">
                            <h3 class="h6" style="margin: 0; font-weight: bold;">Próximos vídeos ({{ count($validVideoIds) }})</h3>
                        </header>
                        <div class="playlist-items" style="flex: 1; overflow-y: auto;" role="list" aria-label="Lista de vídeos da playlist">
                            @foreach($validVideoIds as $index => $id)
                                <article class="playlist-item" style="padding: 8px; display: flex; align-items: center; border-bottom: 1px solid #eee; {{ $index === 0 ? 'background-color: #f8f9fa;' : '' }} cursor: pointer; transition: 0.2s;"
                                     role="listitem"
                                     tabindex="0"
                                     onclick="changeVideo('{{ $section['id'] }}', '{{ $id }}', this)"
                                     onkeypress="if(event.key === 'Enter' || event.key === ' ') { changeVideo('{{ $section['id'] }}', '{{ $id }}', this); event.preventDefault(); }">
                                    <figure style="margin-right: 16px; width: 100px; flex-shrink: 0;">
                                        <img src="https://img.youtube.com/vi/{{ $id }}/mqdefault.jpg" class="img-responsive" style="border-radius: 0.25rem;" alt="Miniatura do vídeo">
                                    </figure>
                                    <header class="video-info" style="overflow: hidden;">
                                        <p class="small" style="margin-bottom: 0; font-weight: bold; color: #333;">Carregando...</p>
                                    </header>
                                </article>
                            @endforeach
                        </div>
                    </div>
                </aside>
            </div>
        @endif
    </div>
</section>

<style>
    .border-left-danger { border-left: 4px solid var(--tenant-primary) !important; }
</style>

@section('other-scripts')
<script>
    function changeVideo(sectionId, videoId, element) {
        $(`#main-player-${sectionId}`).attr('src', `https://www.youtube.com/embed/${videoId}?rel=0&autoplay=1`);
        $(element).siblings().removeClass('bg-light border-left-danger');
        $(element).addClass('bg-light border-left-danger');
    }

    $(document).ready(function() {
        $('.video-title-placeholder').each(function() {
            const $this = $(this);
            const id = $this.data('video-id');
            const url = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`;
            
            $.getJSON(url, function(data) {
                const title = data.title;
                $this.text(title);
                $this.closest('article').attr('aria-label', `Reproduzir vídeo: ${title}`);
            }).fail(() => {
                const defaultTitle = 'Vídeo do YouTube';
                $this.text(defaultTitle);
                $this.closest('article').attr('aria-label', defaultTitle);
            });
        });
    });
</script>
@append