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

{{if .Content}}
{{$season := index .Content.Ext "season"}}
{{$theme := index .Content.Ext "theme"}}
{{$pieces := index .Content.Ext "pieces"}}
{{$release := index .Content.Ext "release"}}
{{$audience := index .Content.Ext "audience"}}
{{$badge := index .Content.Ext "badge"}}

<section class="relative bg-ink">
  <div class="aspect-[3/2] md:aspect-[16/7] overflow-hidden">
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover opacity-70">{{end}}
  </div>
  <div class="absolute inset-0 flex items-end">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-10 pb-10 lg:pb-16 w-full text-mist">
      {{if $season}}<div class="text-xs tracking-wider2 text-accent mb-3">{{$season}}{{if $badge}} · {{$badge}}{{end}}</div>{{end}}
      <h1 class="font-serif text-3xl md:text-5xl lg:text-6xl leading-tight">{{.Content.Title}}</h1>
      {{if .Content.Description}}<p class="text-mist/80 mt-4 max-w-2xl">{{.Content.Description}}</p>{{end}}
    </div>
  </div>
</section>

<section class="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
  <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-6 border-t border-sand pt-8">
    <div>
      <div class="text-[11px] tracking-wider2 text-gray-500 mb-2">主题色调</div>
      <div class="font-serif text-lg text-ink">{{if $theme}}{{$theme}}{{end}}</div>
    </div>
    <div>
      <div class="text-[11px] tracking-wider2 text-gray-500 mb-2">款数</div>
      <div class="font-serif text-lg text-ink">{{if $pieces}}{{$pieces}}{{end}}</div>
    </div>
    <div>
      <div class="text-[11px] tracking-wider2 text-gray-500 mb-2">发布</div>
      <div class="font-serif text-lg text-ink">{{if $release}}{{$release}}{{end}}</div>
    </div>
    <div>
      <div class="text-[11px] tracking-wider2 text-gray-500 mb-2">目标客群</div>
      <div class="font-serif text-lg text-ink">{{if $audience}}{{$audience}}{{end}}</div>
    </div>
  </div>
</section>

<section class="bg-mist py-14 lg:py-16">
  <div class="max-w-[820px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">COLLECTION 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>

{{if .Content.Albums}}
<section class="bg-sand py-14 lg:py-16">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">LOOKBOOK</div>
    <h2 class="font-serif text-2xl text-ink mb-8">系列 Lookbook</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {{range .Content.Albums}}
      <div class="aspect-[9/16] overflow-hidden bg-mist">
        <img src="{{.}}" alt="lookbook" class="w-full h-full object-cover">
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{$related := Related .Content.Id 4}}
{{if $related}}
<section class="py-14 lg: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">MORE COLLECTIONS</div>
        <h3 class="font-serif text-2xl text-ink">其他系列</h3>
      </div>
      <a href="/collections" 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-sand 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">整盘订货客户享有优先排产、价格阶梯与专属版型 LOGO 定制。提交询盘后,我们将在 1 个工作日内安排接洽。</p>
    <a href="/inquiry?ref={{.Content.Title}}" 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"}}