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

<main class="puffergo-fullpage-layout puffergo-content-wrapper">
	<!-- Breadcrumb -->
	<div class="mx-auto max-w-canvas px-4 pt-6 sm:px-6 lg:px-8">
		<?php puffergo_render_component('breadcrumb', array('items' => $data->get_breadcrumb_items())); ?>
	</div>

	<!-- Gallery: Full Width -->
	<section class="mx-auto max-w-canvas px-4 pt-4 sm:px-6 lg:px-8">
		<div class="sm:rounded-2xl overflow-hidden bg-neutral-100">
			<?php puffergo_render_component('product-gallery', array('data' => $data)); ?>
		</div>
	</section>

	<!-- Product Info Section -->
	<section class="mx-auto max-w-canvas px-4 py-10 sm:px-6 sm:py-14 lg:px-8">
		<div class="lg:grid lg:grid-cols-3 lg:gap-12">
			<!-- Left: Title + Description (2/3) -->
			<div class="lg:col-span-2">
				<?php if ($data->primary_category && ! is_wp_error($data->categories)) : ?>
					<span class="inline-block rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand-700 mb-4">
						<?php echo esc_html($data->primary_category->name); ?>
					</span>
				<?php endif; ?>

				<h1 class="text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl lg:text-5xl">
					<?php echo esc_html($data->title); ?>
				</h1>

				<?php if ($data->short_description) : ?>
					<div class="mt-5 text-lg leading-relaxed text-neutral-600">
						<?php echo wp_kses_post($data->short_description); ?>
					</div>
				<?php endif; ?>

				<!-- Key Metrics Cards (Desktop) -->
				<?php if ($data->price_display || $data->moq_display || $data->lead_time_display) : ?>
					<div class="mt-8 hidden sm:grid sm:grid-cols-3 gap-4">
						<?php if ($data->price_display) : ?>
							<div class="rounded-xl border border-neutral-200 bg-white p-5">
								<p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"><?php esc_html_e('Price', 'puffergo'); ?></p>
								<p class="text-2xl font-bold text-neutral-900"><?php echo esc_html($data->price_display); ?></p>
							</div>
						<?php endif; ?>
						<?php if ($data->moq_display) : ?>
							<div class="rounded-xl border border-neutral-200 bg-white p-5">
								<p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"><?php esc_html_e('Min. Order', 'puffergo'); ?></p>
								<p class="text-2xl font-bold text-neutral-900"><?php echo esc_html($data->moq_display); ?></p>
							</div>
						<?php endif; ?>
						<?php if ($data->lead_time_display) : ?>
							<div class="rounded-xl border border-neutral-200 bg-white p-5">
								<p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"><?php esc_html_e('Lead Time', 'puffergo'); ?></p>
								<p class="text-2xl font-bold text-neutral-900"><?php echo esc_html($data->lead_time_display); ?></p>
							</div>
						<?php endif; ?>
					</div>
				<?php endif; ?>

				<!-- Key Metrics (Mobile: horizontal scroll) -->
				<?php if ($data->price_display || $data->moq_display || $data->lead_time_display) : ?>
					<div class="mt-6 flex gap-3 overflow-x-auto sm:hidden pb-2 -mx-4 px-4">
						<?php if ($data->price_display) : ?>
							<div class="flex-shrink-0 rounded-xl border border-neutral-200 bg-white px-4 py-3 min-w-[120px]">
								<p class="text-[10px] font-semibold uppercase tracking-wider text-neutral-400"><?php esc_html_e('Price', 'puffergo'); ?></p>
								<p class="text-lg font-bold text-neutral-900 mt-0.5"><?php echo esc_html($data->price_display); ?></p>
							</div>
						<?php endif; ?>
						<?php if ($data->moq_display) : ?>
							<div class="flex-shrink-0 rounded-xl border border-neutral-200 bg-white px-4 py-3 min-w-[120px]">
								<p class="text-[10px] font-semibold uppercase tracking-wider text-neutral-400"><?php esc_html_e('Min. Order', 'puffergo'); ?></p>
								<p class="text-lg font-bold text-neutral-900 mt-0.5"><?php echo esc_html($data->moq_display); ?></p>
							</div>
						<?php endif; ?>
						<?php if ($data->lead_time_display) : ?>
							<div class="flex-shrink-0 rounded-xl border border-neutral-200 bg-white px-4 py-3 min-w-[120px]">
								<p class="text-[10px] font-semibold uppercase tracking-wider text-neutral-400"><?php esc_html_e('Lead Time', 'puffergo'); ?></p>
								<p class="text-lg font-bold text-neutral-900 mt-0.5"><?php echo esc_html($data->lead_time_display); ?></p>
							</div>
						<?php endif; ?>
					</div>
				<?php endif; ?>
			</div>

			<!-- Right: CTA + Download (1/3, sticky on desktop) -->
			<div class="mt-8 lg:mt-0">
				<div class="lg:sticky lg:top-6">
					<?php if ($data->cta_visible) : ?>
						<a href="<?php echo esc_url($data->cta_url); ?>"<?php echo $data->cta_link_attrs; ?> class="flex w-full items-center justify-center rounded-xl bg-brand-600 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-brand-600/25 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 transition-all duration-200">
							<?php echo esc_html($data->cta_text); ?>
						</a>
					<?php endif; ?>

					<?php if ($data->brochure_url) : ?>
						<a href="<?php echo esc_url($data->brochure_url); ?>" target="_blank" rel="noopener noreferrer" class="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors duration-150">
							<svg class="h-5 w-5 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
							</svg>
							<?php esc_html_e('Download Brochure', 'puffergo'); ?>
						</a>
					<?php endif; ?>
				</div>
			</div>
		</div>
	</section>

	<!-- Divider -->
	<div class="mx-auto max-w-canvas px-4 sm:px-6 lg:px-8">
		<hr class="border-neutral-200">
	</div>

	<!-- Specifications (Card Grid) -->
	<?php if (is_array($data->specs) && count($data->specs) > 0) : ?>
	<section class="mx-auto max-w-canvas px-4 py-10 sm:px-6 sm:py-14 lg:px-8">
		<h2 class="text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">
			<?php esc_html_e('Specifications', 'puffergo'); ?>
		</h2>
		<div class="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
			<?php foreach ($data->specs as $spec) : if (empty($spec['value'])) {
			    continue;
			} ?>
				<div class="flex items-center justify-between rounded-xl border border-neutral-200 bg-white px-5 py-4">
					<span class="text-sm text-neutral-500"><?php echo esc_html($spec['key']); ?></span>
					<span class="text-sm font-semibold text-neutral-900"><?php echo esc_html($spec['value']); ?></span>
				</div>
			<?php endforeach; ?>
		</div>
	</section>
	<?php endif; ?>

	<?php puffergo_render_component('product-content'); ?>

	<?php puffergo_render_component('product-form', array('data' => $data)); ?>

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

	<!-- Mobile Sticky CTA -->
	<?php if ($data->cta_visible) : ?>
	<div class="fixed bottom-0 left-0 right-0 z-40 border-t border-neutral-200 bg-white/95 backdrop-blur-sm px-4 py-3 sm:hidden">
		<a href="<?php echo esc_url($data->cta_url); ?>"<?php echo $data->cta_link_attrs; ?> class="flex w-full items-center justify-center rounded-xl bg-brand-600 px-6 py-3.5 text-base font-semibold text-white shadow-lg shadow-brand-600/20 hover:bg-brand-700 transition-colors">
			<?php echo esc_html($data->cta_text); ?>
		</a>
	</div>
	<!-- Spacer to prevent content hidden behind sticky CTA -->
	<div class="h-16 sm:hidden"></div>
	<?php endif; ?>
</main>
