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

{{if .Single}}
<section class="bg-ink relative h-72 md:h-96 overflow-hidden">
  {{$banner := index .Single.Ext "banner_img"}}
  {{if $banner}}<img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover opacity-50">{{end}}
  <div class="absolute inset-0 flex items-center justify-center text-mist text-center px-6">
    <div>
      <div class="text-xs tracking-wider2 text-accent mb-3">CRAFT · FACTORY</div>
      <h1 class="font-serif text-4xl md:text-6xl">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-mist/80 mt-4 max-w-2xl mx-auto">{{.Single.Description}}</p>{{end}}
    </div>
  </div>
</section>

<section class="py-20 lg:py-24">
  <div class="max-w-[820px] mx-auto px-6 lg:px-10">
    <div class="prose prose-lg max-w-none prose-headings:font-serif prose-headings:text-ink prose-headings:mt-12 prose-headings:mb-4 prose-p:text-gray-700 prose-p:leading-relaxed">
      {{.Single.Content|Str2Html}}
    </div>
  </div>
</section>

{{$steps := index .ThemesExt "process_steps"}}
{{if $steps}}
<section class="bg-sand py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">21 DAYS · FROM SKETCH TO SHIP</div>
    <h2 class="font-serif text-3xl md:text-4xl text-ink mb-12">六大工序节点</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-sand">
      {{range $steps}}
      <div class="bg-mist p-8">
        <div class="font-serif text-4xl text-accent mb-4">{{.step}}</div>
        <h3 class="text-lg text-ink mb-3 tracking-wide">{{.title}}</h3>
        <p class="text-sm text-gray-500 leading-relaxed">{{.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-20 lg:py-24 bg-mist">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">FACTORY · GALLERY</div>
    <h2 class="font-serif text-3xl md:text-4xl text-ink mb-12">车间一瞥</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="aspect-[9/16] overflow-hidden bg-sand"><img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?auto=format&fit=crop&w=900&q=80" alt="车间-1" class="w-full h-full object-cover"></div>
      <div class="aspect-[9/16] overflow-hidden bg-sand"><img src="https://images.unsplash.com/photo-1542295669297-4d352b042bca?auto=format&fit=crop&w=900&q=80" alt="车间-2" class="w-full h-full object-cover"></div>
      <div class="aspect-[9/16] overflow-hidden bg-sand"><img src="https://images.unsplash.com/photo-1532635241-17e820acc59f?auto=format&fit=crop&w=900&q=80" alt="车间-3" class="w-full h-full object-cover"></div>
      <div class="aspect-[9/16] overflow-hidden bg-sand"><img src="https://images.unsplash.com/photo-1517256064527-09c73fc73e38?auto=format&fit=crop&w=900&q=80" alt="车间-4" class="w-full h-full object-cover"></div>
    </div>
  </div>
</section>

<section class="bg-ink text-mist py-20">
  <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">FACTORY VISIT</div>
      <h2 class="font-serif text-3xl md:text-4xl mb-4">想到工厂实地看款?</h2>
      <p class="text-gray-300 max-w-xl leading-relaxed">我们每周二、周四开放品牌主理人 / 买手到访,提供版师陪同讲解、面料样卡现场试看。预约请通过询盘表单提交,我们会安排专人接洽行程。</p>
    </div>
    <div class="lg:col-span-4 flex lg:justify-end">
      <a href="/inquiry" class="px-8 py-4 bg-accent text-ink text-sm tracking-wider2 hover:bg-mist transition">预约工厂参访 →</a>
    </div>
  </div>
</section>
{{end}}

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