<?php
$layoutArr = [];
if (!empty($p['layout'])) { $d = json_decode($p['layout'], true); if (is_array($d)) $layoutArr = $d; }
// 模式渲染：可视化编辑(builder)且有 layout → 画布；否则固定版式（封面/图集/描述）。
$useBuilder = !empty($layoutArr) && ($p['mode'] ?? '') !== 'fixed';

// 固定版面素材
$cover = $p['cover'] ?? '';
$galleryArr = [];
if (!empty($p['gallery'])) { $dg = json_decode($p['gallery'], true); if (is_array($dg)) $galleryArr = $dg; }
?>
<section class="page-hero">
    <div class="container">
        <h1><?php echo e($p['name']); ?></h1>
        <p><?php echo e($cat['name'] ?? '降温服'); ?></p>
    </div>
</section>
<div class="container">
    <nav class="breadcrumb">
        <a href="<?php echo site_url(); ?>">首页</a> / <a href="<?php echo site_url('products'); ?>">产品中心</a> /
        <?php echo e($p['name']); ?>
    </nav>
</div>

<?php if ($useBuilder): ?>
<?php echo \Core\View::buffer('parts/canvas', ['layout' => $layoutArr, 'item' => $p, 'module' => 'product']); ?>
<?php else: ?>
<section class="section detail-sec" style="padding-top:20px">
    <div class="container">
        <div class="detail-wrap">
            <div>
                <?php if ($cover): ?>
                    <div class="detail-thumb"><img class="detail-cover" src="<?php echo e(site_url($cover)); ?>" alt="<?php echo e($p['name']); ?>"></div>
                <?php else: ?>
                    <div class="detail-thumb" style="background:<?php echo gradient($p['id']); ?>">❄</div>
                <?php endif; ?>
                <div class="gallery">
                    <?php if (!empty($galleryArr)): ?>
                        <?php foreach ($galleryArr as $gi): ?><div class="detail-thumb gal"><img src="<?php echo e(site_url($gi)); ?>" alt=""></div><?php endforeach; ?>
                    <?php else: ?>
                        <div class="detail-thumb" style="aspect-ratio:1/1;font-size:28px;background:<?php echo gradient($p['id'] + 1); ?>">❄</div>
                        <div class="detail-thumb" style="aspect-ratio:1/1;font-size:28px;background:<?php echo gradient($p['id'] + 2); ?>">❄</div>
                        <div class="detail-thumb" style="aspect-ratio:1/1;font-size:28px;background:<?php echo gradient($p['id'] + 3); ?>">❄</div>
                    <?php endif; ?>
                </div>
            </div>
            <div class="detail-info">
                <h1><?php echo e($p['name']); ?></h1>
                <div class="detail-price">¥<?php echo e($p['price']); ?> <small style="font-size:14px;color:var(--c-muted)">起 / 套</small></div>
                <p class="detail-sum"><?php echo e($p['summary']); ?></p>
                <?php if (!empty($specs)): ?>
                <table class="spec-table">
                    <?php foreach ($specs as $s): ?><tr><td><?php echo e($s['k']); ?></td><td><?php echo e($s['v']); ?></td></tr><?php endforeach; ?>
                </table>
                <?php endif; ?>
                <?php if (!empty($p['description'])): ?><div class="detail-desc detail-rich"><?php echo $p['description']; ?></div><?php endif; ?>
                <div style="display:flex;gap:12px;margin-top:24px;flex-wrap:wrap">
                    <a class="btn btn-primary magnetic" href="<?php echo site_url('order/checkout/' . $p['slug']); ?>">立即购买</a>
                    <a class="btn btn-ghost" href="<?php echo site_url('contact'); ?>">咨询报价</a>
                    <a class="btn btn-ghost" href="<?php echo site_url('products'); ?>">返回列表</a>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($faqs)): ?>
<section class="section" style="padding-top:10px">
    <div class="container">
        <div class="section-head reveal">
            <p class="eyebrow">常见问题</p>
            <h2 class="section-title">关于本品，您可能想了解</h2>
        </div>
        <div class="faq-list">
            <?php foreach ($faqs as $f): ?>
            <details class="faq-item reveal">
                <summary><?php echo e($f['q']); ?><span class="faq-ico">+</span></summary>
                <div class="faq-a"><?php echo e($f['a']); ?></div>
            </details>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($related)): ?>
<section class="section" style="padding-top:30px">
    <div class="container">
        <h3 style="margin:0 0 20px;font-size:22px">相关推荐</h3>
        <div class="product-grid">
            <?php foreach ($related as $r): ?>
                <a class="product-card" href="<?php echo site_url('products/' . $r['slug']); ?>">
                    <?php if (!empty($r['cover'])): ?>
                    <div class="product-thumb"><img src="<?php echo e(site_url($r['cover'])); ?>" alt="<?php echo e($r['name']); ?>"></div>
                    <?php else: ?>
                    <div class="product-thumb" style="background:<?php echo gradient($r['id']); ?>">❄</div>
                    <?php endif; ?>
                    <div class="product-body">
                        <div class="product-name"><?php echo e($r['name']); ?></div>
                        <div class="product-sum"><?php echo e($r['summary']); ?></div>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- 吸底购买栏：始终展示价格与立即购买 -->
<div class="buy-bar">
    <div class="container buy-bar-inner">
        <div class="buy-bar-info">
            <span class="buy-bar-name"><?php echo e($p['name']); ?></span>
            <span class="buy-bar-price">¥<?php echo e($p['price']); ?> <small>起 / 套</small></span>
        </div>
        <div class="buy-bar-actions">
            <a class="btn btn-primary magnetic" href="<?php echo site_url('order/checkout/' . $p['slug']); ?>">立即购买</a>
            <a class="btn btn-ghost" href="<?php echo site_url('contact'); ?>">咨询报价</a>
        </div>
    </div>
</div>

<style>
.detail-cover{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}
.detail-thumb.gal img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}
.detail-rich img{max-width:100%;height:auto;display:block;border-radius:8px;margin:10px 0}
.detail-rich h2{font-size:24px;margin:.6em 0 .4em}
.detail-rich h3{font-size:20px;margin:.6em 0 .4em}
.detail-rich blockquote{margin:.6em 0;padding:8px 14px;border-left:4px solid var(--c-primary);color:var(--c-muted);background:rgba(14,165,233,.06)}
.detail-rich a{color:var(--c-primary)}
</style>
