{{include "header.html"}}
{{include "nav.html"}}
{{if .Single}}
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <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-6 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}}
        {{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-3 lg:max-w-sm lg:items-stretch">
        <a href="/contact" class="rounded-full bg-[var(--primary)] px-6 py-4 text-center text-sm font-semibold text-white">获取演示</a>
        <a href="/contact" class="rounded-full border border-[var(--border)] bg-white px-6 py-4 text-center text-sm font-semibold text-[var(--text)]">预约演示咨询</a>
      </div>
    </div>
  </section>

  <section class="mt-8 grid gap-4 md:grid-cols-3">
    <div class="rounded-[1.25rem] border border-[var(--border)] bg-white p-4">
      <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.25rem] border border-[var(--border)] bg-[var(--surface-soft)] p-4">
      <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.25rem] border border-[var(--border)] bg-white p-4">
      <div class="text-sm text-[var(--muted)]">结果导向</div>
      <div class="mt-2 text-lg font-semibold text-[var(--text)]">直接引导到咨询和留资</div>
    </div>
  </section>
</main>
{{end}}
{{include "footer.html"}}
{{include "js.html"}}