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

{{if .Content}}
<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>

<section class="bg-white py-10">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-10">
    <div>
      {{if .Content.Img}}
      <div class="rounded-lg overflow-hidden bg-slate-100 mb-4">
        <img id="mainImage" src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full aspect-square object-cover">
      </div>
      {{end}}
      {{if .Content.Albums}}
      <div class="grid grid-cols-5 gap-2">
        {{if .Content.Img}}<button type="button" class="thumb aspect-square rounded overflow-hidden border-2 border-accent" data-src="{{.Content.Img}}"><img src="{{.Content.Img}}" class="w-full h-full object-cover"></button>{{end}}
        {{range .Content.Albums}}
        <button type="button" class="thumb js-album-open aspect-square rounded overflow-hidden border-2 border-transparent hover:border-accent" data-src="{{.}}" data-album="{{.}}" data-album-alt="{{$.Content.Title}}">
          <img src="{{.}}" class="w-full h-full object-cover">
        </button>
        {{end}}
      </div>
      {{end}}
    </div>

    <div>
      {{$badge := index .Content.Ext "badge"}}{{if $badge}}<span class="inline-block px-2.5 py-1 bg-accent text-white text-xs font-medium rounded mb-3">{{$badge}}</span>{{end}}
      <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-3">{{.Content.Title}}</h1>
      <p class="text-slate-600 leading-relaxed mb-6">{{.Content.Description}}</p>

      {{$model := index .Content.Ext "model"}}
      {{$power := index .Content.Ext "power"}}
      {{$capacity := index .Content.Ext "capacity"}}
      {{$material := index .Content.Ext "material"}}
      {{$weight := index .Content.Ext "weight"}}
      {{$dimension := index .Content.Ext "dimension"}}
      <div class="grid grid-cols-2 gap-4 mb-8 p-5 bg-slate-50 rounded-lg border border-slate-200">
        {{if $model}}<div><div class="text-xs text-slate-500 mb-1">产品型号</div><div class="text-base font-semibold text-slate-900">{{$model}}</div></div>{{end}}
        {{if $power}}<div><div class="text-xs text-slate-500 mb-1">电机功率</div><div class="text-base font-semibold text-slate-900">{{$power}}</div></div>{{end}}
        {{if $capacity}}<div><div class="text-xs text-slate-500 mb-1">处理能力</div><div class="text-base font-semibold text-accent">{{$capacity}}</div></div>{{end}}
        {{if $weight}}<div><div class="text-xs text-slate-500 mb-1">整机重量</div><div class="text-base font-semibold text-slate-900">{{$weight}}</div></div>{{end}}
        {{if $dimension}}<div class="col-span-2"><div class="text-xs text-slate-500 mb-1">外形尺寸 (长×宽×高)</div><div class="text-base font-semibold text-slate-900">{{$dimension}}</div></div>{{end}}
        {{if $material}}<div class="col-span-2"><div class="text-xs text-slate-500 mb-1">适用物料</div><div class="text-sm text-slate-800">{{$material}}</div></div>{{end}}
      </div>

      <div class="flex flex-wrap 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-primary text-primary font-medium rounded hover:bg-primary hover:text-white transition">销售热线</a>
      </div>

      <div class="mt-6 pt-6 border-t border-slate-200 text-xs text-slate-500">
        <span>发布时间:{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
        <span class="ml-4">浏览次数:{{.Content.Views}}</span>
      </div>
    </div>
  </div>
</section>

<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">
      <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 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"><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>
    </div>

    <aside class="space-y-6">
      <div class="bg-primary text-white rounded-lg p-6">
        <h3 class="text-lg font-semibold mb-2">需要技术方案?</h3>
        <p class="text-sm text-white/80 mb-4 leading-relaxed">告诉我们您的产能、物料和场地条件,工程师 1 个工作日内回复。</p>
        <a href="/contact" class="block text-center px-4 py-2.5 bg-accent rounded font-medium hover:bg-amber-700 transition">免费索取方案</a>
      </div>

      {{$related := Related .Content.Id 4}}
      {{if $related}}
      <div class="bg-white rounded-lg 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>

<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>

<script>
$(function(){
  $('.thumb').on('click', function(){
    var src = $(this).data('src');
    $('#mainImage').attr('src', src);
    $('.thumb').removeClass('border-accent').addClass('border-transparent');
    $(this).removeClass('border-transparent').addClass('border-accent');
  });
});
</script>
{{end}}
{{include "js.html"}}
{{include "footer.html"}}