{{include "header.html"}}
{{include "nav.html"}}
{{if .Single}}
{{$icon := index .Single.Ext "icon"}}
{{$badge := index .Single.Ext "badge"}}
{{$summary := index .Single.Ext "summary"}}
{{$delivery := index .Single.Ext "delivery"}}
{{$cycle := index .Single.Ext "cycle"}}
{{$fit := index .Single.Ext "fit"}}
{{$tags := index .Single.Ext "tags"}}
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  {{if .Nav}}
  <section class="pb-6">
    <div class="vm-breadcrumb">
      <a href="/">首页</a>
      {{range .Nav}}<span class="mx-2">/</span><a href="{{.URL}}">{{.Name}}</a>{{end}}
    </div>
  </section>
  {{end}}
  <section class="rounded-[2.5rem] border border-[var(--border)] bg-white p-6 shadow-[var(--shadow)] md:p-10">
    <div class="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
      <div class="max-w-3xl">
        <div class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">智能客服 / 智能问答</div>
        <h1 class="mt-3 text-3xl font-semibold text-[var(--text)] md:text-5xl">{{.Single.Column.Name}}</h1>
        {{if .Single.Column.Description}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.Single.Column.Description}}</p>{{end}}
        <p class="mt-6 text-base leading-8 text-[var(--text)]">{{if $summary}}{{$summary}}{{else}}{{.Single.Column.Description}}{{end}}</p>
        {{if .Single.Column.Content}}<div class="vm-prose mt-6 max-w-none text-[var(--text)]">{{.Single.Column.Content|Str2Html}}</div>{{end}}
      </div>
      <div class="flex w-full flex-col gap-4 lg:max-w-sm">
        <div class="rounded-[1.5rem] border border-[var(--border)] bg-[var(--surface-soft)] p-5">
          <div class="flex items-center gap-3">
            <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--primary-soft)] text-[var(--primary)]">
              <span class="text-lg font-semibold">{{if $icon}}{{$icon}}{{else}}QA{{end}}</span>
            </div>
            <div>
              <div class="text-sm text-[var(--muted)]">方案标签</div>
              <div class="mt-1 text-lg font-semibold text-[var(--text)]">{{if $badge}}{{$badge}}{{else}}客服引擎{{end}}</div>
            </div>
          </div>
        </div>
        <div class="rounded-[1.5rem] border border-[var(--border)] bg-white p-5">
          <div class="text-sm text-[var(--muted)]">交付方式</div>
          <div class="mt-2 text-lg font-semibold text-[var(--text)]">{{if $delivery}}{{$delivery}}{{else}}智能问答 + 转人工 + 话术管理{{end}}</div>
        </div>
        <div class="rounded-[1.5rem] border border-[var(--border)] bg-white p-5">
          <div class="text-sm text-[var(--muted)]">周期 / 适配</div>
          <div class="mt-2 text-lg font-semibold text-[var(--text)]">{{if $cycle}}{{$cycle}}{{end}}{{if and $cycle $fit}} / {{end}}{{if $fit}}{{$fit}}{{end}}</div>
        </div>
      </div>
    </div>
  </section>

  <section class="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-[1.5rem] border border-[var(--border)] bg-white p-5"><div class="text-sm text-[var(--muted)]">核心问题</div><div class="mt-2 text-lg font-semibold text-[var(--text)]">响应慢、口径散、夜间无值守</div></div>
    <div class="rounded-[1.5rem] border border-[var(--border)] bg-white p-5"><div class="text-sm text-[var(--muted)]">关键价值</div><div class="mt-2 text-lg font-semibold text-[var(--text)]">提升首次响应速度和一致性</div></div>
    <div class="rounded-[1.5rem] border border-[var(--border)] bg-white p-5"><div class="text-sm text-[var(--muted)]">适配场景</div><div class="mt-2 text-lg font-semibold text-[var(--text)]">官网、客服中心、业务入口</div></div>
    <div class="rounded-[1.5rem] border border-[var(--border)] bg-white p-5">
      <div class="text-sm text-[var(--muted)]">标签</div>
      <div class="mt-3 flex flex-wrap gap-2">
        {{if $tags}}{{range $tags}}<span class="rounded-full bg-[var(--surface-soft)] px-3 py-1 text-xs text-[var(--muted)]">{{.}}</span>{{end}}{{end}}
      </div>
    </div>
  </section>
</main>
{{end}}
{{include "footer.html"}}
{{include "js.html"}}