<div class="wprg-gallery-container wprg-theme-<?php echo esc_attr($atts['theme']); ?>" data-columns="<?php echo esc_attr($atts['columns']); ?>">
    <div class="wprg-gallery-grid">
        <?php 
        $counter = 0;
        while ($reels_query->have_posts()) : $reels_query->the_post(); 
            $counter++;
            $video_type = get_post_meta(get_the_ID(), '_wprg_video_type', true);
            $video_url = get_post_meta(get_the_ID(), '_wprg_video_url', true);
            $video_upload = get_post_meta(get_the_ID(), '_wprg_video_upload', true);
            $video_description = get_post_meta(get_the_ID(), '_wprg_video_description', true);
            $views = get_post_meta(get_the_ID(), '_wprg_views', true) ?: 0;
            
            // Récupérer la miniature
            if (has_post_thumbnail()) {
                $thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'large');
            } else {
                // Utiliser la miniature YouTube par défaut
                if ($video_type == 'youtube' && $video_url) {
                    $youtube_id = wprg_get_youtube_id($video_url);
                    $thumbnail = 'https://img.youtube.com/vi/' . $youtube_id . '/maxresdefault.jpg';
                } else {
                    $thumbnail = WPRG_PLUGIN_URL . 'assets/images/default-video-thumb.jpg';
                }
            }
        ?>
            <div class="wprg-reel-item" data-post-id="<?php echo get_the_ID(); ?>" data-index="<?php echo $counter; ?>">
                <div class="wprg-reel-thumbnail">
                    <img src="<?php echo esc_url($thumbnail); ?>" alt="<?php the_title_attribute(); ?>" loading="lazy">
                    
                    <!-- Badge durée -->
                    <div class="wprg-reel-duration">
                        <span class="wprg-duration-icon">⏱️</span>
                        <?php echo get_post_meta(get_the_ID(), '_wprg_video_duration', true) ?: '0:15'; ?>
                    </div>
                    
                    <!-- Bouton lecture -->
                    <div class="wprg-reel-play">
                        <svg viewBox="0 0 24 24" width="48" height="48">
                            <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.6)"/>
                            <polygon points="10,8 16,12 10,16" fill="white"/>
                        </svg>
                    </div>
                    
                    <!-- Overlay au survol -->
                    <div class="wprg-reel-overlay">
                        <div class="wprg-reel-stats">
                            <span class="wprg-stat">
                                <span class="dashicons dashicons-visibility"></span>
                                <?php echo number_format($views); ?>
                            </span>
                            <span class="wprg-stat">
                                <span class="dashicons dashicons-heart"></span>
                                <?php echo number_format(rand(50, 500)); ?>
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="wprg-reel-info">
                    <div class="wprg-reel-header">
                        <div class="wprg-reel-avatar">
                            <?php echo get_avatar(get_the_author_meta('ID'), 32); ?>
                        </div>
                        <div class="wprg-reel-meta">
                            <h3 class="wprg-reel-title"><?php the_title(); ?></h3>
                            <span class="wprg-reel-author">@<?php echo get_the_author_meta('user_login'); ?></span>
                        </div>
                    </div>
                    
                    <?php if (!empty($video_description)): ?>
                    <p class="wprg-reel-description"><?php echo esc_html($video_description); ?></p>
                    <?php endif; ?>
                </div>
                
                <!-- Données cachées pour le popup -->
                <div class="wprg-reel-data" style="display: none;">
                    <div class="wprg-video-title"><?php the_title(); ?></div>
                    <div class="wprg-video-description"><?php echo esc_html($video_description); ?></div>
                    <div class="wprg-video-author"><?php echo get_the_author_meta('display_name'); ?></div>
                    <div class="wprg-video-author-avatar"><?php echo get_avatar_url(get_the_author_meta('ID')); ?></div>
                    <div class="wprg-video-date"><?php echo get_the_date('d M Y'); ?></div>
                    <div class="wprg-video-type"><?php echo esc_attr($video_type); ?></div>
                    <div class="wprg-video-source">
                        <?php 
                        if ($video_type == 'youtube' && $video_url) {
                            $youtube_id = wprg_get_youtube_id($video_url);
                            echo esc_url('https://www.youtube.com/embed/' . $youtube_id . '?autoplay=1&mute=1&modestbranding=1&rel=0');
                        } else if ($video_type == 'upload' && $video_upload) {
                            echo wp_get_attachment_url($video_upload);
                        }
                        ?>
                    </div>
                </div>
            </div>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>
</div>

<!-- Popup style Instagram/Facebook -->
<div id="wprg-popup" class="wprg-popup">
    <div class="wprg-popup-overlay"></div>
    <div class="wprg-popup-content">
        <button class="wprg-popup-close">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>
        
        <div class="wprg-popup-inner">
            <div class="wprg-popup-video-section">
                <div class="wprg-popup-video-container">
                    <div class="wprg-popup-video"></div>
                </div>
            </div>
            
            <div class="wprg-popup-info-section">
                <div class="wprg-popup-header">
                    <div class="wprg-popup-user">
                        <div class="wprg-popup-avatar"></div>
                        <div class="wprg-popup-user-details">
                            <span class="wprg-popup-username"></span>
                            <span class="wprg-popup-time"></span>
                        </div>
                    </div>
                </div>
                
                <div class="wprg-popup-body">
                    <div class="wprg-popup-title"></div>
                    <div class="wprg-popup-description"></div>
                </div>
                
                <div class="wprg-popup-actions">
                    <button id="wprg-like-btn" class="wprg-action-btn wprg-like-btn">

    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>

    <span class="wprg-like-label">J'aime</span>

    <span class="wprg-like-count">0</span>

</button>
                    <button class="wprg-action-btn wprg-comment-btn">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                        </svg>
                        <span>Commenter</span>
                    </button>
                    <button class="wprg-action-btn wprg-share-btn">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="18" cy="5" r="3"></circle>
                            <circle cx="6" cy="12" r="3"></circle>
                            <circle cx="18" cy="19" r="3"></circle>
                            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                        </svg>
                        <span>Partager</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>