<?php
/**
 * Template Name: Grid
 * 产品列表页 — 四列网格布局。
 *
 * 变量作用域（由 layout 文件注入）：
 * @var PufferGo_Archive_Data $data 归档页数据对象。
 *
 * @package PufferGo
 */

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

<main class="puffergo-fullpage-layout puffergo-product-archive">
	<div class="mx-auto max-w-7xl 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 ( ! empty( $data->categories ) ) : ?>
		<div class="category-nav mb-8 flex flex-wrap gap-2">
			<a href="<?php echo esc_url( $data->archive_url ); ?>" class="px-4 py-2 rounded-full text-sm font-medium transition <?php echo ! $data->is_category_page ? 'bg-brand-600 text-white' : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'; ?>">
				<?php esc_html_e( 'All', 'puffergo' ); ?>
			</a>
			<?php foreach ( $data->categories as $cat ) : ?>
				<a href="<?php echo esc_url( $cat['url'] ); ?>" class="px-4 py-2 rounded-full text-sm font-medium transition <?php echo $data->active_category_id === $cat['id'] ? 'bg-brand-600 text-white' : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'; ?>">
					<?php echo esc_html( $cat['name'] ); ?>
				</a>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>

	<?php if ( ! empty( $data->products ) ) : ?>
		<div class="product-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
			<?php foreach ( $data->products as $product ) : ?>
				<article class="product-card bg-neutral-50 rounded-lg shadow-sm hover:shadow-md transition overflow-hidden group">
					<a href="<?php echo esc_url( $product['url'] ); ?>" class="block">
						<?php if ( $product['image_id'] || $product['is_video'] ) : ?>
							<div class="overflow-hidden relative aspect-square">
								<?php if ( $product['image_id'] ) : ?>
									<?php echo wp_get_attachment_image( $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 ( $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">
							<h2 class="text-lg font-semibold text-neutral-900 group-hover:text-brand-600 transition line-clamp-2 mb-2"><?php echo esc_html( $product['title'] ); ?></h2>
							<?php if ( $product['price'] ) : ?>
								<p class="text-lg font-semibold text-brand-600"><?php echo esc_html( $product['price'] ); ?></p>
							<?php endif; ?>
							<?php if ( $product['description'] ) : ?>
								<p class="mt-2 text-sm text-neutral-600 line-clamp-2"><?php echo wp_kses_post( $product['description'] ); ?></p>
							<?php endif; ?>
						</div>
					</a>
				</article>
			<?php endforeach; ?>
		</div>

		<?php if ( $data->pagination_html ) : ?>
			<nav class="pagination mt-8 flex justify-center">
				<?php echo $data->pagination_html; ?>
			</nav>
		<?php endif; ?>

	<?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>
