<!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-5xl 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-72 sm:h-96 object-cover" />
        </div>
        {{end}}
        <div class="p-6 sm:p-10">
          <h1 class="text-2xl sm:text-3xl font-bold text-creative-900">{{.Content.Title}}</h1>
          <p class="mt-3 text-creative-600 text-lg">{{.Content.Description}}</p>

          {{if .Content.Ext}}
          <div class="mt-6 flex flex-wrap gap-3">
            {{$client := index .Content.Ext "client"}}
            {{if $client}}
            <span class="inline-flex items-center gap-1 px-4 py-2 rounded-full bg-creative-50 text-creative-700 text-sm">
              <i class="fa-solid fa-building"></i>
              {{$client}}
            </span>
            {{end}}
            {{$category := index .Content.Ext "category"}}
            {{if $category}}
            <span class="inline-flex items-center gap-1 px-4 py-2 rounded-full bg-navy-50 text-navy-700 text-sm">
              <i class="fa-solid fa-tag"></i>
              {{$category}}
            </span>
            {{end}}
            {{$industry := index .Content.Ext "industry"}}
            {{if $industry}}
            <span class="inline-flex items-center gap-1 px-4 py-2 rounded-full bg-coral-50 text-coral-700 text-sm">
              <i class="fa-solid fa-industry"></i>
              {{$industry}}
            </span>
            {{end}}
            {{$year := index .Content.Ext "year"}}
            {{if $year}}
            <span class="inline-flex items-center gap-1 px-4 py-2 rounded-full bg-gray-50 text-gray-600 text-sm">
              <i class="fa-regular fa-calendar"></i>
              {{$year}}
            </span>
            {{end}}
          </div>
          {{end}}

          {{if .Content.Albums}}
          <div class="mt-8">
            <div class="text-sm font-semibold text-creative-900 mb-4">项目展示</div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {{range $i, $img := .Content.Albums}}
              <div class="rounded-xl overflow-hidden border border-creative-100">
                <img src="{{$img}}" alt="项目展示" class="w-full h-48 object-cover hover:scale-105 transition-transform duration-300" />
              </div>
              {{end}}
            </div>
          </div>
          {{end}}

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

          {{if .Content.Tags}}
          <div class="mt-10 pt-8 border-t border-creative-100">
            <div class="text-sm font-semibold text-creative-900 mb-3">标签</div>
            <div class="flex flex-wrap gap-2">
              {{range .Content.Tags}}
              <a href="{{.URL}}" class="px-4 py-2 rounded-full text-sm bg-creative-50 text-creative-700 hover:bg-creative-100 transition-colors">#{{.Name}}</a>
              {{end}}
            </div>
          </div>
          {{end}}

          <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>

      {{if or .Prev .Next}}
      <section class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-white rounded-2xl border border-creative-100 p-5">
          {{if .Prev}}
          <div class="text-xs text-creative-500">上一个案例</div>
          <a href="{{.Prev.URL}}" class="mt-2 flex items-center gap-3">
            {{if .Prev.Img}}
            <img src="{{.Prev.Img}}" alt="{{.Prev.Title}}" class="w-16 h-16 rounded-lg object-cover" />
            {{end}}
            <div class="text-sm font-medium text-creative-900 hover:text-creative-600 line-clamp-2">{{.Prev.Title}}</div>
          </a>
          {{else}}
          <div class="text-xs text-creative-500">上一个案例</div>
          <div class="mt-2 text-sm text-creative-400">暂无</div>
          {{end}}
        </div>
        <div class="bg-white rounded-2xl border border-creative-100 p-5">
          {{if .Next}}
          <div class="text-xs text-creative-500">下一个案例</div>
          <a href="{{.Next.URL}}" class="mt-2 flex items-center gap-3">
            {{if .Next.Img}}
            <img src="{{.Next.Img}}" alt="{{.Next.Title}}" class="w-16 h-16 rounded-lg object-cover" />
            {{end}}
            <div class="text-sm font-medium text-creative-900 hover:text-creative-600 line-clamp-2">{{.Next.Title}}</div>
          </a>
          {{else}}
          <div class="text-xs text-creative-500">下一个案例</div>
          <div class="mt-2 text-sm text-creative-400">暂无</div>
          {{end}}
        </div>
      </section>
      {{end}}

      {{$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">
              <div class="relative overflow-hidden">
                {{if .Img}}
                <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300" />
                {{end}}
              </div>
              <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>
