<?php
/** @var array $layout */
/** @var array $item */
/** @var string $module */
if (empty($layout) || !is_array($layout)) return;

$slug = $module === 'product' ? ($item['slug'] ?? '') : '';
$price = $module === 'product' ? ($item['price'] ?? 0) : 0;
$specsArr = [];
if ($module === 'product' && !empty($item['specs'])) {
    $d = json_decode($item['specs'], true);
    if (is_array($d)) $specsArr = $d;
}
?>
<section class="section" style="padding-top:24px">
  <div class="container">
    <div style="position:relative" id="pbWrap">
      <div class="pb-stage pb-front" id="pbFront" style="width:720px;position:relative;background:var(--c-surface,#fff);border:1px solid var(--c-border,#e2e8f0);margin:0 auto;min-height:420px;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.08)">
        <?php foreach ($layout as $el):
          $pos = 'position:absolute;left:' . (int)($el['x'] ?? 0) . 'px;top:' . (int)($el['y'] ?? 0) . 'px;width:' . (int)($el['w'] ?? 200) . 'px;z-index:' . (int)($el['z'] ?? 1) . ';';
          $type = $el['type'] ?? 'text';
          $txtColor = (empty($el['color']) || ($el['color'] ?? '') === '#0f172a') ? 'var(--c-text,#0f172a)' : e($el['color']);
          if ($type === 'image'):
            $ai = ($el['align'] ?? 'left') === 'center' ? 'center' : (($el['align'] ?? 'left') === 'right' ? 'flex-end' : 'flex-start');
            $jc = !empty($el['v']) ? 'center' : 'flex-start';
          ?>
            <div class="pb-fe" style="<?php echo $pos; ?>display:flex;flex-direction:column;align-items:<?php echo $ai; ?>;justify-content:<?php echo $jc; ?>">
              <img src="<?php echo e($el['src']); ?>" alt="" style="object-fit:cover;border-radius:4px;max-width:100%;width:auto;display:block">
            </div>
          <?php elseif ($type === 'button'): ?>
            <a class="pb-fe" href="<?php echo e($el['href'] ?? '#'); ?>" style="<?php echo $pos; ?>display:inline-block;background:<?php echo e($el['bg'] ?? '#0ea5e9'); ?>;color:<?php echo e($el['tc'] ?? '#fff'); ?>;padding:10px 22px;border-radius:10px;text-decoration:none;font-weight:600;font-size:<?php echo ($el['size'] === 'lg' ? '18px' : ($el['size'] === 'sm' ? '13px' : '15px')); ?>"><?php echo e($el['text'] ?? '按钮'); ?></a>
          <?php elseif ($type === 'buy'): ?>
            <a class="pb-fe" href="<?php echo site_url('order/checkout/' . $slug); ?>" style="<?php echo $pos; ?>display:inline-block;background:#ef4444;color:#fff;padding:12px 28px;border-radius:10px;text-decoration:none;font-weight:700;font-size:16px">立即购买</a>
          <?php elseif ($type === 'price'): ?>
            <div class="pb-fe" style="<?php echo $pos; ?>text-align:<?php echo e($el['align'] ?? 'left'); ?>;font-size:28px;font-weight:700;color:<?php echo $txtColor; ?>">¥<?php echo e($price); ?> <small style="font-size:14px;font-weight:400">起/套</small></div>
          <?php elseif ($type === 'specs'): ?>
            <div class="pb-fe" style="<?php echo $pos; ?>text-align:<?php echo e($el['align'] ?? 'left'); ?>">
              <table style="width:100%;border-collapse:collapse;font-size:14px">
                <?php foreach ($specsArr as $s): ?><tr><td style="padding:8px 10px;border-bottom:1px solid var(--c-border,#eee);color:var(--c-muted,#64748b)"><?php echo e($s['k'] ?? ''); ?></td><td style="padding:8px 10px;border-bottom:1px solid var(--c-border,#eee);font-weight:600;color:var(--c-text,#0f172a)"><?php echo e($s['v'] ?? ''); ?></td></tr><?php endforeach; ?>
              </table>
            </div>
          <?php else: ?>
            <div class="pb-fe" style="<?php echo $pos; ?>font-size:<?php echo (int)($el['fontSize'] ?? 18); ?>px;color:<?php echo $txtColor; ?>;font-weight:<?php echo !empty($el['bold']) ? 700 : 400; ?>;text-align:<?php echo e($el['align'] ?? 'left'); ?>;<?php echo !empty($el['v']) ? 'writing-mode:vertical-rl;' : '' ?>line-height:1.4;white-space:pre-wrap;word-break:break-word"><?php echo e($el['text'] ?? ''); ?></div>
          <?php endif; ?>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>
<script>
(function () {
  var STAGE_W = 720, stage = document.getElementById('pbFront'), wrap = document.getElementById('pbWrap');
  if (!stage || !wrap) return;
  function maxBottom() {
    var m = 420, kids = stage.children;
    for (var i = 0; i < kids.length; i++) {
      var k = kids[i];
      var y = parseInt(k.style.top, 10) || 0;
      var b = y + k.offsetHeight;
      if (b > m) m = b;
    }
    return m;
  }
  function fit() {
    var h = maxBottom();
    stage.style.height = h + 'px';
    var avail = wrap.clientWidth, scale = Math.min(1, avail / STAGE_W);
    stage.style.transform = 'scale(' + scale + ')';
    stage.style.transformOrigin = 'top left';
    wrap.style.width = (STAGE_W * scale) + 'px';
    wrap.style.height = (h * scale) + 'px';
    wrap.style.margin = '0 auto';
  }
  fit();
  window.addEventListener('resize', fit);
  stage.querySelectorAll('img').forEach(function (im) { im.addEventListener('load', fit); });
})();
</script>
