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

{{$contact := index .ThemesExt "contact"}}
{{$showSlides := index .ThemesExt "show_slides"}}

{{/* ============ 1. Hero 轮播 ============ */}}
{{$slides := HomeSlides}}
{{if and $slides (ne $showSlides false)}}
<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/90 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-primary/90 text-xs font-medium rounded mb-5 tracking-widest">{{index $.ThemesExt "hero_eyebrow"}}</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-primary text-white font-medium rounded-md hover:bg-blue-700 transition">了解详情</a>
              <a href="{{index $.ThemesExt "hero_cta_url"}}" class="px-7 py-3 border border-white/40 text-white font-medium rounded-md hover:bg-white/10 transition">{{index $.ThemesExt "hero_cta_text"}}</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>
      {{$subTitle := index $about.Ext "sub_title"}}
      {{if $subTitle}}<p class="text-base text-slate-500 mb-4">{{$subTitle}}</p>{{end}}
      <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-xl shadow-xl w-full h-[440px] object-cover">{{end}}
      {{$established := index $about.Ext "established"}}
      {{if $established}}
      <div class="absolute -bottom-6 -left-6 bg-primary text-white px-6 py-5 rounded-xl shadow-lg hidden md:block">
        <div class="text-3xl font-bold">{{$established}}</div>
        <div class="text-xs opacity-90 mt-1">深耕至今</div>
      </div>
      {{end}}
    </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-xl 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>
          {{$model := index .Ext "model"}}{{$scene := index .Ext "scene"}}
          <div class="grid grid-cols-2 gap-2 text-xs text-slate-600 border-t border-slate-100 pt-3">
            {{if $model}}<div><span class="text-slate-400">版本：</span>{{$model}}</div>{{end}}
            {{if $scene}}<div class="col-span-2"><span class="text-slate-400">场景：</span>{{$scene}}</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-md 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 rounded-xl 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-lg 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></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-md 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-xl 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}}
          {{$ind := index .Ext "industry"}}{{if $ind}}<span class="absolute bottom-3 left-3 text-white text-xs"> {{$ind}}</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">标准化流程，确保每个项目可控、可追溯、可交付</p>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      {{range $steps}}
      <div class="bg-white rounded-xl 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. 客户评价 ============ */}}
{{$testimonials := index .ThemesExt "testimonials"}}
{{if $testimonials}}
<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">TESTIMONIALS</div>
      <h2 class="text-3xl md:text-4xl font-bold text-slate-900">客户怎么说</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {{range $testimonials}}
      <div class="bg-slate-50 rounded-xl p-7 border border-slate-200">
        <div class="text-accent text-4xl leading-none mb-3">"</div>
        <p class="text-sm text-slate-600 leading-relaxed mb-5">{{.content}}</p>
        <div class="flex items-center gap-3">
          {{if .avatar}}<img src="{{.avatar}}" alt="{{.name}}" class="w-10 h-10 rounded-full object-cover">{{end}}
          <div>
            <div class="text-sm font-semibold text-slate-900">{{.name}}</div>
            <div class="text-xs text-slate-500">{{.company}}</div>
          </div>
        </div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ============ 9. 合作伙伴 + FAQ ============ */}}
{{$partners := index .ThemesExt "partners"}}
{{$faqs := index .ThemesExt "faqs"}}
<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">
    {{if $partners}}
    <div>
      <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 mb-6">服务客户与合作伙伴</h2>
      <div class="grid grid-cols-3 gap-4">
        {{range $partners}}
        <div class="aspect-[3/2] bg-white rounded-lg 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-cover opacity-70 hover:opacity-100 transition rounded">
        </div>
        {{end}}
      </div>
    </div>
    {{end}}

    {{if $faqs}}
    <div>
      <div class="text-xs font-semibold text-accent tracking-widest mb-3">FAQ</div>
      <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">常见问题</h2>
      <div class="space-y-3">
        {{range $faqs}}
        <div class="faq-item bg-white rounded-lg border border-slate-200 overflow-hidden">
          <button type="button" class="faq-q w-full text-left px-5 py-4 flex items-center justify-between gap-3">
            <span class="text-sm font-medium text-slate-800">{{.q}}</span>
            <svg class="w-5 h-5 text-slate-400 shrink-0 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </button>
          <div class="faq-a hidden px-5 pb-4 text-sm text-slate-500 leading-relaxed">{{.a}}</div>
        </div>
        {{end}}
      </div>
    </div>
    {{end}}
  </div>
</section>

{{/* ============ 10. 最新动态 + CTA ============ */}}
{{$news := ColumnContents "news" 3}}
{{if $news}}
<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-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-xl 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}}

<section class="relative py-20 overflow-hidden bg-gradient-to-br from-primary to-blue-800">
  <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(circle at 20% 50%,rgba(14,165,233,.5),transparent 50%),radial-gradient(circle at 80% 50%,rgba(37,99,235,.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-200 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-md hover:bg-sky-400 transition">免费方案咨询</a>
      {{if $contact}}{{if $contact.phone}}<a href="tel:{{$contact.phone}}" class="px-8 py-3.5 border-2 border-white/40 text-white font-semibold rounded-md hover:bg-white/10 transition">咨询热线 {{$contact.phone}}</a>{{end}}{{end}}
    </div>
  </div>
</section>

{{include "js.html"}}
{{include "footer.html"}}