<?php
if (! defined('ABSPATH')) {
    exit;
} ?>

<main class="puffergo-fullpage-layout puffergo-product-archive">
	<div class="mx-auto max-w-canvas px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
	<?php puffergo_render_component('breadcrumb', array('items' => $data->get_breadcrumb_items())); ?>
	<header class="mb-8">
		<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2"><?php echo esc_html($data->page_title); ?></h1>
		<?php if ($data->is_category_page && $data->page_description) : ?>
			<div class="prose prose-gray max-w-none"><?php echo wp_kses_post($data->page_description); ?></div>
		<?php endif; ?>
	</header>

	<?php if (have_posts()) : ?>
		<div class="product-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
			<?php
while (have_posts()) : the_post();
    $GLOBALS['product'] = wc_get_product(get_the_ID());

    if (! $GLOBALS['product']) {
        continue;
    } ?>
				<article class="product-card bg-neutral-50 rounded-lg shadow-sm hover:shadow-md transition overflow-hidden group">
					<a href="<?php echo esc_url(get_permalink()); ?>" class="block">
						<?php if (has_post_thumbnail()) : ?>
							<div class="overflow-hidden relative aspect-square">
								<?php the_post_thumbnail('medium_large', array('class' => 'w-full h-full object-cover group-hover:scale-105 transition duration-300')); ?>
							</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">
							<h2 class="text-lg font-semibold text-neutral-900 group-hover:text-brand-600 transition line-clamp-2 mb-2"><?php echo esc_html(get_the_title()); ?></h2>
							<p class="text-lg font-semibold text-brand-600">
								<?php echo $GLOBALS['product']->get_price_html(); ?>
							</p>
						</div>
					</a>
					<div class="woocommerce px-4 pb-4 puffergo-woo-loop-add-to-cart">
						<?php woocommerce_template_loop_add_to_cart(); ?>
					</div>
				</article>
			<?php endwhile;
wp_reset_postdata(); ?>
		</div>

		<?php
 puffergo_render_component('blog-pagination', array('current_page' => $data->paged, 'max_pages' => $data->max_pages, 'current_url' => $data->current_url, )); ?>

	<?php else : ?>
		<div class="no-products text-center py-12">
			<svg class="w-16 h-16 mx-auto text-neutral-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
			</svg>
			<p class="text-neutral-500"><?php esc_html_e('No products found.', 'puffergo'); ?></p>
		</div>
	<?php endif; ?>
	</div>
</main>
