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

{{if .Content}}
{{$contact := index .ThemesExt "contact"}}
<section class="bg-slate-50 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <nav class="text-xs text-slate-500 flex flex-wrap gap-2 items-center">
      <a href="/" class="hover:text-primary">首页</a><span>/</span>
      {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:text-primary">{{.Content.ColumnName}}</a><span>/</span>{{end}}
      <span class="text-slate-700 truncate max-w-[280px]">{{.Content.Title}}</span>
    </nav>
  </div>
</section>

{{if .Content.Img}}
<section class="relative h-64 md:h-[400px] overflow-hidden">
  <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-r from-slate-900/85 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">CUSTOMER CASE</div>
      <h1 class="text-3xl md:text-5xl font-bold text-white max-w-3xl">{{.Content.Title}}</h1>
      {{if .Content.Description}}<p class="text-lg text-slate-200 mt-3 max-w-2xl">{{.Content.Description}}</p>{{end}}
    </div>
  </div>
</section>
{{else}}
<section class="bg-slate-900 text-white py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-xs font-semibold text-accent tracking-widest mb-3">CUSTOMER CASE</div>
    <h1 class="text-3xl md:text-4xl font-bold">{{.Content.Title}}</h1>
    {{if .Content.Description}}<p class="text-slate-300 mt-3 max-w-2xl">{{.Content.Description}}</p>{{end}}
  </div>
</section>
{{end}}

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
    <div class="lg:col-span-2">
      {{$industry := index .Content.Ext "industry"}}
      {{$scene := index .Content.Ext "scene"}}
      {{$result := index .Content.Ext "result"}}
      {{$year := index .Content.Ext "year"}}
      {{if or $industry $scene $year}}
      <div class="grid grid-cols-3 gap-4 mb-8">
        {{if $industry}}<div class="p-4 bg-slate-50 rounded-lg border border-slate-200 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 $scene}}<div class="p-4 bg-slate-50 rounded-lg border border-slate-200 text-center"><div class="text-xs text-slate-500 mb-1">应用场景</div><div class="text-sm font-semibold text-slate-900">{{$scene}}</div></div>{{end}}
        {{if $year}}<div class="p-4 bg-slate-50 rounded-lg border border-slate-200 text-center"><div class="text-xs text-slate-500 mb-1">交付年份</div><div class="text-sm font-semibold text-accent">{{$year}}</div></div>{{end}}
      </div>
      {{end}}
      {{if $result}}
      <div class="p-5 bg-accent/10 border-l-4 border-accent rounded-r-lg mb-8">
        <div class="text-xs text-accent font-semibold tracking-wide mb-1">PROJECT RESULT · 项目成果</div>
        <div class="text-lg font-bold text-slate-900">{{$result}}</div>
      </div>
      {{end}}

      <div class="border-b border-slate-200 mb-6">
        <h2 class="text-xl font-bold text-slate-900 pb-3 border-b-2 border-accent inline-block">案例详情</h2>
      </div>
      <div class="prose prose-slate prose-lg max-w-none text-slate-700 leading-relaxed">{{.Content.Content | Str2Html}}</div>

      {{if .Content.Tags}}
      <div class="mt-8 flex flex-wrap gap-2">
        {{range .Content.Tags}}<a href="{{.URL}}" class="px-3 py-1 bg-slate-100 text-slate-600 text-sm rounded hover:bg-primary hover:text-white transition">#{{.Name}}</a>{{end}}
      </div>
      {{end}}

      <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 max-w-[45%]"><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 max-w-[45%]"><div class="text-xs text-slate-400">下一个</div>{{.Next.Title}} →</a>{{else}}<span></span>{{end}}
      </div>
    </div>

    <aside class="space-y-6">
      <div class="bg-primary text-white rounded-xl p-6">
        <h3 class="text-lg font-semibold mb-2">想要类似成果？</h3>
        <p class="text-sm text-white/85 mb-4 leading-relaxed">告诉我们您的行业与痛点，我们帮您规划可落地的方案。</p>
        <a href="/contact" class="block text-center px-4 py-2.5 bg-accent rounded-md font-medium hover:bg-sky-400 transition">免费咨询</a>
      </div>

      {{$related := Related .Content.Id 4}}
      {{if $related}}
      <div class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="text-base font-semibold text-slate-900 mb-4">相关案例</h3>
        <ul class="space-y-3">
          {{range $related}}
          <li class="flex gap-3 group">
            {{if .Img}}<a href="{{.URL}}" class="w-20 h-16 rounded overflow-hidden shrink-0"><img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover"></a>{{end}}
            <a href="{{.URL}}" class="text-sm text-slate-700 group-hover:text-primary line-clamp-3">{{.Title}}</a>
          </li>
          {{end}}
        </ul>
      </div>
      {{end}}
    </aside>
  </div>
</section>
{{end}}
{{include "js.html"}}
{{include "footer.html"}}