{{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">OUR STORY</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}}

<article 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>
</article>

{{/* === 关键数据 === */}}
{{$stats := index .ThemesExt "stats_cards"}}
{{if $stats}}
<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="grid grid-cols-2 md:grid-cols-4 gap-6">
      {{range $stats}}
      <div class="text-center">
        <div class="text-3xl md:text-4xl font-serif font-semibold text-ink mb-1">{{.value}}</div>
        <div class="text-xs tracking-widest text-muted uppercase">{{.label}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* === 故事 3 图 === */}}
{{$story := index .ThemesExt "story_blocks"}}
{{if $story}}
<section class="py-20 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">CRAFTMANSHIP</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-3 gap-6">
      {{range $story}}
      <div class="group">
        <div class="relative aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
          <img src="{{.img}}" alt="{{.title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">
        </div>
        <h3 class="text-lg font-serif font-semibold text-ink mb-2">{{.title}}</h3>
        <p class="text-sm text-ink/70 leading-relaxed">{{.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* === 资质证书 === */}}
{{$certs := index .ThemesExt "certificates"}}
{{if $certs}}
<section class="py-16 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <h2 class="text-2xl md:text-3xl font-serif font-semibold text-ink mb-8 text-center">资质与认证</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
      {{range $certs}}
      <div>
        <div class="aspect-[16/9] overflow-hidden bg-white border border-stone-200 mb-3">
          <img src="{{.img}}" alt="{{.name}}" class="w-full h-full object-cover">
        </div>
        <p class="text-sm text-center text-ink/80">{{.name}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* === CTA === */}}
<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">广东佛山禅城,可预约线下参观。每周三、周五接待 2 组访客。</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"}}