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

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <article class="lg:col-span-2">
      <div class="rounded-2xl border border-ink-200 bg-white overflow-hidden shadow-soft">
        <div class="aspect-[16/9] bg-ink-100">
          <img class="w-full h-full object-cover" src="{{default .Content.Img "https://picsum.photos/seed/shop-detail/1600/900"}}" alt="{{.Content.Title}}" />
        </div>
        <div class="p-8">
          <div class="text-xs uppercase tracking-widest text-teal2-700/80">{{.CurrentColumn.Name}}</div>
          <h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight">{{.Content.Title}}</h1>
          <div class="mt-4 flex flex-wrap gap-4 text-sm text-ink-600">
            <div>上架：{{ParseTime .Content.CreatedAt "2006-01-02"}}</div>
            <div>浏览：{{.Content.Views}}</div>
          </div>

          <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="rounded-2xl border border-ink-200 bg-ink-50 p-4">
              <div class="text-xs text-ink-500">参考价</div>
              <div class="mt-1 text-lg font-semibold">￥{{.Content.Price}}</div>
            </div>
            <div class="rounded-2xl border border-ink-200 bg-ink-50 p-4">
              <div class="text-xs text-ink-500">SKU</div>
              <div class="mt-1 text-sm font-semibold">{{index .Content.Ext "sku"}}</div>
            </div>
            <div class="rounded-2xl border border-ink-200 bg-ink-50 p-4">
              <div class="text-xs text-ink-500">库存</div>
              <div class="mt-1 text-sm font-semibold">{{index .Content.Ext "stock"}}</div>
            </div>
          </div>

          <div class="mt-8 flex flex-wrap gap-3">
            <a href="/service" class="px-6 py-3 rounded-full bg-teal2-600 text-white hover:bg-teal2-700">立即咨询</a>
            <a href="/message" class="px-6 py-3 rounded-full bg-white border border-ink-200 hover:border-teal2-500/30 hover:bg-teal2-50">留言咨询</a>
          </div>

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

      <div class="mt-8">
        <div class="text-sm font-semibold">你可能还喜欢</div>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
          {{range Related .Content.Id 6}}
            <a class="rounded-2xl border border-ink-200 bg-white p-6 shadow-soft hover:border-teal2-500/30" href="{{.URL}}">
              <div class="text-sm font-semibold hover:text-teal2-700">{{.Title}}</div>
              <div class="mt-2 text-xs text-ink-500">{{ParseTime .CreatedAt "2006-01-02"}}{{if .Views}} · {{.Views}} 浏览{{end}}</div>
            </a>
          {{end}}
        </div>
      </div>
    </article>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

{{include "footer.html"}}
{{include "js.html"}}