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

{{if .Content}}
<section class="relative bg-slate-900 text-white py-16">
  {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="absolute inset-0 w-full h-full object-cover opacity-30">{{end}}
  <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <nav class="text-xs text-slate-300 mb-5 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>
    {{$industry := index .Content.Ext "industry"}}{{if $industry}}<span class="inline-block px-3 py-1 bg-accent text-white text-xs font-medium rounded mb-4 tracking-widest">{{$industry}}</span>{{end}}
    <h1 class="text-3xl md:text-5xl font-bold leading-tight mb-4">{{.Content.Title}}</h1>
    <p class="text-lg text-slate-200 max-w-3xl">{{.Content.Description}}</p>
  </div>
</section>

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 relative z-10">
  {{$scale := index .Content.Ext "scale"}}
  {{$cycle := index .Content.Ext "cycle"}}
  {{$highlight := index .Content.Ext "highlight"}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 bg-white rounded-lg shadow-xl border border-slate-200 p-6">
    {{if $scale}}<div class="text-center md:text-left md:border-r md:border-slate-200 md:pr-6"><div class="text-xs text-slate-500 mb-1">产能规模</div><div class="text-xl font-bold text-primary">{{$scale}}</div></div>{{end}}
    {{if $cycle}}<div class="text-center md:text-left md:border-r md:border-slate-200 md:pr-6"><div class="text-xs text-slate-500 mb-1">交付周期</div><div class="text-xl font-bold text-slate-900">{{$cycle}}</div></div>{{end}}
    {{if $highlight}}<div class="text-center md:text-left"><div class="text-xs text-slate-500 mb-1">方案亮点</div><div class="text-sm font-medium text-accent">✨ {{$highlight}}</div></div>{{end}}
  </div>
</section>

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

  <div class="mt-12 bg-slate-900 text-white rounded-lg p-8 md:p-10 text-center">
    <h3 class="text-2xl font-bold mb-3">对此方案感兴趣?</h3>
    <p class="text-slate-300 mb-6">让我们的方案工程师为您提供项目实地评估</p>
    <div class="flex flex-wrap justify-center gap-3">
      <a href="/contact" class="px-7 py-3 bg-accent text-white font-medium rounded hover:bg-amber-700 transition">在线咨询方案</a>
      <a href="tel:400-6688-988" class="px-7 py-3 border-2 border-white/40 text-white font-medium rounded hover:bg-white/10 transition">400-6688-988</a>
    </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>
{{end}}
{{include "js.html"}}

{{include "footer.html"}}