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

{{$slides := HomeSlides}}
{{if $slides}}
<section class="relative overflow-hidden">
  <div class="relative h-[58vh] min-h-[420px]">
    {{range $i, $slide := $slides}}
    <div class="absolute inset-0 {{if eq $i 0}}opacity-100{{else}}opacity-0{{end}} transition-opacity duration-700">
      <img src="{{.Img}}" alt="{{.Title}}" class="h-full w-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent"></div>
      <div class="absolute inset-0 flex items-end">
        <div class="mx-auto w-full max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
          <div class="max-w-2xl text-white">
            <h1 class="text-4xl font-bold md:text-6xl">{{.Title}}</h1>
            {{if .SubTitle}}<p class="mt-5 text-lg leading-relaxed text-white/90 md:text-2xl">{{.SubTitle}}</p>{{end}}
          </div>
        </div>
      </div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{if index .ThemesExt "brand_stats"}}
{{$cards := index .ThemesExt "brand_stats"}}
<section class="border-b border-red-100 bg-white py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
      {{range $cards}}
      {{$bg := index . "bg"}}
      <div class="rounded-xl p-5 text-white {{if $bg}}{{$bg}}{{else}}bg-primary{{end}}">
        <div class="text-3xl font-bold">{{index . "value"}}</div>
        <div class="mt-1 text-sm opacity-90">{{index . "label"}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="py-16">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="grid gap-10 lg:grid-cols-2">
      <div>
        <p class="text-sm font-semibold uppercase tracking-wide text-primary">品牌主张</p>
        <h2 class="mt-3 text-3xl font-bold text-stone-900">把新鲜和稳定做成看得见的标准</h2>
        <p class="mt-4 max-w-xl text-base leading-8 text-stone-600">
          微微猪肉围绕家庭、餐饮和社区零售三类消费场景，提供鲜切、分级、冷链和门店服务，让采购更简单，出品更稳定。
        </p>
        <div class="mt-8 grid gap-4 sm:grid-cols-3">
          {{range index .ThemesExt "quality_points"}}
          <div class="rounded-xl border border-red-100 bg-stone-50 p-4">
            <h3 class="text-base font-semibold text-stone-900">{{index . "title"}}</h3>
            <p class="mt-2 text-sm leading-6 text-stone-600">{{index . "content"}}</p>
          </div>
          {{end}}
        </div>
      </div>
      <div class="rounded-2xl border border-red-100 bg-white p-6 shadow-sm">
        <h3 class="text-xl font-bold text-stone-900">门店与供应优势</h3>
        <div class="mt-6 space-y-4">
          <div class="flex items-start gap-4 rounded-xl bg-red-50 p-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white">1</div>
            <div>
              <div class="font-semibold text-stone-900">分级供应</div>
              <div class="mt-1 text-sm text-stone-600">家庭装、餐饮装、团购装按场景分开管理。</div>
            </div>
          </div>
          <div class="flex items-start gap-4 rounded-xl bg-amber-50 p-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-accent text-white">2</div>
            <div>
              <div class="font-semibold text-stone-900">冷链配送</div>
              <div class="mt-1 text-sm text-stone-600">从仓储到门店全程低温，保证鲜度稳定。</div>
            </div>
          </div>
          <div class="flex items-start gap-4 rounded-xl bg-emerald-50 p-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-600 text-white">3</div>
            <div>
              <div class="font-semibold text-stone-900">门店现配</div>
              <div class="mt-1 text-sm text-stone-600">支持现切、预切、称重和批量预订。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{$products := ColumnContents "products" 4}}
{{if $products}}
<section class="bg-white py-16">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mb-10 flex items-end justify-between gap-4">
      <div>
        <p class="text-sm font-semibold uppercase tracking-wide text-primary">产品推荐</p>
        <h2 class="mt-2 text-3xl font-bold text-stone-900">适合家庭和餐饮采购的猪肉产品</h2>
      </div>
      <a href="/products" class="text-sm font-medium text-primary hover:underline">查看全部</a>
    </div>
    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
      {{range $products}}
      <div class="overflow-hidden rounded-2xl border border-stone-200 bg-stone-50">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-52 w-full object-cover">{{end}}
        <div class="p-5">
          {{if .Ext}}
          {{$badge := index .Ext "badge"}}
          {{if $badge}}<span class="inline-flex rounded-full bg-primary px-3 py-1 text-xs font-semibold text-white">{{$badge}}</span>{{end}}
          {{end}}
          <h3 class="mt-3 text-lg font-semibold text-stone-900">
            <a href="{{.URL}}" class="hover:text-primary">{{.Title}}</a>
          </h3>
          <p class="mt-2 text-sm leading-6 text-stone-600">{{StrSub .Description 80}}</p>
          {{if .Price}}
          <div class="mt-4 text-2xl font-bold text-primary">¥{{printf "%.2f" .Price}}</div>
          {{end}}
          <a href="{{.URL}}" class="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline">查看详情</a>
        </div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{$news := ColumnContents "news" 3}}
{{if $news}}
<section class="py-16">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mb-10 flex items-end justify-between gap-4">
      <div>
        <p class="text-sm font-semibold uppercase tracking-wide text-primary">品牌动态</p>
        <h2 class="mt-2 text-3xl font-bold text-stone-900">看得见的供应升级和门店变化</h2>
      </div>
      <a href="/news" class="text-sm font-medium text-primary hover:underline">更多动态</a>
    </div>
    <div class="grid gap-6 lg:grid-cols-3">
      {{range $news}}
      <article class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-48 w-full object-cover">{{end}}
        <div class="p-5">
          <h3 class="text-lg font-semibold text-stone-900">
            <a href="{{.URL}}" class="hover:text-primary">{{.Title}}</a>
          </h3>
          <p class="mt-2 text-sm leading-6 text-stone-600">{{StrSub .Description 90}}</p>
          <div class="mt-4 flex items-center justify-between text-sm text-stone-500">
            <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
            <a href="{{.URL}}" class="text-primary hover:underline">阅读更多</a>
          </div>
        </div>
      </article>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{if index .ThemesExt "partners"}}
{{$partners := index .ThemesExt "partners"}}
{{if $partners}}
<section class="bg-white py-16">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-3xl font-bold text-stone-900">合作伙伴</h2>
    <div class="mt-10 grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-6">
      {{range $partners}}
      <div class="flex items-center justify-center rounded-xl border border-stone-200 bg-stone-50 p-4">
        <img src="{{index . "logo"}}" alt="{{index . "name"}}" class="h-10 object-contain">
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}
{{end}}

{{if $slides}}
<script src="{{asset "js/index.js"}}"></script>
{{end}}
{{include "footer.html"}}
{{include "js.html"}}