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

<section class="bg-sand">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">02 · CURRENT EDIT</div>
    <h1 class="font-serif text-4xl md:text-5xl text-ink mb-3">
      {{if .CurrentColumn}}{{.CurrentColumn.Name}}{{else}}产品中心{{end}}
    </h1>
    {{if .CurrentColumn}}{{if .CurrentColumn.Description}}<p class="text-gray-600 max-w-2xl">{{.CurrentColumn.Description}}</p>{{end}}{{end}}
    <p class="text-sm text-gray-500 mt-4">所有款式支持改款、改色与品牌定制 · 30 件起订 · 打样 7 天 · 大货 18 天</p>
  </div>
</section>

<section class="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
  {{if .List}}
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 lg:gap-7">
    {{range .List}}
    <a href="{{.URL}}" class="group block">
      <div class="aspect-[9/16] overflow-hidden bg-sand mb-3 relative">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.03] transition duration-500">{{end}}
        {{$badge := index .Ext "badge"}}
        {{if $badge}}<div class="absolute top-3 left-3 bg-ink text-mist text-[10px] tracking-wider2 px-2 py-1">{{$badge}}</div>{{end}}
      </div>
      <div class="px-1">
        {{$code := index .Ext "code"}}
        {{if $code}}<div class="text-[11px] text-gray-400 mb-1 tracking-wide">{{$code}}</div>{{end}}
        <h3 class="font-serif text-base text-ink leading-snug group-hover:text-primary mb-2">{{.Title}}</h3>
        <div class="text-xs text-gray-500 space-y-1">
          {{$fabric := index .Ext "fabric"}}
          {{if $fabric}}<div>面料 · {{StrSub $fabric 24}}</div>{{end}}
          {{$moq := index .Ext "moq"}}
          {{if $moq}}<div>起订 · {{$moq}}</div>{{end}}
        </div>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="text-center text-gray-400 py-20 border border-dashed border-sand">本栏目暂无产品,请稍后再来。</div>
  {{end}}

  {{if .Pager.Enabled}}
  <nav class="flex justify-center items-center gap-2 mt-14">
    {{range .Pager.Items}}
      {{if eq .Kind "gap"}}<span class="px-3 py-2 text-gray-400 text-sm">…</span>
      {{else if .Disabled}}<span class="px-3 py-2 text-gray-300 text-sm">{{.Label}}</span>
      {{else if .Active}}<span class="px-3 py-2 bg-ink text-mist text-sm">{{.Label}}</span>
      {{else}}<a href="{{.URL}}" class="px-3 py-2 text-ink text-sm border border-sand hover:border-ink">{{.Label}}</a>
      {{end}}
    {{end}}
  </nav>
  {{end}}
</section>

<section class="bg-ink text-mist py-16">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
    <div class="lg:col-span-8">
      <div class="text-xs tracking-wider2 text-accent mb-3">INQUIRY</div>
      <h2 class="font-serif text-3xl md:text-4xl">看中款式?直接提交询盘</h2>
      <p class="text-gray-300 mt-3 max-w-xl">告诉我们感兴趣的款号、目标交期与起订量,我们会安排销售顾问 1 个工作日内回复。</p>
    </div>
    <div class="lg:col-span-4 lg:text-right">
      <a href="/inquiry" class="inline-block px-8 py-3 bg-accent text-ink text-sm tracking-wider2 hover:bg-mist transition">提交询盘 →</a>
    </div>
  </div>
</section>

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