<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
/**
 * Reels Type Template
 *
 * Renders an Instagram/TikTok-style UGC gallery:
 *  - "Customer Stories" row: circular avatar bubbles (scrollable)
 *  - "Community Reviews" row: media thumbnail cards (scrollable)
 *
 * Variables available (from reviews-listing.php scope):
 *  @var array    $reviews            Paginated review objects for first page.
 *  @var array    $template_settings  Customisation settings.
 *  @var int      $product_id         Current product ID (0 = global).
 *  @var string   $instance_id        Unique HTML instance identifier.
 *  @var int      $total_reviews      Total review count.
 *  @var float    $avg_rating         Average numeric rating.
 *
 * @package Ugcify
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$review_meta_handler = new \Ugcify\Review\ReviewMeta();

// -- Helper: format author name -----------------------------------------------
$ugcify_reels_format_name = function ( $raw_name, $format ) {
	$raw_name = trim( (string) $raw_name );
	if ( '' === $raw_name ) {
		return __( 'Anonymous', 'ugcify' );
	}
	$parts = explode( ' ', $raw_name, 2 );
	$first = $parts[0] ?? '';
	$last  = $parts[1] ?? '';

	switch ( $format ) {
		case 'first_last_initial':
			return $first . ( $last ? ' ' . substr( $last, 0, 1 ) . '.' : '' );
		case 'first_only':
			return $first;
		case 'initials':
			return substr( $first, 0, 1 ) . ( $last ? substr( $last, 0, 1 ) : '' );
		default:
			return $raw_name;
	}
};

// -- Helper: resolve first thumbnail from review meta -------------------------
$ugcify_reels_get_thumbnail = function ( $review, $meta ) use ( &$ugcify_reels_get_thumbnail ) {
	$images = isset( $meta['images'][0] ) ? maybe_unserialize( $meta['images'][0] ) : array();
	$videos = isset( $meta['videos'][0] ) ? maybe_unserialize( $meta['videos'][0] ) : array();

	if ( ! empty( $images ) ) {
		return array( 'type' => 'image', 'src' => esc_url_raw( $images[0] ) );
	}

	if ( ! empty( $videos ) ) {
		return array( 'type' => 'video', 'src' => esc_url_raw( $videos[0] ) );
	}

	// Social media sources.
	$social_media_url = isset( $meta['_social_media_url'][0] ) ? esc_url_raw( (string) $meta['_social_media_url'][0] ) : '';
	if ( '' !== $social_media_url ) {
		return array( 'type' => 'image', 'src' => $social_media_url );
	}

	return null;
};

// -- Helper: detect whether a social media URL is likely video content -------
$ugcify_reels_is_video_url = function ( $url ) {
	$url = esc_url_raw( (string) $url );
	if ( '' === $url ) {
		return false;
	}

	$path  = (string) wp_parse_url( $url, PHP_URL_PATH );
	$host  = strtolower( (string) wp_parse_url( $url, PHP_URL_HOST ) );
	$query = strtolower( (string) wp_parse_url( $url, PHP_URL_QUERY ) );
	$ext   = strtolower( pathinfo( $path, PATHINFO_EXTENSION ) );

	if ( in_array( $ext, array( 'mp4', 'webm', 'ogg', 'mov', 'm4v' ), true ) ) {
		return true;
	}

	if ( false !== strpos( $host, 'cdninstagram.com' ) || false !== strpos( $host, 'fbcdn.net' ) ) {
		return false !== strpos( $path, '/video' ) || false !== strpos( $query, 'video' );
	}

	return false;
};

// -- Helper: determine whether a story should show a video indicator ---------
$ugcify_reels_story_has_video = function ( $review, $meta, $thumbnail ) use ( $ugcify_reels_is_video_url ) {
	if ( is_array( $thumbnail ) && isset( $thumbnail['type'] ) && 'video' === $thumbnail['type'] ) {
		return true;
	}

	$review_type = isset( $review->type ) ? strtolower( (string) $review->type ) : '';
	if ( in_array( $review_type, array( 'youtube', 'tiktok' ), true ) ) {
		return true;
	}

	$platform = isset( $meta['_social_platform'][0] ) ? strtolower( trim( (string) $meta['_social_platform'][0] ) ) : '';
	if ( in_array( $platform, array( 'youtube', 'tiktok' ), true ) ) {
		return true;
	}

	$social_media_url = isset( $meta['_social_media_url'][0] ) ? (string) $meta['_social_media_url'][0] : '';

	return '' !== $social_media_url && $ugcify_reels_is_video_url( $social_media_url );
};

// -- Helper: human-friendly relative time ------------------------------------
$ugcify_reels_relative_time = function ( $date_string ) {
	$now     = current_time( 'timestamp' ); // phpcs:ignore WordPress.DateTime.CurrentTimeTimestamp.Requested
	$then    = strtotime( (string) $date_string );
	if ( false === $then ) {
		return '';
	}
	$diff = max( 0, $now - $then );

	if ( $diff < MINUTE_IN_SECONDS ) {
		return __( 'Just now', 'ugcify' );
	}
	if ( $diff < HOUR_IN_SECONDS ) {
		$mins = (int) round( $diff / MINUTE_IN_SECONDS );
		/* translators: %d: number of minutes */
		return sprintf( _n( '%d minute ago', '%d minutes ago', $mins, 'ugcify' ), $mins );
	}
	if ( $diff < DAY_IN_SECONDS ) {
		$hours = (int) round( $diff / HOUR_IN_SECONDS );
		/* translators: %d: number of hours */
		return sprintf( _n( '%d hour ago', '%d hours ago', $hours, 'ugcify' ), $hours );
	}
	if ( $diff < WEEK_IN_SECONDS ) {
		$days = (int) round( $diff / DAY_IN_SECONDS );
		/* translators: %d: number of days */
		return sprintf( _n( '%d day ago', '%d days ago', $days, 'ugcify' ), $days );
	}
	if ( $diff < MONTH_IN_SECONDS ) {
		$weeks = (int) round( $diff / WEEK_IN_SECONDS );
		/* translators: %d: number of weeks */
		return sprintf( _n( '%d week ago', '%d weeks ago', $weeks, 'ugcify' ), $weeks );
	}
	$months = (int) round( $diff / MONTH_IN_SECONDS );
	/* translators: %d: number of months */
	return sprintf( _n( '%d month ago', '%d months ago', $months, 'ugcify' ), $months );
};

$name_format = ! empty( $template_settings['reviewerNameFormat'] ) ? $template_settings['reviewerNameFormat'] : 'first_last_initial';
$date_format = ! empty( $template_settings['reviewDateFormat'] ) ? $template_settings['reviewDateFormat'] : 'd M, Y';

// -- Helper: stable reviewer key so stories show once per reviewer ------------
$ugcify_reels_get_reviewer_key = function ( $review ) {
	if ( ! empty( $review->user_id ) ) {
		return 'user:' . absint( $review->user_id );
	}

	if ( ! empty( $review->guest_email ) ) {
		return 'email:' . strtolower( sanitize_email( (string) $review->guest_email ) );
	}

	$name = '';
	if ( ! empty( $review->guest_name ) ) {
		$name = (string) $review->guest_name;
	} elseif ( ! empty( $review->author_name ) ) {
		$name = (string) $review->author_name;
	}

	$name = strtolower( trim( $name ) );
	if ( '' !== $name ) {
		return 'name:' . sanitize_title( $name );
	}

	return 'review:' . absint( $review->id );
};

// Separate reviews: stories = media-backed reviews, community = all reviews
$community_reviews = array();

foreach ( $reviews as $review ) {
	$meta             = $review_meta_handler->get_meta( $review->id );
	$thumbnail        = $ugcify_reels_get_thumbnail( $review, $meta );
	$has_story_video  = $ugcify_reels_story_has_video( $review, $meta, $thumbnail );

	$review->_ugcify_meta      = $meta;
	$review->_ugcify_thumbnail = $thumbnail;
	$review->_ugcify_story_has_video = $has_story_video;
	$review->_ugcify_reviewer_key = $ugcify_reels_get_reviewer_key( $review );

	$community_reviews[] = $review;
}

$ugcify_reels_review_ids_by_reviewer = array();
foreach ( $community_reviews as $review ) {
	$key = isset( $review->_ugcify_reviewer_key ) ? (string) $review->_ugcify_reviewer_key : $ugcify_reels_get_reviewer_key( $review );
	if ( ! isset( $ugcify_reels_review_ids_by_reviewer[ $key ] ) ) {
		$ugcify_reels_review_ids_by_reviewer[ $key ] = array();
	}
	$ugcify_reels_review_ids_by_reviewer[ $key ][] = (string) $review->id;
}

$stories_reviews = array();
foreach ( $community_reviews as $review ) {
	if ( null === $review->_ugcify_thumbnail ) {
		continue;
	}

	$key = isset( $review->_ugcify_reviewer_key ) ? (string) $review->_ugcify_reviewer_key : $ugcify_reels_get_reviewer_key( $review );
	if ( isset( $stories_reviews[ $key ] ) ) {
		continue;
	}

	$review->_ugcify_story_review_ids = $ugcify_reels_review_ids_by_reviewer[ $key ] ?? array( (string) $review->id );
	$stories_reviews[ $key ] = $review;
}

// Limit stories row to configured max (default 8)
$stories_max    = isset( $template_settings['storiesMaxCount'] ) ? max( 1, intval( $template_settings['storiesMaxCount'] ) ) : 8;
$stories_reviews = array_slice( array_values( $stories_reviews ), 0, $stories_max );

$show_stories_section  = ! isset( $template_settings['showStories'] ) || ! empty( $template_settings['showStories'] );
$show_community_section = ! isset( $template_settings['showCommunity'] ) || ! empty( $template_settings['showCommunity'] );
$stories_title         = ! empty( $template_settings['storiesTitle'] ) ? $template_settings['storiesTitle'] : __( 'Customer Stories', 'ugcify' );
$community_title       = ! empty( $template_settings['communityTitle'] ) ? $template_settings['communityTitle'] : __( 'Community Reviews', 'ugcify' );
$community_subtitle    = isset( $template_settings['communitySubtitle'] ) ? $template_settings['communitySubtitle'] : __( 'See what our customers are saying', 'ugcify' );
$show_add_yours_btn    = ! isset( $template_settings['showAddYours'] ) || ! empty( $template_settings['showAddYours'] );
$show_share_btn        = ! isset( $template_settings['showShareBtn'] ) || ! empty( $template_settings['showShareBtn'] );

// Check form visibility for "Add Yours" button
$form_visibility = 'logged-in';
$form_settings   = get_option( 'ugcify_review_form_settings', array() );
if ( isset( $form_settings['formVisibility'] ) ) {
	$form_visibility = $form_settings['formVisibility'];
}
$can_share_review = false;
if ( 'anyone' === $form_visibility ) {
	$can_share_review = true;
} elseif ( in_array( $form_visibility, array( 'logged-in', 'verified-buyers' ), true ) && is_user_logged_in() ) {
	$can_share_review = true;
}
$instance_id = wp_unique_id( 'ugcify-reviews-' );

$show_verified     = ! empty( $template_settings['showVerifiedCheck'] );
$reels_section_id  = 'ugcify-reels-' . $instance_id;
$ugcify_lazy_load_enabled      = ! empty( $template_settings['lazyLoadImages'] );
$ugcify_lightbox_enabled       = ! isset( $template_settings['enableLightbox'] ) || false !== $template_settings['enableLightbox'];
$ugcify_media_loading_mode     = $ugcify_lazy_load_enabled ? 'lazy' : 'eager';
$show_story_add_yours_item  = $can_share_review && $product_id && $show_add_yours_btn;
$has_story_reviews          = ! empty( $stories_reviews );
$should_render_stories      = $show_stories_section && ( $has_story_reviews || $show_story_add_yours_item );
?>

<div
	class="ugcify-reels-wrapper"
	id="<?php echo esc_attr( $reels_section_id ); ?>"
	data-ugcify-instance="<?php echo esc_attr( $instance_id ); ?>"
	data-show-stories="<?php echo $show_stories_section ? '1' : '0'; ?>"
	data-show-community="<?php echo $show_community_section ? '1' : '0'; ?>"
	data-stories-max="<?php echo esc_attr( $stories_max ); ?>"
	data-stories-title="<?php echo esc_attr( $stories_title ); ?>"
	data-community-title="<?php echo esc_attr( $community_title ); ?>"
	data-community-subtitle="<?php echo esc_attr( $community_subtitle ); ?>"
	data-show-add-yours="<?php echo $show_add_yours_btn ? '1' : '0'; ?>"
	data-show-share-btn="<?php echo $show_share_btn ? '1' : '0'; ?>"
	data-helpful-votes="<?php echo ! empty( $ugcify_helpful_votes_enabled ) ? '1' : '0'; ?>"
	data-can-share-review="<?php echo $can_share_review ? '1' : '0'; ?>"
	data-show-verified="<?php echo $show_verified ? '1' : '0'; ?>"
	data-name-format="<?php echo esc_attr( $name_format ); ?>"
	data-empty-text="<?php echo esc_attr( ! empty( $template_settings['emptyReviewText'] ) ? $template_settings['emptyReviewText'] : __( 'No customer review yet.', 'ugcify' ) ); ?>"
	data-view-all-label="<?php esc_attr_e( 'View All', 'ugcify' ); ?>"
	data-add-yours-label="<?php esc_attr_e( 'Add Yours', 'ugcify' ); ?>"
	data-share-review-label="<?php esc_attr_e( 'Share Your Review', 'ugcify' ); ?>"
>

	<?php if ( $should_render_stories ) : ?>
	<!-- ===== CUSTOMER STORIES ROW ===== -->
	<div class="ugcify-stories-section" aria-label="<?php echo esc_attr( $stories_title ); ?>">
		<div class="ugcify-stories-header">
			<h3 class="ugcify-stories-title"><?php echo esc_html( $stories_title ); ?></h3>
			<?php if ( $ugcify_lightbox_enabled && $has_story_reviews ) : ?>
			<button
				type="button"
				class="ugcify-stories-view-all"
				aria-label="<?php esc_attr_e( 'View all customer stories', 'ugcify' ); ?>"
			>
				<?php esc_html_e( 'View All', 'ugcify' ); ?>
			</button>
			<?php endif; ?>
		</div>

		<div class="ugcify-stories-track" role="list" aria-label="<?php esc_attr_e( 'Customer story bubbles', 'ugcify' ); ?>">
			<?php foreach ( $stories_reviews as $ugcify_story ) :
				$ugcify_story_meta      = $ugcify_story->_ugcify_meta;
				$ugcify_story_thumbnail = $ugcify_story->_ugcify_thumbnail;

				$ugcify_story_author = '';
				if ( ! empty( $ugcify_story->guest_name ) ) {
					$ugcify_story_author = trim( (string) $ugcify_story->guest_name );
				} elseif ( ! empty( $ugcify_story->user_id ) ) {
					$ugcify_story_author = trim( (string) get_the_author_meta( 'display_name', (int) $ugcify_story->user_id ) );
				}

				$ugcify_story_display_name = $ugcify_reels_format_name( $ugcify_story_author, $name_format );
				$ugcify_story_avatar_letter = ! empty( $ugcify_story_author ) ? mb_strtoupper( mb_substr( $ugcify_story_author, 0, 1 ) ) : '?';
				$ugcify_story_gravatar_url  = ! empty( $ugcify_story->guest_email )
					? esc_url( get_avatar_url( $ugcify_story->guest_email, array( 'size' => 80 ) ) )
					: ( ! empty( $ugcify_story->user_id ) ? esc_url( get_avatar_url( (int) $ugcify_story->user_id, array( 'size' => 80 ) ) ) : '' );
				$ugcify_story_is_featured   = ! empty( $ugcify_story->is_featured );
				$ugcify_story_thumbnail_src = $ugcify_story_thumbnail ? $ugcify_story_thumbnail['src'] : '';
				$ugcify_story_has_video    = ! empty( $ugcify_story->_ugcify_story_has_video );
				$ugcify_story_review_ids   = ! empty( $ugcify_story->_ugcify_story_review_ids ) && is_array( $ugcify_story->_ugcify_story_review_ids ) ? $ugcify_story->_ugcify_story_review_ids : array( (string) $ugcify_story->id );
			?>
			<div
				class="ugcify-story-item <?php echo $ugcify_story_is_featured ? 'is-featured' : ''; ?>"
				role="listitem"
				data-review-id="<?php echo esc_attr( $ugcify_story->id ); ?>"
				data-story-review-ids="<?php echo esc_attr( implode( ',', array_map( 'absint', $ugcify_story_review_ids ) ) ); ?>"
				aria-label="<?php /* translators: %s: reviewer's display name */ echo esc_attr( sprintf( __( 'Story by %s', 'ugcify' ), $ugcify_story_display_name ) ); ?>"
				<?php echo $ugcify_lightbox_enabled ? 'tabindex="0"' : ''; ?>
			>
				<div class="ugcify-story-bubble" aria-hidden="true">
					<div class="ugcify-story-avatar">
						<?php if ( '' !== $ugcify_story_gravatar_url ) : ?>
							<img
								src="<?php echo esc_url( $ugcify_story_gravatar_url ); ?>"
								alt="<?php echo esc_attr( $ugcify_story_display_name ); ?>"
								loading="<?php echo esc_attr( $ugcify_media_loading_mode ); ?>"
								width="70"
								height="70"
							>
						<?php else : ?>
							<span class="ugcify-story-avatar-initial" aria-hidden="true"><?php echo esc_html( $ugcify_story_avatar_letter ); ?></span>
						<?php endif; ?>
					</div>
					<?php if ( '' !== $ugcify_story_thumbnail_src && $ugcify_story_has_video ) : ?>
						<div class="ugcify-story-video-indicator" aria-hidden="true">
							<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
								<path d="M1.5 5.5V3.9c0-1.56 1.1-2.2 2.46-1.42l1.37.78 1.37.78c1.36.78 1.36 2.06 0 2.84L5.33 7.66 3.96 8.44C2.6 9.22 1.5 8.58 1.5 7.02z" fill="#fff"/>
							</svg>
						</div>
					<?php endif; ?>
				</div>
				<span class="ugcify-story-name"><?php echo esc_html( $ugcify_story_display_name ); ?></span>
			</div>
			<?php endforeach; ?>

			<?php if ( $show_story_add_yours_item ) : ?>
			<div class="ugcify-story-item ugcify-story-add-yours" role="listitem">
				<button
					type="button"
					class="ugcify-story-bubble ugcify-story-add-bubble"
					onclick="document.querySelector('.ugcify-review-form-button')?.click();"
					aria-label="<?php esc_attr_e( 'Add your story', 'ugcify' ); ?>"
				>
					<span class="ugcify-story-add-icon" aria-hidden="true">
						<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
							<path d="M14 6v16M6 14h16" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
						</svg>
					</span>
				</button>
				<span class="ugcify-story-name"><?php esc_html_e( 'Add Yours', 'ugcify' ); ?></span>
			</div>
			<?php endif; ?>
		</div>
	</div>
	<?php endif; ?>

	<!-- ===== COMMUNITY REVIEWS GRID ===== -->
	<?php if ( $show_community_section ) : ?>
	<div class="ugcify-reels-community-section" aria-label="<?php echo esc_attr( $community_title ); ?>">
		<div class="ugcify-reels-community-header">
			<div class="ugcify-reels-community-header-left">
				<h3 class="ugcify-reels-community-title"><?php echo esc_html( $community_title ); ?></h3>
				<?php if ( '' !== $community_subtitle ) : ?>
				<p class="ugcify-reels-community-subtitle"><?php echo esc_html( $community_subtitle ); ?></p>
				<?php endif; ?>
			</div>
			<?php if ( $can_share_review && $product_id && $show_share_btn ) : ?>
			<button
				type="button"
				class="ugcify-reels-share-btn"
				onclick="document.querySelector('.ugcify-review-form-button')?.click();"
				aria-label="<?php esc_attr_e( 'Share your video review', 'ugcify' ); ?>"
			>
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<path d="M1.33 9.33V13.33C1.33 14.07 1.93 14.67 2.67 14.67H13.33C14.07 14.67 14.67 14.07 14.67 13.33V9.33" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M8 1.33v8M5.33 3.33l2.67-2 2.67 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<?php esc_html_e( 'Share Your Review', 'ugcify' ); ?>
			</button>
			<?php endif; ?>
		</div>

		<?php if ( ! empty( $community_reviews ) ) : ?>
		<div class="ugcify-reels-grid" role="list" aria-label="<?php esc_attr_e( 'Community review cards', 'ugcify' ); ?>">
			<?php foreach ( $community_reviews as $ugcify_reel ) :
				$ugcify_reel_meta      = $ugcify_reel->_ugcify_meta;
				$ugcify_reel_thumbnail = $ugcify_reel->_ugcify_thumbnail;
				$ugcify_reel_has_media = null !== $ugcify_reel_thumbnail;

				$ugcify_reel_author = '';
				if ( ! empty( $ugcify_reel->guest_name ) ) {
					$ugcify_reel_author = trim( (string) $ugcify_reel->guest_name );
				} elseif ( ! empty( $ugcify_reel->user_id ) ) {
					$ugcify_reel_author = trim( (string) get_the_author_meta( 'display_name', (int) $ugcify_reel->user_id ) );
				}

				$ugcify_reel_display_name   = $ugcify_reels_format_name( $ugcify_reel_author, $name_format );
				$ugcify_reel_avatar_letter  = ! empty( $ugcify_reel_author ) ? mb_strtoupper( mb_substr( $ugcify_reel_author, 0, 1 ) ) : '?';
				$ugcify_reel_gravatar_url   = ! empty( $ugcify_reel->guest_email )
					? esc_url( get_avatar_url( $ugcify_reel->guest_email, array( 'size' => 80 ) ) )
					: ( ! empty( $ugcify_reel->user_id ) ? esc_url( get_avatar_url( (int) $ugcify_reel->user_id, array( 'size' => 80 ) ) ) : '' );
				$ugcify_reel_thumbnail_src  = $ugcify_reel_has_media ? $ugcify_reel_thumbnail['src'] : '';
				$ugcify_reel_thumbnail_type = $ugcify_reel_has_media ? $ugcify_reel_thumbnail['type'] : 'image';
				$ugcify_reel_is_video       = in_array( $ugcify_reel->type, array( 'video', 'mixed', 'tiktok', 'youtube' ), true ) || 'video' === $ugcify_reel_thumbnail_type;
				$ugcify_reel_is_featured    = ! empty( $ugcify_reel->is_featured );
				$ugcify_reel_is_pinned      = ! empty( $ugcify_reel->is_pinned );
				$ugcify_reel_relative_time  = $ugcify_reels_relative_time( $ugcify_reel->created_at );

				// Social counts from meta (present for social reviews, optional for UGC)
				$ugcify_reel_like_count    = isset( $ugcify_reel_meta['_social_like_count'][0] ) ? intval( $ugcify_reel_meta['_social_like_count'][0] ) : 0;
				$ugcify_reel_comment_count = isset( $ugcify_reel_meta['_social_comment_count'][0] ) ? intval( $ugcify_reel_meta['_social_comment_count'][0] ) : 0;
			?>
			<article
				class="ugcify-reel-card <?php echo $ugcify_reel_is_video ? 'is-video' : 'is-image'; ?> <?php echo $ugcify_reel_has_media ? 'has-media' : 'no-media'; ?>"
				data-review-id="<?php echo esc_attr( $ugcify_reel->id ); ?>"
				role="listitem"
				<?php echo $ugcify_lightbox_enabled ? 'tabindex="0"' : ''; ?>
				aria-label="<?php /* translators: %s: reviewer's display name */ echo esc_attr( sprintf( __( 'Review by %s', 'ugcify' ), $ugcify_reel_display_name ) ); ?>"
			>
				<!-- Thumbnail -->
				<div class="ugcify-reel-media">
					<?php if ( $ugcify_reel_has_media && 'video' === $ugcify_reel_thumbnail_type ) : ?>
						<video
							src="<?php echo esc_url( $ugcify_reel_thumbnail_src ); ?>#t=1"
							preload="metadata"
							muted
							playsinline
							class="ugcify-reel-video-thumb"
							tabindex="-1"
							aria-hidden="true"
						></video>
					<?php elseif ( $ugcify_reel_has_media ) : ?>
						<img
							src="<?php echo esc_url( $ugcify_reel_thumbnail_src ); ?>"
							alt="<?php /* translators: %s: reviewer's display name */ echo esc_attr( sprintf( __( 'Review media by %s', 'ugcify' ), $ugcify_reel_display_name ) ); ?>"
							loading="<?php echo esc_attr( $ugcify_media_loading_mode ); ?>"
							class="ugcify-reel-img-thumb"
						>
					<?php else : ?>
						<!-- Text-only: placeholder with author initial -->
						<div class="ugcify-reel-text-placeholder" aria-hidden="true">
							<span><?php echo esc_html( $ugcify_reel_avatar_letter ); ?></span>
						</div>
					<?php endif; ?>

					<?php if ( $ugcify_reel_is_video ) : ?>
					<div class="ugcify-reel-play-btn" aria-hidden="true">
						<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
							<circle cx="22" cy="22" r="22" fill="rgba(255,255,255,0.85)"/>
							<path d="M18 15.5v13c0 1.1.99 1.78 1.96 1.32l10.5-6.5c.89-.55.89-1.59 0-2.14l-10.5-6.5C18.99 13.72 18 14.4 18 15.5z" fill="#000"/>
						</svg>
					</div>
					<?php endif; ?>

					<?php if ( $ugcify_reel_is_featured || $ugcify_reel_is_pinned ) : ?>
					<div class="ugcify-reel-card-badges">
						<?php if ( $ugcify_reel_is_featured ) : ?>
							<span class="ugcify-featured-badge"><?php esc_html_e( 'Featured', 'ugcify' ); ?></span>
						<?php endif; ?>
						<?php if ( $ugcify_reel_is_pinned ) : ?>
							<span class="ugcify-pinned-badge" aria-label="<?php esc_attr_e( 'Pinned review', 'ugcify' ); ?>" title="<?php esc_attr_e( 'Pinned review', 'ugcify' ); ?>">
								<img src="<?php echo esc_url( UGCIFY_URL . 'assets/images/pinned-badge.svg' ); ?>" alt="" aria-hidden="true">
							</span>
						<?php endif; ?>
					</div>
					<?php endif; ?>

					<!-- Bottom author strip -->
					<div class="ugcify-reel-card-footer" aria-hidden="true">
						<div class="ugcify-reel-card-avatar">
							<?php if ( '' !== $ugcify_reel_gravatar_url ) : ?>
								<img
									src="<?php echo esc_url( $ugcify_reel_gravatar_url ); ?>"
									alt=""
									width="28"
									height="28"
									loading="<?php echo esc_attr( $ugcify_media_loading_mode ); ?>"
									aria-hidden="true"
								>
							<?php else : ?>
								<span class="ugcify-reel-card-avatar-initial" aria-hidden="true"><?php echo esc_html( $ugcify_reel_avatar_letter ); ?></span>
							<?php endif; ?>
						</div>
						<span class="ugcify-reel-card-name"><?php echo esc_html( $ugcify_reel_display_name ); ?></span>
					</div>
				</div>
			</article>
			<?php endforeach; ?>
		</div>
		<?php else : ?>
		<div class="ugcify-reels-empty-state">
			<p class="ugcify-reels-empty-text">
				<?php echo esc_html( ! empty( $template_settings['emptyReviewText'] ) ? $template_settings['emptyReviewText'] : __( 'No customer review yet.', 'ugcify' ) ); ?>
			</p>
		</div>
		<?php endif; ?>
	</div>
	<?php endif; // end showCommunity ?>

</div><!-- .ugcify-reels-wrapper -->
