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

{{/* 1. Hero 轮播 */}}
{{$slides := HomeSlides}}
{{if $slides}}
<section id="hero" class="relative bg-slate-900 overflow-hidden">
  <div class="relative h-[460px] md:h-[600px]">
    {{range $i, $s := $slides}}
    <div class="hero-slide absolute inset-0 transition-opacity duration-700 {{if eq $i 0}}opacity-100{{else}}opacity-0 pointer-events-none{{end}}" data-index="{{$i}}">
      <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-slate-900/85 via-slate-900/55 to-transparent"></div>
      <div class="absolute inset-0 flex items-center">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 w-full">
          <div class="max-w-2xl text-white">
            <span class="inline-block px-3 py-1 bg-accent/90 text-xs font-medium rounded-sm mb-5 tracking-widest">HEAVY MACHINERY · 22 YEARS</span>
            <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-5">{{.Title}}</h1>
            <p class="text-lg md:text-xl text-slate-200 mb-8 leading-relaxed">{{.SubTitle}}</p>
            <div class="flex flex-wrap gap-4">
              <a href="{{.URL}}" class="px-7 py-3 bg-accent text-white font-medium rounded hover:bg-amber-700 transition">了解详情</a>
              <a href="/contact" class="px-7 py-3 border border-white/40 text-white font-medium rounded hover:bg-white/10 transition">获取方案</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{end}}
  </div>
  <div class="absolute bottom-6 left-0 right-0 flex justify-center gap-3 z-10">
    {{range $i, $s := $slides}}
    <button class="hero-dot w-10 h-1.5 rounded-full transition {{if eq $i 0}}bg-accent{{else}}bg-white/40 hover:bg-white/70{{end}}" data-target="{{$i}}"></button>
    {{end}}
  </div>
</section>
{{end}}

{{/* 2. 数据 / 信任证明 */}}
{{$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}}

{{/* 3. 关于我们 */}}
{{$about := Column "about"}}
{{if $about}}
<section class="py-20 bg-slate-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <div>
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">ABOUT US</div>
      <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-5">{{$about.Name}}</h2>
      <p class="text-slate-600 leading-relaxed mb-6">{{$about.Description}}</p>
      {{$adv := index .ThemesExt "advantages"}}
      {{if $adv}}
      <div class="grid grid-cols-2 gap-4 mb-8">
        {{range $adv}}
        <div class="flex items-start gap-3">
          <div class="w-9 h-9 rounded bg-primary/10 text-primary flex items-center justify-center shrink-0 mt-0.5">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          </div>
          <div>
            <div class="text-sm font-semibold text-slate-800">{{.title}}</div>
            <div class="text-xs text-slate-500 mt-1 leading-relaxed">{{.desc}}</div>
          </div>
        </div>
        {{end}}
      </div>
      {{end}}
      <a href="{{$about.URL}}" class="inline-flex items-center gap-2 text-primary font-medium hover:gap-3 transition-all">了解更多关于我们 <span>→</span></a>
    </div>
    <div class="relative">
      {{$banner := index $about.Ext "banner_img"}}
      {{if $banner}}<img src="{{$banner}}" alt="{{$about.Name}}" class="rounded-lg shadow-xl w-full h-[440px] object-cover">{{end}}
      <div class="absolute -bottom-6 -left-6 bg-accent text-white px-6 py-5 rounded shadow-lg hidden md:block">
        <div class="text-3xl font-bold">22+</div>
        <div class="text-xs opacity-90 mt-1">年制造经验</div>
      </div>
    </div>
  </div>
</section>
{{end}}

{{/* 4. 产品中心 */}}
{{$products := ColumnContents "products" 6}}
{{if $products}}
<section class="py-20 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-14">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">PRODUCTS</div>
      <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-3">产品中心</h2>
      <p class="text-slate-500 max-w-2xl mx-auto">破碎机、振动筛、给料机、输送机、移动破碎站,全系列矿山砂石装备</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {{range $products}}
      <a href="{{.URL}}" class="group bg-white rounded-lg overflow-hidden border border-slate-200 hover:border-primary hover:shadow-lg transition">
        <div class="relative aspect-[4/3] overflow-hidden bg-slate-100">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">{{end}}
          {{$badge := index .Ext "badge"}}{{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-accent text-white text-xs font-medium rounded">{{$badge}}</span>{{end}}
        </div>
        <div class="p-5">
          <h3 class="text-lg font-semibold text-slate-900 mb-2 group-hover:text-primary transition">{{.Title}}</h3>
          <p class="text-sm text-slate-500 line-clamp-2 mb-4">{{StrSub .Description 80}}</p>
          <div class="grid grid-cols-2 gap-2 text-xs text-slate-600 border-t border-slate-100 pt-3">
            {{$model := index .Ext "model"}}{{if $model}}<div><span class="text-slate-400">型号:</span> {{$model}}</div>{{end}}
            {{$cap := index .Ext "capacity"}}{{if $cap}}<div><span class="text-slate-400">产能:</span> {{$cap}}</div>{{end}}
          </div>
        </div>
      </a>
      {{end}}
    </div>
    <div class="text-center mt-12">
      <a href="/products" class="inline-flex items-center gap-2 px-6 py-3 border-2 border-primary text-primary font-medium rounded hover:bg-primary hover:text-white transition">查看全部产品 →</a>
    </div>
  </div>
</section>
{{end}}

{{/* 5. 解决方案 */}}
{{$solutions := ColumnContents "solutions" 4}}
{{if $solutions}}
<section class="py-20 bg-slate-900 text-white relative overflow-hidden">
  <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.4) 1px,transparent 0);background-size:32px 32px"></div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-14">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">SOLUTIONS</div>
      <h2 class="text-3xl md:text-4xl font-bold mb-3">行业解决方案</h2>
      <p class="text-slate-400 max-w-2xl mx-auto">从砂石骨料、矿山破碎到建筑垃圾资源化,提供整线设计与交付能力</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      {{range $solutions}}
      <a href="{{.URL}}" class="group relative rounded-lg overflow-hidden bg-slate-800 hover:bg-slate-700 transition border border-slate-700 p-7">
        {{$industry := index .Ext "industry"}}{{$scale := index .Ext "scale"}}
        <div class="flex items-start gap-4">
          <div class="w-12 h-12 rounded bg-accent/20 text-accent flex items-center justify-center shrink-0">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14-4H5m14 8H5m14 4H5"/></svg>
          </div>
          <div class="flex-1">
            <h3 class="text-xl font-semibold mb-2 group-hover:text-accent transition">{{.Title}}</h3>
            <p class="text-sm text-slate-400 mb-4 line-clamp-2">{{.Description}}</p>
            <div class="flex flex-wrap gap-3 text-xs">
              {{if $industry}}<span class="px-2.5 py-1 bg-slate-700 rounded">行业:{{$industry}}</span>{{end}}
              {{if $scale}}<span class="px-2.5 py-1 bg-slate-700 rounded">产能:{{$scale}}</span>{{end}}
            </div>
          </div>
        </div>
      </a>
      {{end}}
    </div>
    <div class="text-center mt-12">
      <a href="/solutions" class="inline-flex items-center gap-2 px-6 py-3 border-2 border-accent text-accent font-medium rounded hover:bg-accent hover:text-white transition">浏览所有方案 →</a>
    </div>
  </div>
</section>
{{end}}

{{/* 6. 客户案例 */}}
{{$cases := ColumnContents "cases" 3}}
{{if $cases}}
<section class="py-20 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap items-end justify-between mb-12 gap-4">
      <div>
        <div class="text-xs font-semibold text-accent tracking-widest mb-3">CUSTOMER CASES</div>
        <h2 class="text-3xl md:text-4xl font-bold text-slate-900">标杆项目</h2>
      </div>
      <a href="/cases" class="text-primary font-medium hover:text-accent">查看全部 →</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {{range $cases}}
      <a href="{{.URL}}" class="group block bg-white rounded-lg overflow-hidden border border-slate-200 hover:shadow-xl transition">
        <div class="relative aspect-video overflow-hidden bg-slate-100">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">{{end}}
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent"></div>
          {{$year := index .Ext "year"}}{{if $year}}<span class="absolute top-3 right-3 bg-accent text-white text-xs px-2.5 py-1 rounded">{{$year}}</span>{{end}}
          {{$loc := index .Ext "location"}}{{if $loc}}<span class="absolute bottom-3 left-3 text-white text-xs">📍 {{$loc}}</span>{{end}}
        </div>
        <div class="p-5">
          <h3 class="text-lg font-semibold text-slate-900 mb-2 group-hover:text-primary transition line-clamp-2">{{.Title}}</h3>
          {{$result := index .Ext "result"}}{{if $result}}<div class="text-xs text-accent font-medium">{{$result}}</div>{{end}}
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 7. 服务流程 */}}
{{$steps := index .ThemesExt "service_steps"}}
{{if $steps}}
<section class="py-20 bg-slate-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-14">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">SERVICE PROCESS</div>
      <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-3">从咨询到交付</h2>
      <p class="text-slate-500 max-w-2xl mx-auto">5 个标准化环节,确保每个项目可控、可追溯、可交付</p>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 md:gap-6">
      {{range $steps}}
      <div class="bg-white rounded-lg p-6 border border-slate-200 hover:border-accent transition relative">
        <div class="text-3xl font-bold text-accent/30 mb-3">{{.step}}</div>
        <div class="text-base font-semibold text-slate-900 mb-2">{{.title}}</div>
        <div class="text-xs text-slate-500 leading-relaxed">{{.desc}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 8. 合作伙伴 */}}
{{$partners := index .ThemesExt "partners"}}
{{if $partners}}
<section class="py-16 bg-white border-t border-slate-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10">
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">PARTNERS</div>
      <h2 class="text-2xl md:text-3xl font-bold text-slate-900">服务客户与合作伙伴</h2>
    </div>
    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-8 gap-4 items-center">
      {{range $partners}}
      <div class="aspect-[3/2] bg-slate-50 rounded border border-slate-200 flex items-center justify-center p-3 hover:border-primary transition" title="{{.name}}">
        <img src="{{.logo}}" alt="{{.name}}" class="max-h-full max-w-full object-contain opacity-60 hover:opacity-100 transition">
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 9. 最新动态 */}}
{{$news := ColumnContents "news" 3}}
{{if $news}}
<section class="py-20 bg-slate-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap items-end justify-between mb-10 gap-4">
      <div>
        <div class="text-xs font-semibold text-accent tracking-widest mb-3">NEWS</div>
        <h2 class="text-3xl md:text-4xl font-bold text-slate-900">最新动态</h2>
      </div>
      <a href="/news" class="text-primary font-medium hover:text-accent">查看更多 →</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {{range $news}}
      <a href="{{.URL}}" class="bg-white rounded-lg overflow-hidden border border-slate-200 hover:shadow-lg transition group">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full aspect-video object-cover">{{end}}
        <div class="p-5">
          <div class="text-xs text-slate-400 mb-2">{{ParseTime .CreatedAt "2006-01-02"}}</div>
          <h3 class="text-lg font-semibold text-slate-900 mb-2 line-clamp-2 group-hover:text-primary transition">{{.Title}}</h3>
          <p class="text-sm text-slate-500 line-clamp-2">{{StrSub .Description 80}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 10. CTA */}}
<section class="relative py-20 overflow-hidden" style="background:linear-gradient(135deg,#334a63 0%,#1b2330 100%)">
  <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(circle at 20% 50%,rgba(210,138,48,.5),transparent 50%),radial-gradient(circle at 80% 50%,rgba(51,74,99,.5),transparent 50%)"></div>
  <div class="relative max-w-4xl mx-auto px-4 text-center text-white">
    <h2 class="text-3xl md:text-4xl font-bold mb-4">需要矿山破碎方案?</h2>
    <p class="text-slate-300 mb-8 text-lg">告诉我们您的产能目标、物料和场地条件,工程师会在 1 个工作日内回复设计建议。</p>
    <div class="flex flex-wrap justify-center gap-4">
      <a href="/contact" class="px-8 py-3.5 bg-accent text-white font-semibold rounded hover:bg-amber-700 transition">立即免费咨询</a>
      <a href="tel:400-6688-988" class="px-8 py-3.5 border-2 border-white/40 text-white font-semibold rounded hover:bg-white/10 transition">销售热线 400-6688-988</a>
    </div>
  </div>
</section>
{{include "js.html"}}

{{include "footer.html"}}