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

{{if .Content}}
{{$code := index .Content.Ext "code"}}
{{$category := index .Content.Ext "category"}}
{{$fabric := index .Content.Ext "fabric"}}
{{$craft := index .Content.Ext "craft"}}
{{$season := index .Content.Ext "season"}}
{{$moq := index .Content.Ext "moq"}}
{{$sample := index .Content.Ext "sample"}}
{{$origin := index .Content.Ext "origin"}}
{{$badge := index .Content.Ext "badge"}}

<section class="max-w-[1280px] mx-auto px-6 lg:px-10 pt-10 pb-4">
  <div class="text-xs tracking-wider2 text-gray-500">
    <a href="/" class="hover:text-ink">首页</a> /
    <a href="{{.Content.ColumnURL}}" class="hover:text-ink">{{.Content.ColumnName}}</a> /
    <span class="text-ink">{{.Content.Title}}</span>
  </div>
</section>

<section class="max-w-[1280px] mx-auto px-6 lg:px-10 py-8 grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14">
  <div class="lg:col-span-5">
    <div class="aspect-[9/16] lg:aspect-auto lg:h-[540px] overflow-hidden bg-sand mb-4">
      {{if .Content.Img}}<img id="mainImg" 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">
      {{range .Content.Albums}}
      <button type="button" class="thumb aspect-[3/4] overflow-hidden bg-sand border border-sand hover:border-ink" data-src="{{.}}">
        <img src="{{.}}" alt="album" class="w-full h-full object-cover">
      </button>
      {{end}}
    </div>
    {{end}}
  </div>

  <div class="lg:col-span-7">
    {{if $badge}}<div class="text-[11px] tracking-wider2 text-accent mb-3">{{$badge}}</div>{{end}}
    <h1 class="font-serif text-3xl md:text-4xl text-ink leading-snug mb-3">{{.Content.Title}}</h1>
    {{if $code}}<div class="text-sm text-gray-500 tracking-wide mb-6">款式编号 · {{$code}}</div>{{end}}
    {{if .Content.Description}}<p class="text-base text-gray-600 leading-relaxed mb-8">{{.Content.Description}}</p>{{end}}

    <div class="grid grid-cols-2 gap-x-6 gap-y-5 mb-10 bg-sand p-6">
      {{if $category}}<div><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">品类</div><div class="text-sm text-ink">{{$category}}</div></div>{{end}}
      {{if $fabric}}<div><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">主面料</div><div class="text-sm text-ink">{{$fabric}}</div></div>{{end}}
      {{if $craft}}<div><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">核心工艺</div><div class="text-sm text-ink">{{$craft}}</div></div>{{end}}
      {{if $season}}<div><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">适用季节</div><div class="text-sm text-ink">{{$season}}</div></div>{{end}}
      {{if $moq}}<div><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">最小起订</div><div class="text-sm text-ink">{{$moq}}</div></div>{{end}}
      {{if $sample}}<div><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">打样周期</div><div class="text-sm text-ink">{{$sample}}</div></div>{{end}}
      {{if $origin}}<div class="col-span-2"><div class="text-[11px] tracking-wider2 text-gray-500 mb-1">产地</div><div class="text-sm text-ink">{{$origin}}</div></div>{{end}}
    </div>

    <div class="space-y-3">
      <a href="/inquiry?ref={{$code}}" class="block text-center w-full px-8 py-4 bg-ink text-mist text-sm tracking-wider2 hover:bg-primary transition">就这款 · 提交询盘 →</a>
      <a href="/contact" class="block text-center w-full px-8 py-4 border border-ink text-ink text-sm tracking-wider2 hover:bg-ink hover:text-mist transition">先看面料样卡</a>
    </div>

    <div class="mt-8 pt-6 border-t border-sand text-xs text-gray-500 leading-relaxed">
      支持改款、改色与品牌定制 LOGO 织标 / 吊牌 / 洗水唛(中英日韩多语言)。<br>
      整盘订货客户享有优先排产权与价格阶梯。
    </div>
  </div>
</section>

<section class="bg-mist border-t border-sand py-14">
  <div class="max-w-[1080px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">PRODUCT NOTES</div>
    <h2 class="font-serif text-2xl text-ink mb-6">款式说明</h2>
    <div class="prose prose-lg max-w-none prose-p:text-gray-700 prose-p:leading-relaxed">
      {{.Content.Content|Str2Html}}
    </div>
  </div>
</section>

{{$related := Related .Content.Id 4}}
{{if $related}}
<section class="bg-sand py-16">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="flex justify-between items-end mb-8">
      <div>
        <div class="text-xs tracking-wider2 text-gray-500 mb-3">YOU MAY ALSO LIKE</div>
        <h3 class="font-serif text-2xl text-ink">同栏目其他款式</h3>
      </div>
      <a href="{{.Content.ColumnURL}}" class="text-sm text-ink border-b border-ink pb-1 hover:text-accent hover:border-accent">查看全部 →</a>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
      {{range $related}}
      <a href="{{.URL}}" class="group block">
        <div class="aspect-[9/16] overflow-hidden bg-mist mb-3">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.03] transition duration-500">{{end}}
        </div>
        <h4 class="font-serif text-sm text-ink leading-snug group-hover:text-primary">{{.Title}}</h4>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="bg-ink text-mist py-16">
  <div class="max-w-[1080px] mx-auto px-6 lg:px-10 text-center">
    <div class="text-xs tracking-wider2 text-accent mb-3">INQUIRY</div>
    <h2 class="font-serif text-3xl md:text-4xl mb-4">想要这一款,请直接提交询盘</h2>
    <p class="text-gray-300 max-w-xl mx-auto mb-8">我们会附带版型样卡、面料样本、批量价格阶梯,1 个工作日内对接。</p>
    <a href="/inquiry?ref={{$code}}" class="inline-block px-10 py-4 bg-accent text-ink text-sm tracking-wider2 hover:bg-mist transition">提交询盘 →</a>
  </div>
</section>
{{end}}

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

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