<?php
if (! defined('ABSPATH')) {
    exit;
} $pgo_products = isset($args['products']) && is_array($args['products']) ? $args['products'] : array();

if (empty($pgo_products)) {
    return;
} ?>
<section class="puffergo-related-products border-t border-neutral-200 bg-white">
	<div class="mx-auto max-w-canvas px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
		<h2 class="text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl mb-8">
			<?php esc_html_e('Related Products', 'puffergo'); ?>
		</h2>
		<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
			<?php foreach ($pgo_products as $pgo_product) : ?>
				<article class="product-card relative bg-neutral-50 rounded-lg shadow-sm hover:shadow-md transition overflow-hidden group">
					<?php if ($pgo_product['image_id'] || $pgo_product['is_video']) : ?>
						<div class="overflow-hidden relative aspect-square">
							<?php if ($pgo_product['image_id']) : ?>
								<?php echo wp_get_attachment_image($pgo_product['image_id'], 'medium_large', false, array('class' => 'w-full h-full object-cover group-hover:scale-105 transition duration-300')); ?>
							<?php else : ?>
								<div class="w-full h-full bg-neutral-200"></div>
							<?php endif; ?>
							<?php if ($pgo_product['is_video']) : ?>
								<span class="absolute inset-0 flex items-center justify-center pointer-events-none">
									<span class="w-12 h-12 rounded-full bg-black/50 flex items-center justify-center"><svg class="w-6 h-6 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
								</span>
							<?php endif; ?>
						</div>
					<?php else : ?>
						<div class="w-full bg-neutral-100 flex items-center justify-center aspect-square">
							<svg class="w-12 h-12 text-neutral-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 class="p-4">
						<h3 class="text-lg font-semibold mb-2">
							<a href="<?php echo esc_url($pgo_product['url']); ?>" class="text-neutral-900 group-hover:text-brand-600 transition line-clamp-2 after:absolute after:inset-0 after:content-['']"><?php echo esc_html($pgo_product['title']); ?></a>
						</h3>
						<?php if ($pgo_product['price']) : ?>
							<p class="text-lg font-semibold text-brand-600"><?php echo esc_html($pgo_product['price']); ?></p>
						<?php endif; ?>
					</div>
				</article>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php
