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

<style>
	/* 强制画廊缩略图为正方形并优化间距 */
	.puffergo-product-gallery .thumbnail-btn {
		aspect-ratio: 1 / 1 !important;
		height: auto !important; /* 覆盖 h-24 */
		width: 100% !important;
		padding: 0 !important;
		overflow: hidden;
		border: 1px solid rgba(0,0,0,0.05) !important;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.puffergo-product-gallery .thumbnail-btn img {
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.puffergo-product-gallery .thumbnail-btn:hover img {
		transform: scale(1.1);
	}
	/* 选中状态的戒指效果微调 */
	.puffergo-product-gallery .selected-ring {
		--tw-ring-color: rgb(var(--color-brand-600-rgb)) !important;
		--tw-ring-offset-width: 2px !important;
		transition: all 0.2s ease;
	}
</style>

<main class="puffergo-fullpage-layout puffergo-content-wrapper bg-white selection:bg-brand-100 selection:text-brand-900 antialiased">

	<!-- 面包屑：极简留白 -->
	<nav class="mx-auto max-w-canvas px-4 pt-8 pb-4 sm:px-6 lg:px-8">
		<?php puffergo_render_component('breadcrumb', array('items' => $data->get_breadcrumb_items())); ?>
	</nav>

	<!-- 核心两栏布局：左侧粘性画廊，右侧信息滚动 -->
	<div class="mx-auto max-w-canvas px-4 sm:px-6 lg:px-8">
		<div class="lg:grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16 lg:items-start pt-4 pb-16">

			<!-- 左侧：画廊 (占 7 列，粘性吸顶) -->
			<section class="lg:col-span-7 lg:sticky lg:top-8 z-10 puffergo-product-gallery">
				<?php puffergo_render_component('product-gallery', array('data' => $data)); ?>
			</section>

			<!-- 右侧：产品信息与转化区 (占 5 列) -->
			<section class="lg:col-span-5 mt-10 px-0 lg:mt-0">

				<!-- 标题 -->
				<div class="mb-6">
					<h1 class="text-4xl font-extrabold tracking-tight text-neutral-900 sm:text-5xl">
						<?php echo esc_html($data->title); ?>
					</h1>
				</div>

				<!-- 简短描述 -->
				<?php if ($data->short_description) : ?>
					<div class="text-lg leading-relaxed text-neutral-500 mb-10 font-light">
						<?php echo wp_kses_post($data->short_description); ?>
					</div>
				<?php endif; ?>

				<!-- 价格（委托 WooCommerce，含区间价 / 划线价 / 货币符号） -->
				<div class="border-y border-neutral-100 py-8 mb-10">
					<div class="text-3xl font-bold text-brand-600 tracking-tight">
						<?php echo $data->get_price_html(); ?>
					</div>
				</div>

				<!-- 加购 / 规格选择区（委托 WooCommerce 原生模板函数） -->
				<div class="woocommerce mb-12 puffergo-woo-add-to-cart">
					<?php woocommerce_template_single_add_to_cart(); ?>
				</div>
			</section>
		</div>
	</div>

	<!-- 产品长描述 -->
	<?php
$pgo_description = $data->product ? $data->product->get_description() : '';

if ($pgo_description) : ?>
		<div class="mx-auto max-w-canvas px-4 sm:px-6 lg:px-8 pb-16">
			<div class="prose prose-neutral max-w-none">
				<?php echo apply_filters('the_content', $pgo_description); ?>
			</div>
		</div>
	<?php endif; ?>

	<?php puffergo_render_component('related-products', array('products' => $data->get_related_products())); ?>
</main>
