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

    /* 表单输入框聚焦细腻动效 */
    #contact-form input:focus, 
    #contact-form textarea:focus {
        box-shadow: 0 0 0 4px rgba(var(--color-brand-600-rgb), 0.1);
        transform: translateY(-1px);
    }
</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; ?>

                <!-- 核心数据指标 -->
                <?php if ($data->price_display || $data->moq_display || $data->lead_time_display) : ?>
                    <dl class="border-y border-neutral-100 py-8 mb-10 flex flex-wrap gap-y-8 gap-x-12">
                        <?php if ($data->price_display) : ?>
                            <div class="min-w-[120px]">
                                <dt class="text-[10px] font-bold uppercase tracking-[0.2em] text-neutral-400 mb-2"><?php esc_html_e('Price', 'puffergo'); ?></dt>
                                <dd class="text-2xl font-bold text-neutral-900 tracking-tight"><?php echo esc_html($data->price_display); ?></dd>
                            </div>
                        <?php endif; ?>

                        <?php if ($data->moq_display) : ?>
                            <div class="min-w-[120px]">
                                <dt class="text-[10px] font-bold uppercase tracking-[0.2em] text-neutral-400 mb-2"><?php esc_html_e('Min. Order', 'puffergo'); ?></dt>
                                <dd class="text-2xl font-bold text-neutral-900 tracking-tight"><?php echo esc_html($data->moq_display); ?></dd>
                            </div>
                        <?php endif; ?>

                        <?php if ($data->lead_time_display) : ?>
                            <div class="min-w-[120px]">
                                <dt class="text-[10px] font-bold uppercase tracking-[0.2em] text-neutral-400 mb-2"><?php esc_html_e('Lead Time', 'puffergo'); ?></dt>
                                <dd class="text-2xl font-bold text-neutral-900 tracking-tight"><?php echo esc_html($data->lead_time_display); ?></dd>
                            </div>
                        <?php endif; ?>
                    </dl>
                <?php endif; ?>

                <!-- CTA 操作区 -->
                <div class="flex flex-col gap-5 mb-12">
                    <?php if ($data->cta_visible) : ?>
                        <a href="<?php echo esc_url($data->cta_url); ?>" <?php echo $data->cta_link_attrs; ?> class="group relative flex w-full items-center justify-center rounded-2xl bg-brand-600 px-8 py-5 text-lg font-bold text-white shadow-xl shadow-brand-600/20 hover:bg-brand-700 hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-brand-600/30 transition-all duration-300 active:scale-[0.98]">
                            <span><?php echo esc_html($data->cta_text); ?></span>
                            <svg class="ml-3 h-5 w-5 transition-transform group-hover:translate-x-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                        </a>
                    <?php endif; ?>

                    <?php if ($data->brochure_url) : ?>
                        <a href="<?php echo esc_url($data->brochure_url); ?>" target="_blank" rel="noopener noreferrer" class="flex w-full items-center justify-center gap-2 rounded-2xl bg-neutral-50 px-4 py-4 text-sm font-semibold text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 transition-all duration-200">
                            <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="2" 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 Technical Brochure', 'puffergo'); ?>
                        </a>
                    <?php endif; ?>
                </div>

                <!-- 规格参数区 -->
                <?php if (is_array($data->specs) && count($data->specs) > 0) : ?>
                <div class="mb-12">
                    <h3 class="text-xl font-bold text-neutral-900 mb-6"><?php esc_html_e('Specifications', 'puffergo'); ?></h3>
                    <dl class="divide-y divide-neutral-100 border-t border-neutral-100">
                        <?php foreach ($data->specs as $spec) : if (empty($spec['value'])) {
                            continue;
                        } ?>
                            <div class="flex justify-between py-4 text-sm">
                                <dt class="text-neutral-500 font-medium"><?php echo esc_html($spec['key']); ?></dt>
                                <dd class="font-bold text-neutral-900 text-right ml-4"><?php echo esc_html($spec['value']); ?></dd>
                            </div>
                        <?php endforeach; ?>
                    </dl>
                </div>
                <?php endif; ?>
            </section>
        </div>
    </div>

    <?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())); ?>
</main>