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

<main>
  <section class="bg-steel-900 text-white">
    <div class="max-w-6xl mx-auto px-4 py-14">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
        <div class="lg:col-span-7">
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 border border-white/15 text-xs text-white/80">
            <span class="w-2 h-2 rounded-full bg-amber2-400"></span>
            <span>机械设备制造 · 官网模板</span>
          </div>
          <h1 class="mt-4 text-3xl md:text-5xl font-semibold tracking-tight">专注工业装备与自动化交付</h1>
          <p class="mt-4 text-white/80 leading-relaxed">提供选型建议、参数配置、工况适配、交付实施与售后保障。模板示例数据可用于快速搭建机械设备制造企业官网。</p>
          <div class="mt-7 flex flex-wrap gap-3">
            <a href="/products" class="h-11 inline-flex items-center px-5 rounded-xl bg-amber2-500 text-steel-950 font-semibold hover:bg-amber2-400">查看设备</a>
            <a href="/message" class="h-11 inline-flex items-center px-5 rounded-xl bg-white/10 border border-white/15 text-white hover:bg-white/15">在线咨询</a>
            <a href="/downloads" class="h-11 inline-flex items-center px-5 rounded-xl bg-white/10 border border-white/15 text-white hover:bg-white/15">资料下载</a>
          </div>
        </div>
        <div class="lg:col-span-5">
          {{$slides := HomeSlides}}
          <div class="rounded-3xl overflow-hidden border border-white/15 bg-white/5 shadow-soft">
            {{if $slides}}
              {{range $i, $s := $slides}}
                <a href="{{$s.URL}}" class="mmHomeSlide block {{if ne $i 0}}hidden{{end}}">
                  <div class="relative">
                    <img class="w-full h-64 object-cover" src="{{$s.Img}}" alt="{{$s.Title}}" />
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                    <div class="absolute left-0 right-0 bottom-0 p-6">
                      <div class="text-white text-lg font-semibold">{{$s.Title}}</div>
                      {{if $s.SubTitle}}<div class="mt-1 text-white/80 text-sm">{{$s.SubTitle}}</div>{{end}}
                    </div>
                  </div>
                </a>
              {{end}}
              <button type="button" class="mmPrev absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 hover:bg-white text-steel-900">‹</button>
              <button type="button" class="mmNext absolute right-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 hover:bg-white text-steel-900">›</button>
            {{else}}
              <div class="h-64 flex items-center justify-center text-sm text-white/70">可在后台配置轮播</div>
            {{end}}
          </div>
        </div>
      </div>

      <div class="mt-10 grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="rounded-2xl bg-white/10 border border-white/15 p-4">
          <div class="text-xs text-white/70">交付周期</div>
          <div class="mt-1 text-base font-semibold">按需定制</div>
        </div>
        <div class="rounded-2xl bg-white/10 border border-white/15 p-4">
          <div class="text-xs text-white/70">设备类型</div>
          <div class="mt-1 text-base font-semibold">标准 + 非标</div>
        </div>
        <div class="rounded-2xl bg-white/10 border border-white/15 p-4">
          <div class="text-xs text-white/70">服务范围</div>
          <div class="mt-1 text-base font-semibold">选型/实施/售后</div>
        </div>
        <div class="rounded-2xl bg-white/10 border border-white/15 p-4">
          <div class="text-xs text-white/70">支持方式</div>
          <div class="mt-1 text-base font-semibold">远程 + 到场</div>
        </div>
      </div>
    </div>
  </section>

  <section class="max-w-6xl mx-auto px-4 py-12">
    <div class="flex items-end justify-between gap-3">
      <div>
        <div class="text-xs uppercase tracking-widest text-amber2-700/80">Products</div>
        <div class="mt-1 text-xl font-semibold">设备与产品</div>
      </div>
      <a href="/products" class="text-sm text-steel-600 hover:text-amber2-700">更多产品</a>
    </div>
    <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
      {{range ColumnContents "products" 6}}
        <a href="{{.URL}}" class="group rounded-3xl overflow-hidden border border-steel-200 bg-white shadow-soft hover:border-amber2-200">
          <div class="aspect-[16/11] bg-steel-100">
            <img class="w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300" src="{{default .Img "https://picsum.photos/seed/mm-product/1200/800"}}" alt="{{.Title}}" />
          </div>
          <div class="p-6">
            <div class="text-base font-semibold line-clamp-1">{{.Title}}</div>
            <div class="mt-2 text-sm text-steel-600 line-clamp-2">{{.Description}}</div>
            <div class="mt-4 text-xs text-steel-500">{{ParseTime .CreatedAt "2006-01-02"}}</div>
          </div>
        </a>
      {{end}}
    </div>
  </section>

  <section class="bg-white border-y border-steel-200">
    <div class="max-w-6xl mx-auto px-4 py-12">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div class="lg:col-span-4">
          <div class="text-xs uppercase tracking-widest text-amber2-700/80">Strength</div>
          <div class="mt-1 text-xl font-semibold">生产实力</div>
          <div class="mt-3 text-sm text-steel-600">覆盖设计、加工、装配、质检与交付。页面内容为示例，可在后台编辑。</div>
          <div class="mt-6">
            <a href="/strength" class="inline-flex items-center gap-2 text-sm font-semibold text-steel-900 hover:text-amber2-700">了解更多 →</a>
          </div>
        </div>
        <div class="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="rounded-3xl border border-steel-200 bg-steel-50 p-6">
            <div class="text-sm font-semibold">加工能力</div>
            <div class="mt-2 text-sm text-steel-600">CNC/车铣复合/精密磨削</div>
          </div>
          <div class="rounded-3xl border border-steel-200 bg-steel-50 p-6">
            <div class="text-sm font-semibold">装配调试</div>
            <div class="mt-2 text-sm text-steel-600">标准化流程与工况验证</div>
          </div>
          <div class="rounded-3xl border border-steel-200 bg-steel-50 p-6">
            <div class="text-sm font-semibold">质量体系</div>
            <div class="mt-2 text-sm text-steel-600">检验记录可追溯</div>
          </div>
          <div class="rounded-3xl border border-steel-200 bg-steel-50 p-6">
            <div class="text-sm font-semibold">交付支持</div>
            <div class="mt-2 text-sm text-steel-600">远程诊断 + 到场服务</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="max-w-6xl mx-auto px-4 py-12">
    <div class="flex items-end justify-between gap-3">
      <div>
        <div class="text-xs uppercase tracking-widest text-amber2-700/80">News</div>
        <div class="mt-1 text-xl font-semibold">行业与企业动态</div>
      </div>
      <a href="/news" class="text-sm text-steel-600 hover:text-amber2-700">进入新闻中心</a>
    </div>
    <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-5">
      {{range ColumnContents "news" 4}}
        <a href="{{.URL}}" class="rounded-3xl border border-steel-200 bg-white p-6 shadow-soft hover:border-amber2-200">
          <div class="text-base font-semibold line-clamp-2">{{.Title}}</div>
          <div class="mt-2 text-sm text-steel-600 line-clamp-2">{{.Description}}</div>
          <div class="mt-4 text-xs text-steel-500">{{ParseTime .CreatedAt "2006-01-02"}} · {{.Views}} 浏览</div>
        </a>
      {{end}}
    </div>
  </section>

  <section class="bg-steel-900">
    <div class="max-w-6xl mx-auto px-4 py-12">
      <div class="rounded-3xl bg-white/5 border border-white/15 p-8 md:p-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
          <div class="text-white text-xl font-semibold">需要选型建议或获取报价？</div>
          <div class="mt-2 text-white/70 text-sm">提交需求，我们会尽快安排工程师对接。</div>
        </div>
        <div class="flex flex-wrap gap-3">
          <a href="/contact" class="h-11 inline-flex items-center px-6 rounded-xl bg-amber2-500 text-steel-950 font-semibold hover:bg-amber2-400">立即咨询</a>
          <a href="/agents" class="h-11 inline-flex items-center px-6 rounded-xl bg-white/10 border border-white/15 text-white hover:bg-white/15">招商代理</a>
        </div>
      </div>
    </div>
  </section>
</main>

<script>
  (function(){
    var root = document.querySelector('.mmHomeSlide');
    var slides = document.querySelectorAll('.mmHomeSlide');
    if(!slides || slides.length <= 1) return;
    var i = 0;
    function show(n){
      slides[i].classList.add('hidden');
      i = (n + slides.length) % slides.length;
      slides[i].classList.remove('hidden');
    }
    var prev = document.querySelector('.mmPrev');
    var next = document.querySelector('.mmNext');
    if(prev) prev.addEventListener('click', function(){ show(i - 1); });
    if(next) next.addEventListener('click', function(){ show(i + 1); });
    setInterval(function(){ show(i + 1); }, 5000);
  })();
</script>

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