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

<main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Content}}
  <article>
    <header class="mb-8">
      <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">{{.Content.Title}}</h1>
      {{if .Content.Description}}<p class="mt-3 max-w-3xl text-[color:var(--muted)]">{{.Content.Description}}</p>{{end}}
    </header>
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="mb-8 aspect-[16/9] w-full rounded-3xl object-cover">{{end}}
    <section class="panel">
      <div class="detail-list">
        <div class="detail-item"><span>适用行业</span><strong>{{index .Content.Ext "industry"}}</strong></div>
        <div class="detail-item"><span>业务场景</span><strong>{{index .Content.Ext "scenario"}}</strong></div>
        <div class="detail-item"><span>业务痛点</span><strong>{{index .Content.Ext "pain"}}</strong></div>
        <div class="detail-item"><span>解决结果</span><strong>{{index .Content.Ext "result"}}</strong></div>
      </div>
      <div class="mt-8 article-body">{{.Content.Content|Str2Html}}</div>
      <div class="mt-8 flex flex-wrap gap-3">
        <a href="/products" class="btn-secondary">查看相关产品</a>
        <a href="/contact" class="btn-primary">咨询该方案</a>
      </div>
    </section>
  </article>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}