<!doctype html>
<html lang="zh-cn">

<head>
  {{include "header.html"}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}
  {{include "bread.html"}}

  <main class="container mx-auto px-4 py-12">
    <div class="max-w-4xl mx-auto">
      <article class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
        {{if .Content.Img}}
        <div class="overflow-hidden">
          <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-64 sm:h-80 object-cover" />
        </div>
        {{end}}
        <div class="p-6 sm:p-8">
          <h1 class="text-2xl sm:text-3xl font-bold text-creative-900">{{.Content.Title}}</h1>
          <p class="mt-3 text-creative-600">{{.Content.Description}}</p>

          {{if .Content.Ext}}
          <div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
            {{$type := index .Content.Ext "service_type"}}
            {{if $type}}
            <div class="p-4 rounded-xl bg-creative-50 border border-creative-100">
              <div class="text-xs text-creative-500">服务类型</div>
              <div class="mt-1 font-medium text-creative-900">{{$type}}</div>
            </div>
            {{end}}
            {{$duration := index .Content.Ext "duration"}}
            {{if $duration}}
            <div class="p-4 rounded-xl bg-creative-50 border border-creative-100">
              <div class="text-xs text-creative-500">项目周期</div>
              <div class="mt-1 font-medium text-creative-900">{{$duration}}</div>
            </div>
            {{end}}
            {{$suitable := index .Content.Ext "suitable"}}
            {{if $suitable}}
            <div class="p-4 rounded-xl bg-creative-50 border border-creative-100">
              <div class="text-xs text-creative-500">适用客户</div>
              <div class="mt-1 font-medium text-creative-900">{{$suitable}}</div>
            </div>
            {{end}}
          </div>
          {{end}}

          <div class="prose max-w-none mt-8">
            {{.Content.Content|Str2Html}}
          </div>

          <div class="mt-10 p-6 rounded-2xl bg-gradient-to-r from-creative-50 to-navy-50 border border-creative-100">
            <div class="text-center">
              <div class="text-lg font-semibold text-creative-900">对这项服务感兴趣？</div>
              <p class="mt-2 text-sm text-creative-600">联系我们获取专属方案和报价</p>
              <a href="/contact" class="mt-4 inline-flex items-center gap-2 px-6 py-3 rounded-full bg-gradient-to-r from-creative-600 to-navy-600 text-white hover:shadow-creative transition-shadow">
                <i class="fa-solid fa-paper-plane"></i>
                <span>立即咨询</span>
              </a>
            </div>
          </div>
        </div>
      </article>

      {{$related := Related .Content.Id 3}}
      {{if $related}}
      <section class="mt-8 bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
        <div class="p-6 sm:p-8">
          <div class="text-lg font-semibold text-creative-900 mb-6">相关服务</div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {{range $related}}
            <a href="{{.URL}}" class="group block rounded-xl border border-creative-100 overflow-hidden hover:shadow-creative transition-shadow">
              {{if .Img}}
              <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300" />
              {{end}}
              <div class="p-4">
                <div class="font-medium text-creative-900 group-hover:text-creative-600 transition-colors line-clamp-1">{{.Title}}</div>
                <div class="mt-1 text-xs text-creative-500 line-clamp-2">{{.Description}}</div>
              </div>
            </a>
            {{end}}
          </div>
        </div>
      </section>
      {{end}}
    </div>
  </main>

  {{include "footer.html"}}
  {{include "js.html"}}
</body>

</html>
