<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
/**
 * Reels Modal Template
 *
 * TikTok/Instagram Reels-style fullscreen modal.
 * Shown when a story bubble or community review card is clicked.
 * Content is injected dynamically via JavaScript.
 *
 * @package Ugcify
 */

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

$template_settings            = isset( $template_settings ) && is_array( $template_settings ) ? $template_settings : array();
$ugcify_lazy_load_enabled       = ! empty( $template_settings['lazyLoadImages'] );
$ugcify_autoplay_video_enabled  = ! empty( $template_settings['autoplayVideo'] );
$ugcify_lightbox_enabled        = ! isset( $template_settings['enableLightbox'] ) || false !== $template_settings['enableLightbox'];
$ugcify_direct_add_to_cart_enabled = ! isset( $template_settings['directAddToCart'] ) || false !== $template_settings['directAddToCart'];
$ugcify_slide_in_after_seconds     = isset( $template_settings['slideInAfterSeconds'] ) ? max( 0, intval( $template_settings['slideInAfterSeconds'] ) ) : 3;

$instance_id = isset( $instance_id ) ? (string) $instance_id : wp_unique_id( 'ugcify-reviews-' );
?>
<div
	id="<?php echo esc_attr( 'ugcify-reels-modal-' . $instance_id ); ?>"
	class="ugcify-reels-modal-overlay"
	data-ugcify-instance="<?php echo esc_attr( $instance_id ); ?>"
	data-lazy-load="<?php echo $ugcify_lazy_load_enabled ? '1' : '0'; ?>"
	data-autoplay-video="<?php echo $ugcify_autoplay_video_enabled ? '1' : '0'; ?>"
	data-lightbox="<?php echo $ugcify_lightbox_enabled ? '1' : '0'; ?>"
	data-direct-add-to-cart="<?php echo $ugcify_direct_add_to_cart_enabled ? '1' : '0'; ?>"
	data-helpful-votes="<?php echo ! empty( $ugcify_helpful_votes_enabled ) ? '1' : '0'; ?>"
	data-slide-in-after="<?php echo esc_attr( $ugcify_slide_in_after_seconds ); ?>"
	style="display:none;"
	role="dialog"
	aria-modal="true"
	aria-label="<?php esc_attr_e( 'Review reel', 'ugcify' ); ?>"
	aria-hidden="true"
>
	<div class="ugcify-reels-modal-backdrop" aria-hidden="true"></div>

	<div class="ugcify-reels-modal-container">

		<!-- Close button -->
		<button class="ugcify-reels-modal-close" type="button" aria-label="<?php esc_attr_e( 'Close', 'ugcify' ); ?>">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true">
				<path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/>
			</svg>
		</button>

		<!-- Loading state -->
		<div class="ugcify-reels-modal-loading" aria-live="polite" aria-label="<?php esc_attr_e( 'Loading review', 'ugcify' ); ?>">
			<div class="ugcify-reels-spinner" aria-hidden="true"></div>
		</div>

		<!-- Media area -->
		<div class="ugcify-reels-media-wrap" style="display:none;" aria-label="<?php esc_attr_e( 'Review media', 'ugcify' ); ?>">
			<!-- JS injects <video>, <img>, or <iframe> here -->
		</div>

		<button class="ugcify-reels-media-nav ugcify-reels-media-nav-prev" type="button" aria-label="<?php esc_attr_e( 'Previous attachment', 'ugcify' ); ?>" style="display:none;">
			<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
				<path d="M9 1L1 9l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			</svg>
		</button>
		<button class="ugcify-reels-media-nav ugcify-reels-media-nav-next" type="button" aria-label="<?php esc_attr_e( 'Next attachment', 'ugcify' ); ?>" style="display:none;">
			<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
				<path d="M1 1l8 8-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			</svg>
		</button>

		<!-- Video controls -->
		<div class="ugcify-reels-video-controls" aria-label="<?php esc_attr_e( 'Video controls', 'ugcify' ); ?>" aria-hidden="true" data-label-play="<?php esc_attr_e( 'Play video', 'ugcify' ); ?>" data-label-mute="<?php esc_attr_e( 'Mute video', 'ugcify' ); ?>" data-label-unmute="<?php esc_attr_e( 'Unmute video', 'ugcify' ); ?>">
			<div class="ugcify-reels-video-controls__overlay" aria-label="<?php esc_attr_e( 'Playback controls', 'ugcify' ); ?>">
				<button type="button" class="ugcify-reels-video-control ugcify-reels-video-control--mute" aria-label="<?php esc_attr_e( 'Unmute video', 'ugcify' ); ?>">
					<span class="ugcify-reels-video-control__icon" data-control-icon="mute" aria-hidden="true">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M11 7.5L8.25 10H5.5V14H8.25L11 16.5V7.5Z" fill="currentColor"/><path d="M14.5 10L18.5 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/><path d="M18.5 10L14.5 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/></svg>
					</span>
				</button>
				<button type="button" class="ugcify-reels-video-control ugcify-reels-video-control--play" aria-label="<?php esc_attr_e( 'Play video', 'ugcify' ); ?>">
					<span class="ugcify-reels-video-control__icon" data-control-icon="play" aria-hidden="true">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M8 6.75V17.25L17 12L8 6.75Z" fill="currentColor"/></svg>
					</span>
				</button>
			</div>
			<div class="ugcify-reels-video-progress-wrap">
				<input type="range" class="ugcify-reels-video-progress" min="0" max="100" step="0.1" value="0" aria-label="<?php esc_attr_e( 'Video progress', 'ugcify' ); ?>">
			</div>
		</div>

		<!-- Bottom overlay: review details + utility actions -->
		<div class="ugcify-reels-bottom-layout" style="display:none;">
			<div class="ugcify-reels-bottom-main">
				<div class="ugcify-reels-overlay-info" style="display:none;">
					<div class="ugcify-reels-author-row">
						<div class="ugcify-reels-author-avatar" aria-hidden="true"></div>
						<div class="ugcify-reels-author-details">
							<span class="ugcify-reels-author-name"></span>
							<span class="ugcify-reels-review-time"></span>
						</div>
					</div>
					<div class="ugcify-reels-review-text"></div>
					<div class="ugcify-reels-stars-row" aria-label="<?php esc_attr_e( 'Star rating', 'ugcify' ); ?>"></div>
				</div>
			</div>
			<div class="ugcify-reels-bottom-utilities">
				<div class="ugcify-reels-actions" style="display:none;" aria-label="<?php esc_attr_e( 'Review actions', 'ugcify' ); ?>">
					<div class="ugcify-reels-helpful-votes"></div>
					<button type="button" class="ugcify-reels-action-item ugcify-reels-action-share ugcify-reels-share-btn" aria-label="<?php esc_attr_e( 'Share this review', 'ugcify' ); ?>">
						<span class="ugcify-reels-action-icon" aria-hidden="true">
							<svg width="20" height="20" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9996 6.02285C14.9931 6.20702 14.909 6.38036 14.7672 6.50171L9.31262 11.1684C9.11061 11.3412 8.8237 11.382 8.57967 11.2727C8.33564 11.1634 8.17991 10.9243 8.18183 10.6619L8.19879 8.34842C6.2869 8.43427 4.89912 8.87727 3.84807 9.45589C2.67083 10.104 1.8719 10.9459 1.21423 11.7498C1.03334 11.9708 0.729368 12.0561 0.456132 11.9624C0.182895 11.8687 -1.26571e-08 11.6164 0 11.3333C1.11745e-07 8.8337 0.917382 6.73509 2.51888 5.26409C3.97149 3.92985 5.94516 3.14965 8.20381 3.01946L8.20381 0.666683C8.20381 0.396798 8.37023 0.153538 8.62534 0.0505092C8.88046 -0.0525196 9.17394 0.00501139 9.36872 0.196234L14.8013 5.52954C14.9343 5.66011 15.0061 5.83868 14.9996 6.02285ZM9.56745 2.28076V3.66667C9.56745 3.84348 9.49561 4.01305 9.36775 4.13807C9.23988 4.26309 9.06646 4.33333 8.88563 4.33333C6.63382 4.33333 4.75874 5.03611 3.45253 6.23589C2.56417 7.05186 1.91545 8.11889 1.59304 9.40306C2.04562 9.01032 2.56737 8.6308 3.17905 8.29406C4.57939 7.52315 6.40711 6.99999 8.88563 6.99999C9.0673 6.99999 9.24147 7.07088 9.36947 7.19694C9.49747 7.323 9.56873 7.49379 9.56743 7.67143L9.55631 9.18817L13.3218 5.96657L9.56745 2.28076Z" fill="currentColor"/>
							</svg>
						</span>
					</button>
				</div>
			</div>
		</div>

		<!-- Shared overlay layer: shows either the cart sheet OR the share sheet -->
		<div class="ugcify-reels-direct-cart-layer" aria-hidden="true">

			<!-- Cart sheet -->
			<div class="ugcify-reels-direct-cart-sheet" role="complementary" aria-label="<?php esc_attr_e( 'Quick add to cart', 'ugcify' ); ?>">
				<div class="ugcify-reels-direct-cart-header">
					<div class="ugcify-reels-direct-cart-header-copy">
						<span class="ugcify-reels-direct-cart-kicker"><?php esc_html_e( 'Shop This Product', 'ugcify' ); ?></span>
						<p class="ugcify-reels-direct-cart-caption"><?php esc_html_e( 'Add it to your cart without leaving the reel.', 'ugcify' ); ?></p>
					</div>
					<button type="button" class="ugcify-reels-direct-cart-close" aria-label="<?php esc_attr_e( 'Close quick add panel', 'ugcify' ); ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true"><path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/></svg>
					</button>
				</div>
				<div class="ugcify-reels-direct-cart-product">
					<div class="ugcify-reels-direct-cart-thumb" aria-hidden="true"></div>
					<div class="ugcify-reels-direct-cart-summary">
						<a href="#" class="ugcify-reels-direct-cart-title"></a>
						<div class="ugcify-reels-direct-cart-price">
							<span class="ugcify-reels-direct-cart-price-current"></span>
							<span class="ugcify-reels-direct-cart-price-original"></span>
						</div>
					</div>
				</div>
				<div class="ugcify-reels-direct-cart-variations" style="display:none;"></div>
				<div class="ugcify-reels-direct-cart-actions">
					<button type="button" class="ugcify-reels-direct-cart-button"><?php esc_html_e( 'Add To Cart', 'ugcify' ); ?></button>
				</div>
			</div>

			<!-- Share sheet — toggled by JS, hidden by default -->
			<div class="ugcify-reels-share-sheet" role="dialog" aria-label="<?php esc_attr_e( 'Share this review', 'ugcify' ); ?>" style="display:none;">
				<div class="ugcify-reels-direct-cart-header">
					<div class="ugcify-reels-direct-cart-header-copy">
						<span class="ugcify-reels-direct-cart-kicker"><?php esc_html_e( 'Share This Review', 'ugcify' ); ?></span>
					</div>
					<button type="button" class="ugcify-reels-share-close" aria-label="<?php esc_attr_e( 'Close share panel', 'ugcify' ); ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true"><path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/></svg>
					</button>
				</div>
				<div class="ugcify-reels-share-channels">
					<button type="button" class="ugcify-reels-share-channel" data-channel="facebook" style="--ch-color:#1877F2">
						<span class="ugcify-reels-share-channel-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.267h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg></span>
						<span class="ugcify-reels-share-channel-label">Facebook</span>
					</button>
					<button type="button" class="ugcify-reels-share-channel" data-channel="x" style="--ch-color:#000">
						<span class="ugcify-reels-share-channel-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/></svg></span>
						<span class="ugcify-reels-share-channel-label">X</span>
					</button>
					<button type="button" class="ugcify-reels-share-channel" data-channel="whatsapp" style="--ch-color:#25D366">
						<span class="ugcify-reels-share-channel-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span>
						<span class="ugcify-reels-share-channel-label">WhatsApp</span>
					</button>
					<button type="button" class="ugcify-reels-share-channel ugcify-reels-share-channel--copy" data-channel="copy_link" style="--ch-color:#6B7280">
						<span class="ugcify-reels-share-channel-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>
						<span class="ugcify-reels-share-channel-label ugcify-reels-share-copy-label"><?php esc_html_e( 'Copy Link', 'ugcify' ); ?></span>
					</button>
				</div>
				<div class="ugcify-reels-share-url-row" hidden>
					<input type="text" class="ugcify-reels-share-url-input" readonly aria-label="<?php esc_attr_e( 'Share link', 'ugcify' ); ?>" />
					<button type="button" class="ugcify-reels-share-url-copy-btn">
						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
						<span class="ugcify-reels-share-url-copy-label"><?php esc_html_e( 'Copy', 'ugcify' ); ?></span>
					</button>
				</div>
				<div class="ugcify-reels-share-error" aria-live="polite" hidden></div>
			</div>

			<!-- Read more sheet — toggled by JS, hidden by default -->
			<div class="ugcify-reels-read-more-sheet" role="dialog" aria-label="<?php esc_attr_e( 'Full review text', 'ugcify' ); ?>" style="display:none;">
				<div class="ugcify-reels-direct-cart-header">
					<div class="ugcify-reels-direct-cart-header-copy">
						<span class="ugcify-reels-direct-cart-kicker"><?php esc_html_e( 'Review Details', 'ugcify' ); ?></span>
					</div>
					<button type="button" class="ugcify-reels-read-more-close" aria-label="<?php esc_attr_e( 'Close review details panel', 'ugcify' ); ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true"><path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/></svg>
					</button>
				</div>
				<div class="ugcify-reels-read-more-body">
					<div class="ugcify-reels-read-more-text"></div>
					<div class="ugcify-reels-read-more-product" style="display:none;">
						<div class="ugcify-reels-direct-cart-product">
							<div class="ugcify-reels-read-more-product-thumb ugcify-reels-direct-cart-thumb" aria-hidden="true"></div>
							<div class="ugcify-reels-direct-cart-summary">
								<a href="#" class="ugcify-reels-read-more-product-title ugcify-reels-direct-cart-title"></a>
								<div class="ugcify-reels-direct-cart-price">
									<span class="ugcify-reels-read-more-price-current ugcify-reels-direct-cart-price-current"></span>
									<span class="ugcify-reels-read-more-price-original ugcify-reels-direct-cart-price-original"></span>
								</div>
							</div>
						</div>
						<div class="ugcify-reels-read-more-variations ugcify-reels-direct-cart-variations" style="display:none;"></div>
						<div class="ugcify-reels-direct-cart-actions">
							<button type="button" class="ugcify-reels-read-more-cart-button ugcify-reels-direct-cart-button"><?php esc_html_e( 'Add To Cart', 'ugcify' ); ?></button>
						</div>
					</div>
				</div>
			</div>

		</div><!-- .ugcify-reels-direct-cart-layer -->

	</div><!-- .ugcify-reels-modal-container -->
	<div class="ugcify-reels-review-nav" aria-label="<?php esc_attr_e( 'Review navigation', 'ugcify' ); ?>" style="display:none;">
		<button class="ugcify-reels-nav ugcify-reels-nav-prev" type="button" aria-label="<?php esc_attr_e( 'Previous review', 'ugcify' ); ?>" style="display:none;">
			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
				<path d="M9.57 5.92993L3.5 11.9999L9.57 18.0699" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
				<path d="M20.5 12H3.67004" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
			</svg>
			<span><?php esc_html_e( 'Previous', 'ugcify' ); ?></span>
		</button>
		<button class="ugcify-reels-nav ugcify-reels-nav-next" type="button" aria-label="<?php esc_attr_e( 'Next review', 'ugcify' ); ?>" style="display:none;">
			<span><?php esc_html_e( 'Next', 'ugcify' ); ?></span>
			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
				<path d="M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
				<path d="M3.5 12H20.33" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
			</svg>
		</button>
	</div>
</div><!-- .ugcify-reels-modal-overlay -->
