<?php defined( 'ABSPATH' ) || exit; ?>

<div class="container willro-skeleton">
      <!-- Title -->
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 32px">
        <div class="skeleton skeleton-title"></div>
      </div>

      <!-- Filters Options and Carousel Button -->
      <div style="display: flex; justify-content: space-between">
        <div class="filters" style="padding-top: 0">
          <div class="skeleton filters-action"></div>
          <div class="skeleton filters-action"></div>
          <div class="skeleton filters-action"></div>
        </div>
        <div class="carousel-btn">
          <!-- Left Arrow -->
          <div class="skeleton skeleton-avatar"></div>
          <!-- Right Arrow -->
          <div class="skeleton skeleton-avatar"></div>
        </div>
      </div>

      <!-- Review Card Container -->
      <div class="review-grid">
        <!-- Review Card 1 -->
        <div class="review-card">
          <!-- Header Skeleton -->
          <div class="review-header">
            <div class="profile-area">
              <div class="skeleton skeleton-avatar"></div>
              <div class="profile-info">
                <div class="skeleton skeleton-name"></div>
                <div class="skeleton skeleton-location"></div>
                <div class="skeleton skeleton-time"></div>
              </div>
            </div>
            <div class="skeleton skeleton-menu"></div>
          </div>

          <!-- Rating Section Skeleton -->
          <div class="rating-section">
            <div class="skeleton-stars">
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
            </div>

            <div class="skeleton skeleton-title"></div>

            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text short"></div>
          </div>

          <!-- Media Skeleton -->
          <div class="skeleton skeleton-media"></div>

          <!-- Engagement Stats Skeleton -->
          <div class="engagement-stats">
            <div class="skeleton-reactions">
              <div class="skeleton-reaction-bubbles">
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
              </div>
              <div class="skeleton skeleton-count"></div>
            </div>

            <div class="skeleton-views">
              <div class="skeleton skeleton-view-icon"></div>
              <div class="skeleton skeleton-view-count"></div>
            </div>
          </div>

          <!-- Action Buttons Skeleton -->
          <div class="action-buttons">
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
          </div>
        </div>

        <!-- Review Card 2 -->
        <div class="review-card">
          <!-- Header Skeleton -->
          <div class="review-header">
            <div class="profile-area">
              <div class="skeleton skeleton-avatar"></div>
              <div class="profile-info">
                <div class="skeleton skeleton-name"></div>
                <div class="skeleton skeleton-location"></div>
                <div class="skeleton skeleton-time"></div>
              </div>
            </div>
            <div class="skeleton skeleton-menu"></div>
          </div>

          <!-- Rating Section Skeleton -->
          <div class="rating-section">
            <div class="skeleton-stars">
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
            </div>

            <div class="skeleton skeleton-title"></div>

            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text short"></div>
          </div>

          <!-- Media Skeleton -->
          <div class="skeleton skeleton-media"></div>

          <!-- Engagement Stats Skeleton -->
          <div class="engagement-stats">
            <div class="skeleton-reactions">
              <div class="skeleton-reaction-bubbles">
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
              </div>
              <div class="skeleton skeleton-count"></div>
            </div>

            <div class="skeleton-views">
              <div class="skeleton skeleton-view-icon"></div>
              <div class="skeleton skeleton-view-count"></div>
            </div>
          </div>

          <!-- Action Buttons Skeleton -->
          <div class="action-buttons">
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
          </div>
        </div>

        <!-- Review Card 3 -->
        <div class="review-card">
          <!-- Header Skeleton -->
          <div class="review-header">
            <div class="profile-area">
              <div class="skeleton skeleton-avatar"></div>
              <div class="profile-info">
                <div class="skeleton skeleton-name"></div>
                <div class="skeleton skeleton-location"></div>
                <div class="skeleton skeleton-time"></div>
              </div>
            </div>
            <div class="skeleton skeleton-menu"></div>
          </div>

          <!-- Rating Section Skeleton -->
          <div class="rating-section">
            <div class="skeleton-stars">
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
              <div class="skeleton skeleton-star"></div>
            </div>

            <div class="skeleton skeleton-title"></div>

            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text"></div>
            <div class="skeleton skeleton-text short"></div>
          </div>

          <!-- Media Skeleton -->
          <div class="skeleton skeleton-media"></div>

          <!-- Engagement Stats Skeleton -->
          <div class="engagement-stats">
            <div class="skeleton-reactions">
              <div class="skeleton-reaction-bubbles">
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
                <div class="skeleton skeleton-reaction-icon"></div>
              </div>
              <div class="skeleton skeleton-count"></div>
            </div>

            <div class="skeleton-views">
              <div class="skeleton skeleton-view-icon"></div>
              <div class="skeleton skeleton-view-count"></div>
            </div>
          </div>

          <!-- Action Buttons Skeleton -->
          <div class="action-buttons">
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
            <div class="skeleton skeleton-action-btn"></div>
          </div>
        </div>
      </div>

      <!-- Review Footer -->
      <div class="review-wrapper">
        <div class="review-section">
          <div class="skeleton filters-action"></div>
          <div class="skeleton filters-action"></div>
        </div>
        <div class="review-section">
          <div class="skeleton filters-action"></div>
          <div class="skeleton filters-action"></div>
        </div>
      </div>
    </div>
