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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{if $banner}}
<section class="relative aspect-[16/9] max-h-[50vh] 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/20 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">GET IN TOUCH</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-16 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-3 gap-8">
    {{$phone := index .Single.Ext "phone"}}
    {{$email := index .Single.Ext "email"}}
    {{$address := index .Single.Ext "address"}}

    {{if $phone}}
    <div class="bg-white p-8 border-t-2 border-accent shadow-sm">
      <div class="w-12 h-12 bg-stone-100 flex items-center justify-center mb-5">
        <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
      </div>
      <h3 class="text-xs tracking-[0.3em] uppercase text-muted mb-2">客服电话</h3>
      <p class="text-2xl font-serif font-semibold text-ink mb-1">{{$phone}}</p>
      <p class="text-xs text-muted">工作日 9:00-18:00 · 周六 10:00-17:00</p>
    </div>
    {{end}}

    {{if $email}}
    <div class="bg-white p-8 border-t-2 border-accent shadow-sm">
      <div class="w-12 h-12 bg-stone-100 flex items-center justify-center mb-5">
        <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
      </div>
      <h3 class="text-xs tracking-[0.3em] uppercase text-muted mb-2">邮件咨询</h3>
      <p class="text-xl font-serif font-semibold text-ink mb-1 break-all">{{$email}}</p>
      <p class="text-xs text-muted">24 小时内回复</p>
    </div>
    {{end}}

    {{if $address}}
    <div class="bg-white p-8 border-t-2 border-accent shadow-sm">
      <div class="w-12 h-12 bg-stone-100 flex items-center justify-center mb-5">
        <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      </div>
      <h3 class="text-xs tracking-[0.3em] uppercase text-muted mb-2">工坊地址</h3>
      <p class="text-base text-ink leading-relaxed mb-1">{{$address}}</p>
      <p class="text-xs text-muted">参观请提前预约</p>
    </div>
    {{end}}
  </div>
</section>

{{/* === 富文本介绍(如果有) === */}}
{{if .Single.Content}}
<section class="py-12 bg-stone-50 border-y border-stone-200">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="prose prose-stone max-w-none">{{.Single.Content|Str2Html}}</div>
  </div>
</section>
{{end}}

{{/* === 留言入口 === */}}
<section class="py-20 bg-paper">
  <div class="max-w-3xl mx-auto px-4 text-center">
    <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-3">SEND A MESSAGE</span>
    <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink mb-4">还有其他问题?</h2>
    <p class="text-sm md:text-base text-muted leading-relaxed mb-8 max-w-xl mx-auto">尺码、保养、定制、企业团购,无论什么需求,留下您的联系方式,我们会在 1 个工作日内回复您。</p>
    <a href="/message" class="inline-block px-10 py-3 bg-accent text-white text-sm tracking-wider hover:opacity-90 transition">在线留言咨询</a>
  </div>
</section>

{{/* === 地图占位 / 大图 === */}}
<section class="bg-stone-100">
  <div class="aspect-[16/9] max-h-[400px] w-full overflow-hidden">
    <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&h=900&q=80" alt="工坊地图" class="w-full h-full object-cover">
  </div>
</section>
{{end}}

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