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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{$subTitle := index .Single.Ext "sub_title"}}
<section class="relative h-72 md:h-[420px] overflow-hidden">
  {{if $banner}}<img src="{{$banner}}" alt="{{.Single.Name}}" class="absolute inset-0 w-full h-full object-cover">{{end}}
  <div class="absolute inset-0 bg-gradient-to-r from-slate-900/90 to-slate-900/40"></div>
  <div class="relative h-full flex items-center">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">ABOUT US</div>
      <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">{{.Single.Name}}</h1>
      {{if $subTitle}}<p class="text-lg text-slate-200 max-w-2xl">{{$subTitle}}</p>{{else if .Single.Description}}<p class="text-lg text-slate-200 max-w-2xl">{{.Single.Description}}</p>{{end}}
    </div>
  </div>
</section>

{{$stats := index .ThemesExt "stats_cards"}}
{{if $stats}}
<section class="bg-white border-b border-slate-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 grid grid-cols-2 md:grid-cols-4 gap-6">
    {{range $stats}}
    <div class="text-center">
      <div class="text-4xl md:text-5xl font-bold text-primary mb-2">{{.value}}</div>
      <div class="text-sm text-slate-500 tracking-wide">{{.label}}</div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
  <div class="prose prose-slate prose-lg max-w-none text-slate-700 leading-relaxed">{{.Single.Content | Str2Html}}</div>
</section>

{{$adv := index .ThemesExt "advantages"}}
{{if $adv}}
<section class="bg-slate-50 py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">WHY CHOOSE US</div>
      <h2 class="text-3xl font-bold text-slate-900">为什么选择我们</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {{range $adv}}
      <div class="bg-white rounded-xl p-6 border border-slate-200 hover:border-accent transition text-center">
        <div class="w-12 h-12 mx-auto rounded-full bg-primary/10 text-primary flex items-center justify-center mb-4">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <div class="text-base font-semibold text-slate-900 mb-2">{{.title}}</div>
        <div class="text-xs text-slate-500 leading-relaxed">{{.desc}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{$steps := index .ThemesExt "service_steps"}}
{{if $steps}}
<section class="py-16 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">SERVICE PROCESS</div>
      <h2 class="text-3xl font-bold text-slate-900">服务流程</h2>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      {{range $steps}}
      <div class="bg-slate-50 rounded-xl p-6 border border-slate-200 relative">
        <div class="text-3xl font-bold text-accent/30 mb-3">{{.step}}</div>
        <div class="text-base font-semibold text-slate-900 mb-2">{{.title}}</div>
        <div class="text-xs text-slate-500 leading-relaxed">{{.desc}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-16 bg-gradient-to-br from-primary to-blue-800 text-white">
  <div class="max-w-4xl mx-auto px-4 text-center">
    <h2 class="text-3xl font-bold mb-3">让我们聊聊您的需求</h2>
    <p class="text-white/85 mb-7">顾问会在 1 个工作日内回复方案建议</p>
    <a href="/contact" class="inline-block px-8 py-3 bg-accent text-white font-semibold rounded-md hover:bg-sky-400 transition">联系我们</a>
  </div>
</section>
{{end}}
{{include "js.html"}}
{{include "footer.html"}}