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

{{$root := .}}
{{$slides := HomeSlides}}
<section class="relative h-screen min-h-[760px] overflow-hidden">
  <div class="absolute inset-0">
    <div class="relative h-full w-full overflow-hidden" id="hero-carousel">
      {{if $slides}}
      {{range $i, $slide := $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}}">
        <img src="{{.Img}}" alt="{{.Title}}" class="h-full w-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/35 to-black/10"></div>
        <div class="absolute inset-0 flex items-center">
          <div class="mx-auto flex w-full max-w-7xl items-center px-4 sm:px-6 lg:px-8">
            <div class="max-w-3xl text-white">
              <span class="inline-flex w-fit rounded-full border border-white/20 bg-white/10 px-4 py-1 text-sm font-medium backdrop-blur">智慧农场数字化官网</span>
              <h1 class="mt-6 text-5xl font-semibold leading-tight md:text-7xl">{{.Title}}</h1>
              <p class="mt-6 max-w-2xl text-lg leading-9 text-white/90 md:text-2xl">{{.SubTitle}}</p>
              <div class="mt-10 flex flex-wrap gap-4">
                <a href="/software" class="rounded-full bg-white px-7 py-3.5 text-sm font-medium text-[var(--text)]">查看软件产品</a>
                <a href="/hardware" class="rounded-full border border-white/40 bg-white/10 px-7 py-3.5 text-sm font-medium text-white backdrop-blur">查看硬件产品</a>
                <a href="{{index $root.ThemesExt "login_url"}}" class="rounded-full border border-white/40 bg-transparent px-7 py-3.5 text-sm font-medium text-white">平台登录</a>
              </div>
              <div class="mt-10 grid gap-4 sm:grid-cols-3">
                <div class="rounded-2xl border border-white/15 bg-white/10 px-5 py-4 backdrop-blur">
                  <div class="text-sm text-white/70">数据采集</div>
                  <div class="mt-1 text-xl font-semibold">实时可视</div>
                </div>
                <div class="rounded-2xl border border-white/15 bg-white/10 px-5 py-4 backdrop-blur">
                  <div class="text-sm text-white/70">设备联动</div>
                  <div class="mt-1 text-xl font-semibold">自动控制</div>
                </div>
                <div class="rounded-2xl border border-white/15 bg-white/10 px-5 py-4 backdrop-blur">
                  <div class="text-sm text-white/70">项目交付</div>
                  <div class="mt-1 text-xl font-semibold">可复制落地</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{end}}
      {{end}}
      {{if gt (len $slides) 1}}
      <button id="hero-prev" class="absolute left-5 top-1/2 z-10 -translate-y-1/2 rounded-full border border-white/20 bg-white/15 p-4 text-white backdrop-blur">‹</button>
      <button id="hero-next" class="absolute right-5 top-1/2 z-10 -translate-y-1/2 rounded-full border border-white/20 bg-white/15 p-4 text-white backdrop-blur">›</button>
      <div class="absolute bottom-8 left-1/2 z-10 flex -translate-x-1/2 gap-2">
        {{range $i, $slide := $slides}}
        <button class="hero-dot h-2.5 w-2.5 rounded-full bg-white/40 {{if eq $i 0}}bg-white{{end}}" data-index="{{$i}}"></button>
        {{end}}
      </div>
      {{end}}
    </div>
  </div>
</section>

<section class="py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="grid gap-4 md:grid-cols-4">
      {{range $card := index $root.ThemesExt "stats_cards"}}
      <div class="rounded-2xl px-6 py-5 text-white shadow-sm {{index $card "bg"}}">
        <div class="text-4xl font-semibold">{{index $card "value"}}</div>
        <div class="mt-2 text-sm text-white/90">{{index $card "label"}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>

{{$about := ColumnByName "关于我们"}}
<section class="py-10">
  <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
    <div>
      <span class="section-kicker">公司介绍</span>
      <h2 class="mt-4 text-3xl font-semibold">聚焦农业数字化交付与持续运维</h2>
      <p class="mt-4 text-[var(--muted)] leading-8">我们围绕设施农业、果蔬基地和智慧牧场提供软件、硬件和实施服务，强调现场可交付、数据可追踪、异常可预警。</p>
      <a href="{{if $about}}{{$about.URL}}{{else}}/about{{end}}" class="mt-6 inline-flex rounded-full border border-[var(--border)] bg-white px-5 py-2.5 text-sm font-medium">了解公司</a>
    </div>
    <div class="grid gap-4 sm:grid-cols-2">
      <div class="rounded-2xl border border-[var(--border)] bg-white p-6">
        <div class="text-sm text-[var(--muted)]">服务范围</div>
        <div class="mt-2 text-xl font-semibold">软件、硬件、案例、招聘</div>
      </div>
      <div class="rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] p-6">
        <div class="text-sm text-[var(--muted)]">交付方式</div>
        <div class="mt-2 text-xl font-semibold">勘测、部署、培训、运维</div>
      </div>
      <div class="rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] p-6">
        <div class="text-sm text-[var(--muted)]">典型场景</div>
        <div class="mt-2 text-xl font-semibold">温室、果园、牧场、园区</div>
      </div>
      <div class="rounded-2xl border border-[var(--border)] bg-white p-6">
        <div class="text-sm text-[var(--muted)]">目标用户</div>
        <div class="mt-2 text-xl font-semibold">农场主与运营团队</div>
      </div>
    </div>
  </div>
</section>

<section class="py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-end justify-between gap-4">
      <div>
        <span class="section-kicker">软件产品</span>
        <h2 class="mt-4 text-3xl font-semibold">让农场数据和管理动作统一到一个平台</h2>
      </div>
      <a href="/software" class="text-sm font-medium text-[var(--primary)]">查看更多</a>
    </div>
    <div class="mt-6 grid gap-5 md:grid-cols-3">
      {{range ColumnContents "software" 3}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}
        <img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">
        {{end}}
        <div class="text-xs text-[var(--primary)]">{{index .Ext "badge"}}</div>
        <h3 class="mt-3 text-xl font-semibold">{{.Title}}</h3>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{StrLimit .Description 90 "…"}}</p>
        <div class="mt-5 flex flex-wrap gap-2 text-xs text-[var(--muted)]">
          <span class="badge">{{index .Ext "scenario"}}</span>
          <span class="badge">{{index .Ext "deployment"}}</span>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>

<section class="py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-end justify-between gap-4">
      <div>
        <span class="section-kicker">硬件产品</span>
        <h2 class="mt-4 text-3xl font-semibold">采集、联动、控制，一线设备完整呈现</h2>
      </div>
      <a href="/hardware" class="text-sm font-medium text-[var(--primary)]">查看更多</a>
    </div>
    <div class="mt-6 grid gap-5 md:grid-cols-3">
      {{range ColumnContents "hardware" 3}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}
        <img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">
        {{end}}
        <h3 class="text-xl font-semibold">{{.Title}}</h3>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{StrLimit .Description 90 "…"}}</p>
        <div class="mt-5 text-sm text-[var(--text)]">{{index .Ext "model"}} · {{index .Ext "spec"}}</div>
      </a>
      {{end}}
    </div>
  </div>
</section>

<section class="py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-end justify-between gap-4">
      <div>
        <span class="section-kicker">客户案例</span>
        <h2 class="mt-4 text-3xl font-semibold">看得见的项目结果和落地场景</h2>
      </div>
      <a href="/cases" class="text-sm font-medium text-[var(--primary)]">查看更多</a>
    </div>
    <div class="mt-6 grid gap-5 md:grid-cols-3">
      {{range ColumnContents "cases" 3}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}
        <img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">
        {{end}}
        <div class="text-sm text-[var(--muted)]">{{index .Ext "location"}} · {{index .Ext "year"}}</div>
        <h3 class="mt-3 text-xl font-semibold">{{.Title}}</h3>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{StrLimit .Description 90 "…"}}</p>
        <div class="mt-5 text-sm text-[var(--primary)]">{{index .Ext "result"}}</div>
      </a>
      {{end}}
    </div>
  </div>
</section>

<section class="py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <span class="section-kicker">专家介绍</span>
    <h2 class="mt-4 text-3xl font-semibold">来自交付、硬件与农业场景的复合型团队</h2>
    <div class="mt-6 flex gap-4 overflow-x-auto pb-2">
      {{range index $root.ThemesExt "experts"}}
      <div class="min-w-[280px] rounded-2xl border border-[var(--border)] bg-white p-5">
        <img src="{{index . "avatar"}}" alt="{{index . "name"}}" class="h-16 w-16 rounded-full object-cover">
        <div class="mt-4 text-lg font-semibold">{{index . "name"}}</div>
        <div class="text-sm text-[var(--primary)]">{{index . "title"}}</div>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{index . "desc"}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>

<section class="py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <span class="section-kicker">合作伙伴</span>
    <div class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
      {{range index $root.ThemesExt "partners"}}
      <div class="overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-3">
        <img src="{{index . "logo"}}" alt="{{index . "name"}}" class="h-24 w-full object-cover">
      </div>
      {{end}}
    </div>
  </div>
</section>

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