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

{{if .Content}}
{{if .Content.Img}}
<section class="relative h-80 md:h-[460px]">
  <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="absolute inset-0 w-full h-full object-cover">
  <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-slate-900/30"></div>
  <div class="relative h-full flex items-end pb-10">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
      <nav class="text-xs text-slate-300 mb-4 flex flex-wrap gap-2 items-center">
        <a href="/" class="hover:text-accent">首页</a><span>/</span>
        {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:text-accent">{{.Content.ColumnName}}</a><span>/</span>{{end}}
        <span class="text-white truncate max-w-[280px]">{{.Content.Title}}</span>
      </nav>
      {{$badge := index .Content.Ext "badge"}}{{if $badge}}<span class="inline-block px-3 py-1 bg-accent text-white text-xs font-medium rounded mb-3 tracking-widest">{{$badge}}</span>{{end}}
      <h1 class="text-3xl md:text-5xl font-bold text-white max-w-4xl">{{.Content.Title}}</h1>
    </div>
  </div>
</section>
{{else}}
<section class="bg-slate-900 text-white py-14">
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <h1 class="text-3xl md:text-4xl font-bold">{{.Content.Title}}</h1>
  </div>
</section>
{{end}}

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  {{$location := index .Content.Ext "location"}}
  {{$industry := index .Content.Ext "industry"}}
  {{$equipment := index .Content.Ext "equipment"}}
  {{$result := index .Content.Ext "result"}}
  {{$year := index .Content.Ext "year"}}
  <div class="grid grid-cols-2 md:grid-cols-5 gap-px bg-slate-200 rounded-lg overflow-hidden border border-slate-200 mb-10">
    {{if $location}}<div class="bg-white p-5 text-center"><div class="text-xs text-slate-500 mb-1">项目地点</div><div class="text-sm font-semibold text-slate-900">{{$location}}</div></div>{{end}}
    {{if $industry}}<div class="bg-white p-5 text-center"><div class="text-xs text-slate-500 mb-1">行业场景</div><div class="text-sm font-semibold text-slate-900">{{$industry}}</div></div>{{end}}
    {{if $year}}<div class="bg-white p-5 text-center"><div class="text-xs text-slate-500 mb-1">投运年份</div><div class="text-sm font-semibold text-slate-900">{{$year}}</div></div>{{end}}
    {{if $equipment}}<div class="bg-white p-5 text-center"><div class="text-xs text-slate-500 mb-1">主要设备</div><div class="text-sm font-semibold text-slate-900">{{$equipment}}</div></div>{{end}}
    {{if $result}}<div class="bg-white p-5 text-center col-span-2 md:col-span-1"><div class="text-xs text-slate-500 mb-1">项目成果</div><div class="text-sm font-semibold text-accent">{{$result}}</div></div>{{end}}
  </div>

  <div class="prose prose-slate prose-lg max-w-none text-slate-700 leading-relaxed">{{.Content.Content|Str2Html}}</div>

  {{if .Content.Albums}}
  <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-10">
    {{range $i, $img := .Content.Albums}}
    {{if $img}}
    <button type="button" class="js-album-open aspect-video rounded overflow-hidden bg-slate-100" data-album="{{$img}}" data-album-alt="{{$.Content.Title}} 相册图 {{Add $i 1}}">
      <img src="{{$img}}" class="w-full h-full object-cover" loading="lazy">
    </button>
    {{end}}
    {{end}}
  </div>
  {{end}}

  <div class="mt-12 bg-primary text-white rounded-lg p-8 md:p-10">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
      <div class="md:col-span-2">
        <h3 class="text-2xl font-bold mb-2">寻找同样的成功?</h3>
        <p class="text-white/85">我们可以为您的项目复制这套方案,并根据您的实际工况优化调整。</p>
      </div>
      <div class="flex md:justify-end gap-3">
        <a href="/contact" class="px-6 py-3 bg-accent text-white font-medium rounded hover:bg-amber-700 transition whitespace-nowrap">咨询同款方案</a>
      </div>
    </div>
  </div>

  <div class="flex justify-between mt-10 pt-6 border-t border-slate-200 text-sm">
    {{if .Prev}}<a href="{{.Prev.URL}}" class="text-slate-600 hover:text-primary"><div class="text-xs text-slate-400">上一案例</div>← {{.Prev.Title}}</a>{{else}}<span></span>{{end}}
    {{if .Next}}<a href="{{.Next.URL}}" class="text-slate-600 hover:text-primary text-right"><div class="text-xs text-slate-400">下一案例</div>{{.Next.Title}} →</a>{{else}}<span></span>{{end}}
  </div>
</section>
<div id="album-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/85 px-4 py-8 backdrop-blur-sm">
  <button type="button" id="album-modal-close" class="absolute right-4 top-4 rounded-full bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:bg-white/20">关闭</button>
  <div class="relative max-h-[88vh] w-full max-w-6xl">
    <img id="album-modal-img" src="" alt="" class="mx-auto max-h-[88vh] w-auto max-w-full rounded-2xl object-contain shadow-2xl">
  </div>
</div>
{{end}}
{{include "js.html"}}

{{include "footer.html"}}