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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{if $banner}}
<section class="relative aspect-[16/9] max-h-[55vh] overflow-hidden">
  <img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover">
  <div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/30 to-black/10 flex items-end pb-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 w-full text-white">
      <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-3">CRAFT &amp; CARE</span>
      <h1 class="text-3xl md:text-5xl font-serif font-semibold mb-3">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-sm md:text-lg opacity-90 max-w-2xl">{{.Single.Description}}</p>{{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-20 bg-paper">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="prose prose-stone prose-lg max-w-none">{{.Single.Content|Str2Html}}</div>
  </div>
</section>

{{/* 工艺步骤 */}}
<section class="py-16 bg-stone-50 border-y border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="text-center mb-12">
      <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">PROCESS</span>
      <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">六个核心环节</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white p-6 border-t-2 border-accent">
        <div class="text-xs tracking-widest text-accent mb-3">01</div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">原料追溯</h3>
        <p class="text-sm text-ink/70 leading-relaxed">每张皮料都有可追溯的牧场编号与鞣制批次,意大利植鞣牛皮、葡萄牙小羊皮、国内有机棉。</p>
      </div>
      <div class="bg-white p-6 border-t-2 border-accent">
        <div class="text-xs tracking-widest text-accent mb-3">02</div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">裁皮削边</h3>
        <p class="text-sm text-ink/70 leading-relaxed">人工挑选完整无瑕的皮料,按部位裁切;边缘削薄 0.4mm,为后续缝合做准备。</p>
      </div>
      <div class="bg-white p-6 border-t-2 border-accent">
        <div class="text-xs tracking-widest text-accent mb-3">03</div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">手工缝制</h3>
        <p class="text-sm text-ink/70 leading-relaxed">承重位手工双面缝制,每英寸 8 针,比工厂机器 6 针提升 30% 抗拉强度。</p>
      </div>
      <div class="bg-white p-6 border-t-2 border-accent">
        <div class="text-xs tracking-widest text-accent mb-3">04</div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">打磨上蜡</h3>
        <p class="text-sm text-ink/70 leading-relaxed">皮面 5 道打磨工序,封边蜡熔后两次涂抹,确保边缘光滑、防水、不易开裂。</p>
      </div>
      <div class="bg-white p-6 border-t-2 border-accent">
        <div class="text-xs tracking-widest text-accent mb-3">05</div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">出厂质检</h3>
        <p class="text-sm text-ink/70 leading-relaxed">6 项检测:起拱、走线、染色、五金牢度、贴合度、味道。任一不通过则降级或回炉。</p>
      </div>
      <div class="bg-white p-6 border-t-2 border-accent">
        <div class="text-xs tracking-widest text-accent mb-3">06</div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">终身养护</h3>
        <p class="text-sm text-ink/70 leading-relaxed">换底、改色、补线、磨损修复 — 终身免费。我们鼓励你穿到坏,再让我们补好它。</p>
      </div>
    </div>
  </div>
</section>

{{/* 合作伙伴 / 供应链 */}}
{{$partners := index .ThemesExt "partners"}}
{{if $partners}}
<section class="py-16 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="text-center mb-12">
      <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">SUPPLY CHAIN</span>
      <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">原料与工艺合作伙伴</h2>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
      {{range $partners}}
      <div class="flex flex-col items-center gap-3 grayscale hover:grayscale-0 transition">
        <img src="{{.logo}}" alt="{{.name}}" class="h-14 w-auto object-contain">
        <span class="text-xs text-muted tracking-wide text-center">{{.name}}</span>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-20 bg-ink text-white text-center">
  <div class="max-w-2xl mx-auto px-4">
    <h2 class="text-2xl md:text-3xl font-serif font-semibold mb-4">把鞋包寄回工坊养护</h2>
    <p class="text-sm text-stone-300 mb-7">所有正价产品提供终身免费养护:换底、改色、补线、磨损修复。寄回后 7-15 个工作日返还。</p>
    <a href="/message" class="inline-block px-8 py-3 bg-accent text-white text-sm tracking-wider hover:opacity-90 transition">预约养护</a>
  </div>
</section>
{{end}}

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