{{include "header.html"}}
{{include "nav.html"}}

{{if .Content}}
{{$material := index .Content.Ext "material"}}
{{$style := index .Content.Ext "style"}}
{{$color := index .Content.Ext "color"}}
{{$size := index .Content.Ext "size_range"}}
{{$collection := index .Content.Ext "collection"}}
{{$badge := index .Content.Ext "badge"}}

<section class="bg-stone-50 py-6 border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <nav class="text-xs text-muted tracking-wider">
      <a href="/" class="hover:text-primary">首页</a><span class="mx-2">/</span>
      {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:text-primary">{{.Content.ColumnName}}</a><span class="mx-2">/</span>{{end}}
      <span class="text-ink">{{.Content.Title}}</span>
    </nav>
  </div>
</section>

<section class="py-12 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-10">
    {{/* === 左侧 16:9 主图 + 缩略图 === */}}
    <div class="lg:col-span-7">
      <div id="mainImg" class="aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
        {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover">{{end}}
      </div>
      {{if .Content.Albums}}
      <div class="grid grid-cols-4 gap-3">
        {{if .Content.Img}}
        <button data-src="{{.Content.Img}}" class="thumb-btn aspect-[16/9] overflow-hidden bg-stone-100 border-2 border-ink">
          <img src="{{.Content.Img}}" alt="" class="w-full h-full object-cover">
        </button>
        {{end}}
        {{range .Content.Albums}}
        <button data-src="{{.}}" class="thumb-btn aspect-[16/9] overflow-hidden bg-stone-100 border-2 border-transparent hover:border-stone-400">
          <img src="{{.}}" alt="" class="w-full h-full object-cover">
        </button>
        {{end}}
      </div>
      {{end}}
    </div>

    {{/* === 右侧规格与购买 === */}}
    <div class="lg:col-span-5">
      {{if $badge}}<span class="inline-block px-2.5 py-1 bg-accent text-white text-xs tracking-wider mb-4">{{$badge}}</span>{{end}}
      {{if $collection}}<div class="text-xs tracking-[0.3em] uppercase text-muted mb-3">{{$collection}}</div>{{end}}
      <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink mb-4 leading-tight">{{.Content.Title}}</h1>
      {{if .Content.Description}}<p class="text-base text-ink/70 leading-relaxed mb-6">{{.Content.Description}}</p>{{end}}
      {{if .Content.Price}}<div class="text-3xl font-serif text-accent mb-8">¥{{.Content.Price}}</div>{{end}}

      <dl class="grid grid-cols-1 gap-y-3 mb-8 pt-6 border-t border-stone-200">
        {{if $material}}<div class="flex"><dt class="w-24 shrink-0 text-xs tracking-wider text-muted">材质</dt><dd class="text-sm text-ink">{{$material}}</dd></div>{{end}}
        {{if $style}}<div class="flex"><dt class="w-24 shrink-0 text-xs tracking-wider text-muted">风格</dt><dd class="text-sm text-ink">{{$style}}</dd></div>{{end}}
        {{if $color}}<div class="flex"><dt class="w-24 shrink-0 text-xs tracking-wider text-muted">颜色</dt><dd class="text-sm text-ink">{{$color}}</dd></div>{{end}}
        {{if $size}}<div class="flex"><dt class="w-24 shrink-0 text-xs tracking-wider text-muted">尺码</dt><dd class="text-sm text-ink">{{$size}}</dd></div>{{end}}
      </dl>

      <div class="flex flex-wrap gap-3 mb-8">
        <a href="/message" class="inline-flex items-center justify-center px-7 py-3 bg-ink text-white text-sm tracking-wider hover:bg-primary transition">咨询尺码</a>
        <a href="/contact" class="inline-flex items-center justify-center px-7 py-3 border border-ink text-ink text-sm tracking-wider hover:bg-ink hover:text-white transition">线下试穿</a>
      </div>

      <ul class="text-xs text-muted space-y-1.5 pt-6 border-t border-stone-200">
        <li>· 终身免费养护:换底、改色、补线</li>
        <li>· 14 天无理由退换 · 出厂质检合格</li>
        <li>· 全国 32 城零售合作店可线下试穿</li>
      </ul>
    </div>
  </div>
</section>

{{/* === 详情正文 === */}}
<section class="py-16 bg-stone-50">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-10">
    <h2 class="text-2xl font-serif font-semibold text-ink mb-8 pb-3 border-b border-stone-300">产品详情</h2>
    <div class="prose prose-stone prose-lg max-w-none">{{.Content.Content|Str2Html}}</div>

    {{if .Content.Tags}}
    <div class="mt-10 pt-6 border-t border-stone-300 flex flex-wrap gap-2">
      <span class="text-xs text-muted tracking-wider mr-1">标签:</span>
      {{range .Content.Tags}}<a href="{{.URL}}" class="px-3 py-1 bg-white hover:bg-accent hover:text-white text-xs transition">{{.Name}}</a>{{end}}
    </div>
    {{end}}
  </div>
</section>

{{/* === 相关推荐 === */}}
{{$related := Related .Content.Id 4}}
{{if $related}}
<section class="py-16 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="flex items-end justify-between mb-8 flex-wrap gap-3">
      <h3 class="text-2xl md:text-3xl font-serif font-semibold text-ink">你可能也喜欢</h3>
      <a href="{{.Content.ColumnURL}}" class="text-sm text-primary hover:text-accent tracking-wider">查看更多 →</a>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-x-4 gap-y-8">
      {{range $related}}
      <a href="{{.URL}}" class="group block">
        <div class="aspect-[16/9] overflow-hidden bg-stone-100 mb-3">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">{{end}}
        </div>
        <h4 class="text-sm font-medium text-ink group-hover:text-primary leading-snug">{{.Title}}</h4>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<div class="flex justify-between gap-4 max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 py-8 border-t border-stone-200 text-sm">
  {{if .Prev}}<a href="{{.Prev.URL}}" class="text-ink/70 hover:text-primary"><div class="text-xs text-muted mb-1">上一款</div>← {{.Prev.Title}}</a>{{else}}<span></span>{{end}}
  {{if .Next}}<a href="{{.Next.URL}}" class="text-ink/70 hover:text-primary text-right"><div class="text-xs text-muted mb-1">下一款</div>{{.Next.Title}} →</a>{{else}}<span></span>{{end}}
</div>
{{end}}

{{include "footer.html"}}
{{include "js.html"}}

<script>
$(function () {
  $('.thumb-btn').on('click', function () {
    var src = $(this).data('src');
    $('#mainImg img').attr('src', src);
    $('.thumb-btn').removeClass('border-ink').addClass('border-transparent');
    $(this).removeClass('border-transparent').addClass('border-ink');
  });
});
</script>