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

{{$slides := HomeSlides}}
<section class="relative overflow-hidden">
  <div class="relative h-[66vh] min-h-[460px]">
    {{if $slides}}
    {{range $i, $slide := $slides}}
    <div class="hero-slide 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/75 via-black/45 to-black/15"></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-3xl 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}}
    {{else}}
    <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1600&q=80')] bg-cover bg-center">
      <div class="absolute inset-0 bg-black/65"></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-3xl text-white">
            <h1 class="text-4xl font-bold md:text-6xl">{{index .ThemesExt "hero_title"}}</h1>
            <p class="mt-5 text-lg leading-relaxed text-white/90 md:text-2xl">{{index .ThemesExt "hero_subtitle"}}</p>
          </div>
        </div>
      </div>
    </div>
    {{end}}
  </div>
  {{if gt (len $slides) 1}}
  <div class="absolute bottom-8 left-1/2 flex -translate-x-1/2 gap-3">
    {{range $i, $slide := $slides}}
    <button class="hero-dot h-3 w-3 rounded-full bg-white/50 transition-colors {{if eq $i 0}}bg-white{{end}}" data-slide="{{$i}}" aria-label="切换幻灯片"></button>
    {{end}}
  </div>
  {{end}}
</section>

{{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 "fitness_values"}}
          <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-secondary 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>

{{$classes := ColumnContents "classes" 4}}
{{if $classes}}
<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="/classes" 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 $classes}}
      <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}}

<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-2 text-3xl font-bold text-stone-900">稳定排课，方便长期坚持</h2>
        <div class="mt-8 space-y-4">
          {{range index .ThemesExt "schedule_cards"}}
          <div class="rounded-xl border border-red-100 bg-white p-5 shadow-sm">
            <div class="text-sm font-semibold text-primary">{{index . "day"}}</div>
            <div class="mt-2 text-sm leading-6 text-stone-600">{{index . "items"}}</div>
          </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">
          {{range index .ThemesExt "class_highlights"}}
          <div class="rounded-xl bg-stone-50 p-4">
            <div class="font-semibold text-stone-900">{{index . "title"}}</div>
            <p class="mt-1 text-sm leading-6 text-stone-600">{{index . "content"}}</p>
          </div>
          {{end}}
        </div>
      </div>
    </div>
  </div>
</section>

{{$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 gt (len $slides) 1}}
<script src="{{asset "js/index.js"}}"></script>
{{end}}

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