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

{{$slides := HomeSlides}}
<main>
  {{if $slides}}
  <section class="hero-carousel relative overflow-hidden border-b border-[color:var(--border)] bg-[color:var(--surface)]">
    <div class="relative mx-auto h-[72vh] max-h-[760px] min-h-[520px] max-w-7xl">
      {{range $i, $slide := $slides}}
      <article class="hero-slide absolute inset-0 grid items-center transition-opacity duration-500 {{if eq $i 0}}is-active{{end}}" data-slide="{{$i}}">
        <div class="grid h-full items-center gap-10 px-4 sm:px-6 lg:grid-cols-[1.1fr_0.9fr] lg:px-8">
          <div class="max-w-2xl">
            <div class="mb-4 inline-flex rounded-full border border-[color:var(--border)] bg-white px-4 py-1 text-xs font-medium text-[color:var(--primary)]">{{default (index $.ThemesExt "hero_badge") "企业软件服务与数字化交付"}}</div>
            <h1 class="text-4xl font-semibold tracking-tight text-[color:var(--text)] md:text-6xl">{{.Title}}</h1>
            <p class="mt-5 max-w-xl text-base leading-8 text-[color:var(--muted)] md:text-lg">{{.SubTitle}}</p>
            <div class="mt-8 flex flex-wrap gap-3">
              <a href="{{default (index $.ThemesExt "cta_primary_url") "/contact"}}" class="btn-primary">{{default (index $.ThemesExt "cta_primary") "预约产品演示"}}</a>
              <a href="{{default (index $.ThemesExt "cta_secondary_url") "/solutions"}}" class="btn-secondary">{{default (index $.ThemesExt "cta_secondary") "获取数字化方案"}}</a>
            </div>
            <div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
              {{range (index $.ThemesExt "stats")}}
              <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">
                <div class="text-lg font-semibold text-[color:var(--text)]">{{index . "value"}}</div>
                <div class="mt-1 text-xs leading-5 text-[color:var(--muted)]">{{index . "label"}}</div>
              </div>
              {{end}}
            </div>
          </div>
          <div class="relative">
            <div class="rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface)] p-3 shadow-[0_24px_60px_rgba(47,126,168,0.10)]">
              <img src="{{.Img}}" alt="{{.Title}}" class="aspect-[4/3] w-full rounded-2xl object-cover">
            </div>
          </div>
        </div>
      </article>
      {{end}}
      {{if gt (len $slides) 1}}
      <button id="prevSlide" class="hero-arrow left-4" aria-label="上一张">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
      </button>
      <button id="nextSlide" class="hero-arrow right-4" aria-label="下一张">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
      </button>
      <div class="absolute bottom-6 left-1/2 flex -translate-x-1/2 gap-2">
        {{range $i, $slide := $slides}}
        <button class="hero-dot {{if eq $i 0}}is-active{{end}}" data-slide="{{$i}}" aria-label="切换轮播"></button>
        {{end}}
      </div>
      {{end}}
    </div>
  </section>
  {{end}}

  <section class="section-band">
    <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
      <div class="grid gap-6 md:grid-cols-4">
        {{range (index .ThemesExt "features")}}
        <article class="info-card">
          <h2 class="text-lg font-semibold">{{.title}}</h2>
          <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{.text}}</p>
        </article>
        {{end}}
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="mb-8 flex items-end justify-between gap-4">
      <div>
        <p class="section-kicker">产品服务</p>
        <h2 class="section-title">从标准产品到托管服务</h2>
      </div>
      <a class="section-link" href="/products">查看全部产品</a>
    </div>
    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {{range (ColumnContents "products" 6)}}
      <article class="content-card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="aspect-[4/3] w-full rounded-2xl object-cover">{{end}}
        <div class="p-6">
          <div class="mb-3 flex flex-wrap gap-2">
            {{if .Ext}}{{if index .Ext "badge"}}<span class="chip">{{index .Ext "badge"}}</span>{{end}}{{end}}
            {{if .Ext}}{{if index .Ext "deploy"}}<span class="chip chip-soft">{{index .Ext "deploy"}}</span>{{end}}{{end}}
          </div>
          <h3 class="text-xl font-semibold"><a href="{{.URL}}">{{.Title}}</a></h3>
          <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{StrSub .Description 92}}</p>
          <div class="mt-5 text-sm text-[color:var(--muted)]">
            {{if .Ext}}{{if index .Ext "cycle"}}<div>交付周期：{{index .Ext "cycle"}}</div>{{end}}{{end}}
            {{if .Ext}}{{if index .Ext "integration"}}<div>集成能力：{{index .Ext "integration"}}</div>{{end}}{{end}}
          </div>
        </div>
      </article>
      {{end}}
    </div>
  </section>

  <section class="section-band">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
      <div class="mb-8 flex items-end justify-between gap-4">
        <div>
          <p class="section-kicker">解决方案</p>
          <h2 class="section-title">按业务场景组织，而不是按功能堆叠</h2>
        </div>
        <a class="section-link" href="/solutions">查看全部方案</a>
      </div>
      <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
        {{range (ColumnContents "solutions" 6)}}
        <article class="content-card">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="aspect-[16/10] w-full rounded-2xl object-cover">{{end}}
          <div class="p-6">
            <div class="mb-3 flex flex-wrap gap-2">
              {{if .Ext}}{{if index .Ext "industry"}}<span class="chip">{{index .Ext "industry"}}</span>{{end}}{{end}}
              {{if .Ext}}{{if index .Ext "scenario"}}<span class="chip chip-soft">{{index .Ext "scenario"}}</span>{{end}}{{end}}
            </div>
            <h3 class="text-xl font-semibold"><a href="{{.URL}}">{{.Title}}</a></h3>
            <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{StrSub .Description 96}}</p>
          </div>
        </article>
        {{end}}
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="mb-8 flex items-end justify-between gap-4">
      <div>
        <p class="section-kicker">客户案例</p>
        <h2 class="section-title">用交付结果说话</h2>
      </div>
      <a class="section-link" href="/cases">查看全部案例</a>
    </div>
    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {{range (ColumnContents "cases" 6)}}
      <article class="content-card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="aspect-[4/3] w-full rounded-2xl object-cover">{{end}}
        <div class="p-6">
          <div class="mb-3 flex flex-wrap gap-2">
            {{if .Ext}}{{if index .Ext "industry"}}<span class="chip">{{index .Ext "industry"}}</span>{{end}}{{end}}
            {{if .Ext}}{{if index .Ext "result"}}<span class="chip chip-soft">{{index .Ext "result"}}</span>{{end}}{{end}}
          </div>
          <h3 class="text-xl font-semibold"><a href="{{.URL}}">{{.Title}}</a></h3>
          <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{StrSub .Description 96}}</p>
        </div>
      </article>
      {{end}}
    </div>
  </section>

  <section class="section-band">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
      <div class="grid gap-8 lg:grid-cols-[1fr_1fr]">
        <div class="info-card">
          <p class="section-kicker">为什么选择我们</p>
          <h2 class="section-title">交付、运维、合规一起做</h2>
          <div class="mt-6 grid gap-3">
            {{range (index .ThemesExt "process")}}
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">
              <div class="text-sm font-semibold text-[color:var(--primary)]">{{.step}} {{.title}}</div>
              <div class="mt-1 text-sm leading-7 text-[color:var(--muted)]">{{.text}}</div>
            </div>
            {{end}}
          </div>
        </div>
        <div class="info-card">
          <p class="section-kicker">资质与伙伴</p>
          <h2 class="section-title">让证明材料和内容一起出现</h2>
          <div class="mt-6 grid gap-4">
            {{range (index .ThemesExt "qualifications")}}
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">
              <div class="font-semibold">{{.name}}</div>
              <div class="mt-1 text-sm leading-7 text-[color:var(--muted)]">{{.desc}}</div>
            </div>
            {{end}}
          </div>
          <div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3">
            {{range (index .ThemesExt "partners")}}
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4 text-center">
              <img src="{{.logo}}" alt="{{.name}}" class="mx-auto h-10 w-full object-cover rounded-lg">
              <div class="mt-2 text-xs text-[color:var(--muted)]">{{.name}}</div>
            </div>
            {{end}}
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="mb-8 flex items-end justify-between gap-4">
      <div>
        <p class="section-kicker">资讯洞察</p>
        <h2 class="section-title">帮助客户更快做选型和落地判断</h2>
      </div>
      <a class="section-link" href="/insights">查看全部资讯</a>
    </div>
    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {{range (ColumnContents "insights" 6)}}
      <article class="content-card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="aspect-[16/10] w-full rounded-2xl object-cover">{{end}}
        <div class="p-6">
          <h3 class="text-xl font-semibold"><a href="{{.URL}}">{{.Title}}</a></h3>
          <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{StrSub .Description 96}}</p>
        </div>
      </article>
      {{end}}
    </div>
  </section>

  <section class="section-band">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
      <div class="mb-8">
        <p class="section-kicker">友情链接</p>
        <h2 class="section-title">连接常用技术与开放平台</h2>
      </div>
      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        {{range FriendLinks}}
        <a href="{{.URL}}" target="_blank" rel="noreferrer" class="content-card p-4 transition hover:-translate-y-0.5">
          <div class="text-sm font-semibold">{{.Name}}</div>
          {{if .Remark}}<div class="mt-1 text-xs leading-5 text-[color:var(--muted)]">{{.Remark}}</div>{{end}}
        </a>
        {{end}}
      </div>
    </div>
  </section>

  <section class="section-band">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
      <div class="grid gap-8 lg:grid-cols-[1fr_1fr]">
        <div class="info-card">
          <p class="section-kicker">常见问题</p>
          <h2 class="section-title">沟通成本低，先把关键问题说清楚</h2>
          <div class="mt-6 space-y-4">
            {{range (index .ThemesExt "faq")}}
            <details class="rounded-2xl border border-[color:var(--border)] bg-white p-4">
              <summary class="cursor-pointer font-medium">{{.q}}</summary>
              <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{.a}}</p>
            </details>
            {{end}}
          </div>
        </div>
        <div class="info-card">
          <p class="section-kicker">联系咨询</p>
          <h2 class="section-title">预约演示或提交项目需求</h2>
          <p class="mt-4 text-sm leading-7 text-[color:var(--muted)]">{{index (index .ThemesExt "contact") "promise"}}</p>
          <div class="mt-6 grid gap-3 text-sm">
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">电话：{{index (index .ThemesExt "contact") "phone"}}</div>
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">邮箱：{{index (index .ThemesExt "contact") "email"}}</div>
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">地址：{{index (index .ThemesExt "contact") "address"}}</div>
            <div class="rounded-2xl border border-[color:var(--border)] bg-white p-4">时间：{{index (index .ThemesExt "contact") "hours"}}</div>
          </div>
          <div class="mt-8">
            <a href="/contact" class="btn-primary">进入联系页</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

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