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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
<section class="relative h-80 md:h-[460px]">
  {{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 .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>

{{$experts := index .ThemesExt "experts"}}
{{if $experts}}
<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">CORE TEAM</div>
      <h2 class="text-3xl font-bold text-slate-900">核心团队</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {{range $experts}}
      <div class="bg-white rounded-lg overflow-hidden border border-slate-200 hover:shadow-lg transition text-center p-6">
        {{if .avatar}}<img src="{{.avatar}}" alt="{{.name}}" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-slate-100">{{end}}
        <div class="text-lg font-semibold text-slate-900">{{.name}}</div>
        <div class="text-sm text-accent font-medium mb-3">{{.title}}</div>
        <div class="text-xs text-slate-500 leading-relaxed">{{.desc}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{$certs := index .ThemesExt "certificates"}}
{{if $certs}}
<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">CERTIFICATES</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 $certs}}
      <div class="text-center">
        <div class="aspect-[3/4] bg-slate-100 rounded overflow-hidden mb-3 border border-slate-200">
          <img src="{{.img}}" alt="{{.name}}" class="w-full h-full object-cover">
        </div>
        <div class="text-sm font-medium text-slate-700">{{.name}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-16 bg-primary 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">22 年专注,只为每个客户的连续生产</p>
    <a href="/contact" class="inline-block px-8 py-3 bg-accent text-white font-semibold rounded hover:bg-amber-700 transition">联系我们</a>
  </div>
</section>
{{end}}
{{include "js.html"}}

{{include "footer.html"}}