<?php
if (! defined('ABSPATH')) {
    exit;
} $data = isset($args['data']) ? $args['data'] : null;
$gallery_items = isset($data) ? $data->gallery_items : array();
$main_item = isset($data) ? $data->main_item : null;
$main_image_id = isset($data) ? $data->main_image_id : 0;
$main_image_alt = isset($data) ? $data->main_image_alt : '';
$main_poster_url = isset($data) ? $data->main_poster_url : '';
$main_video_src = isset($data) ? $data->main_video_src : '';
$product_title = isset($data) ? $data->title : ''; ?>

<style>
/* Lightbox lives on <body>, so it is scoped by its own class prefix only —
   no !important, per the theme isolation strategy. */
.pg-gallery-stage.is-zoomable #main-image-container img { cursor: zoom-in; }
.pg-zoom-hint {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.pg-gallery-stage.is-zoomable .pg-zoom-hint { display: flex; opacity: 0.85; }
.pg-zoom-hint svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) {
	.pg-gallery-stage.is-zoomable .pg-zoom-hint { opacity: 0; }
	.pg-gallery-stage.is-zoomable:hover .pg-zoom-hint { opacity: 0.85; }
}

body.pg-lightbox-open { overflow: hidden; }
/* The floating contact widget also sits at 999999 and comes later in the DOM,
   so the lightbox has to clear it — and step aside while the lightbox is open. */
body.pg-lightbox-open .pg-float-widget {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.pg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	padding: 2.5rem 1rem;
}
.pg-lightbox[hidden] { display: none; }
.pg-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	touch-action: pinch-zoom;
}
.pg-lightbox-close,
.pg-lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	line-height: 1;
}
.pg-lightbox-close:hover,
.pg-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.pg-lightbox-close {
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
}
.pg-lightbox-nav {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
}
.pg-lightbox-prev { left: 1rem; }
.pg-lightbox-next { right: 1rem; }
</style>

<div class="flex flex-col-reverse">
	<?php if (count($gallery_items) > 1) : ?>
		<!-- Thumbnail grid -->
		<div class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
			<div class="grid grid-cols-6 gap-4" id="thumbnail-grid">
				<?php foreach ($gallery_items as $index => $item) : ?>
					<?php
$is_video = $item['is_video'] ?? false;
				    $thumb_id = $item['thumb_id'] ?? 0;
				    $video_src = $item['video_src'] ?? '';
				    $poster_url = $item['poster_url'] ?? ''; ?>
					<?php
				    $item_image_id = $is_video ? 0 : (int) ($item['id'] ?? 0);
				    $item_full_src = $item_image_id ? wp_get_attachment_image_url($item_image_id, 'full') : '';
				    $item_alt = $item_image_id ? get_post_meta($item_image_id, '_wp_attachment_image_alt', true) : ''; ?>
					<button type="button" class="thumbnail-btn relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-neutral-50 text-sm font-medium uppercase text-neutral-900 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-4" data-index="<?php echo esc_attr($index); ?>" data-type="<?php echo esc_attr($item['type']); ?>" data-image-id="<?php echo esc_attr($thumb_id); ?>" data-video-src="<?php echo esc_url($video_src); ?>" data-poster="<?php echo esc_url($poster_url); ?>" data-full-src="<?php echo esc_url($item_full_src); ?>" data-full-alt="<?php echo esc_attr($item_alt ?: $product_title); ?>">
						<span class="absolute inset-0 overflow-hidden rounded-md">
							<?php if ($thumb_id && (! $is_video || $poster_url)) : ?>
								<?php echo wp_get_attachment_image($thumb_id, 'thumbnail', false, array('class' => 'h-full w-full object-cover')); ?>
							<?php elseif ($item['id'] ?? 0) : ?>
								<?php echo wp_get_attachment_image($item['id'], 'thumbnail', false, array('class' => 'h-full w-full object-cover')); ?>
							<?php else : ?>
								<span class="flex items-center justify-center h-full w-full bg-neutral-200"><svg class="w-8 h-8 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-opacity="0.4"/><path d="M9.5 7.5v9l7-4.5z" fill="currentColor" fill-opacity="0.4"/></svg></span>
							<?php endif; ?>
							<?php if ($is_video) : ?>
								<span class="absolute inset-0 flex items-center justify-center bg-black/20 rounded-md"><svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.45)"/><path d="M9.5 7.5v9l7-4.5z" fill="white"/></svg></span>
							<?php endif; ?>
						</span>
						<span class="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 selected-ring" aria-hidden="true"></span>
					</button>
				<?php endforeach; ?>
			</div>
		</div>
	<?php endif; ?>

	<!-- Main display area -->
	<?php
				    $main_is_image = $main_item && 'image' === $main_item['type'];
$main_full_src = $main_is_image && $main_image_id ? wp_get_attachment_image_url($main_image_id, 'full') : ''; ?>
	<div class="relative pg-gallery-stage<?php echo $main_is_image ? ' is-zoomable' : ''; ?>"
		data-label-open="<?php esc_attr_e('View larger image', 'puffergo'); ?>"
		data-label-close="<?php esc_attr_e('Close', 'puffergo'); ?>"
		data-label-prev="<?php esc_attr_e('Previous image', 'puffergo'); ?>"
		data-label-next="<?php esc_attr_e('Next image', 'puffergo'); ?>">
	<div class="w-full aspect-square bg-neutral-50 sm:rounded-lg overflow-hidden" id="main-image-container">
		<?php if ($main_item) : ?>
			<?php if ('image' === $main_item['type']) : ?>
				<?php
echo wp_get_attachment_image($main_image_id, 'large', false, array('class' => 'h-full w-full object-contain object-center sm:rounded-lg', 'id' => 'main-image', 'alt' => $main_image_alt ?: $product_title, 'data-full-src' => $main_full_src, )); ?>
			<?php elseif ('video' === $main_item['type'] || 'url' === $main_item['type']) : ?>
				<?php
$poster_attr = $main_poster_url ? ' poster="' . esc_url($main_poster_url) . '"' : ''; ?>
				<video id="main-video" class="h-full w-full object-contain object-center sm:rounded-lg" controls preload="metadata" src="<?php echo esc_url($main_video_src); ?>"<?php echo $poster_attr; ?>></video>
			<?php endif; ?>
		<?php else : ?>
			<div class="h-full w-full bg-neutral-100 sm:rounded-lg flex items-center justify-center">
				<svg class="h-48 w-48 text-neutral-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
				</svg>
			</div>
		<?php endif; ?>
	</div>
		<span class="pg-zoom-hint" aria-hidden="true">
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="21" y2="21"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
		</span>
	</div>
</div>
