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

{{/* ===== 1. Hero 轮播 16:9 ===== */}}
{{$slides := HomeSlides}}
{{if $slides}}
<section class="relative bg-paper">
  <div id="heroSlider" class="relative aspect-[16/9] overflow-hidden">
    {{range $i, $s := $slides}}
    <div class="hero-slide absolute inset-0 transition-opacity duration-700 {{if eq $i 0}}opacity-100{{else}}opacity-0{{end}}" data-index="{{$i}}">
      <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-black/55 via-black/20 to-transparent"></div>
      <div class="absolute inset-0 flex items-center">
        <div class="max-w-7xl w-full mx-auto px-6 lg:px-10 text-white">
          <div class="max-w-xl">
            <span class="inline-block text-xs tracking-[0.4em] uppercase mb-4 text-accent">{{index $.ThemesExt "hero_eyebrow"}}</span>
            <h2 class="text-3xl md:text-5xl lg:text-6xl font-serif font-semibold mb-5 leading-tight">{{.Title}}</h2>
            <p class="text-base md:text-lg mb-7 opacity-90 leading-relaxed">{{.SubTitle}}</p>
            <a href="{{.URL}}" class="inline-flex items-center gap-2 px-7 py-3 bg-accent text-white text-sm tracking-wider hover:opacity-90 transition">
              {{index $.ThemesExt "hero_cta"}}
              <span class="ml-1">→</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    {{end}}

    {{if gt (len $slides) 1}}
    <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-10">
      {{range $i, $s := $slides}}
      <button data-target="{{$i}}" class="hero-dot w-8 h-0.5 transition {{if eq $i 0}}bg-white{{else}}bg-white/40{{end}}"></button>
      {{end}}
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{/* ===== 2. 数据信任卡 ===== */}}
{{$stats := index .ThemesExt "stats_cards"}}
{{if $stats}}
<section class="py-16 bg-paper border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      {{range $stats}}
      <div class="text-center">
        <div class="text-3xl md:text-4xl font-serif font-semibold text-ink mb-1">{{.value}}</div>
        <div class="text-xs tracking-widest text-muted uppercase">{{.label}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 3. 鞋履系列 ===== */}}
{{$shoes := ColumnContents "shoes" 6}}
{{$shoesCol := Column "shoes"}}
{{if $shoes}}
<section class="py-20 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-4">
      <div>
        <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">COLLECTION · 01</span>
        <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">鞋履系列</h2>
        <p class="text-sm text-muted mt-2 max-w-md">{{if $shoesCol}}{{$shoesCol.Description}}{{end}}</p>
      </div>
      {{if $shoesCol}}<a href="{{$shoesCol.URL}}" class="text-sm tracking-wider text-primary hover:text-accent self-start md:self-end whitespace-nowrap">查看全部 →</a>{{end}}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-10">
      {{range $shoes}}
      <a href="{{.URL}}" class="group block">
        <div class="relative aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">{{end}}
          {{$badge := index .Ext "badge"}}
          {{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-white/95 text-xs tracking-wider text-ink">{{$badge}}</span>{{end}}
        </div>
        <div class="flex items-start justify-between gap-3">
          <div>
            <h3 class="text-base font-medium text-ink group-hover:text-primary transition">{{.Title}}</h3>
            <p class="text-xs text-muted mt-1 line-clamp-1">{{StrSub .Description 40}}</p>
          </div>
          {{if .Price}}<div class="text-sm font-medium text-ink whitespace-nowrap">¥{{.Price}}</div>{{end}}
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 4. 品牌故事 + 工艺 ===== */}}
{{$about := Column "about"}}
{{$story := index .ThemesExt "story_blocks"}}
<section class="py-24 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
    <div class="lg:col-span-5">
      <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-3">OUR STORY</span>
      <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink leading-tight mb-5">用十年时间<br>把一双鞋一只包做到极致</h2>
      <p class="text-sm md:text-base text-ink/70 leading-relaxed mb-6">{{if $about}}{{$about.Description}}{{end}}</p>
      <p class="text-sm text-muted leading-relaxed mb-8">原料追溯 · 手工缝制 · 终身养护 — 我们相信,鞋与包不是消耗品,是与你一起走过年月的伙伴。</p>
      <div class="flex flex-wrap gap-3">
        {{if $about}}<a href="{{$about.URL}}" class="inline-block px-6 py-2.5 bg-ink text-white text-sm tracking-wider hover:bg-primary transition">了解品牌</a>{{end}}
        {{$craft := Column "craft"}}
        {{if $craft}}<a href="{{$craft.URL}}" class="inline-block px-6 py-2.5 border border-ink text-ink text-sm tracking-wider hover:bg-ink hover:text-white transition">查看工艺</a>{{end}}
      </div>
    </div>
    {{if $story}}
    <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-4">
      {{range $i, $b := $story}}
      <div class="group {{if eq $i 0}}sm:row-span-2 sm:col-span-2{{end}}">
        <div class="relative {{if eq $i 0}}aspect-[16/9] sm:aspect-auto sm:h-full{{else}}aspect-[16/9]{{end}} overflow-hidden bg-stone-100 mb-3">
          <img src="{{.img}}" alt="{{.title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="font-serif text-lg mb-1">{{.title}}</h3>
            <p class="text-xs opacity-85 leading-snug">{{.desc}}</p>
          </div>
        </div>
      </div>
      {{end}}
    </div>
    {{end}}
  </div>
</section>

{{/* ===== 5. 箱包系列 ===== */}}
{{$bags := ColumnContents "bags" 6}}
{{$bagsCol := Column "bags"}}
{{if $bags}}
<section class="py-20 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-4">
      <div>
        <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">COLLECTION · 02</span>
        <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">箱包系列</h2>
        <p class="text-sm text-muted mt-2 max-w-md">{{if $bagsCol}}{{$bagsCol.Description}}{{end}}</p>
      </div>
      {{if $bagsCol}}<a href="{{$bagsCol.URL}}" class="text-sm tracking-wider text-primary hover:text-accent self-start md:self-end whitespace-nowrap">查看全部 →</a>{{end}}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-10">
      {{range $bags}}
      <a href="{{.URL}}" class="group block">
        <div class="relative aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">{{end}}
          {{$badge := index .Ext "badge"}}
          {{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-white/95 text-xs tracking-wider text-ink">{{$badge}}</span>{{end}}
        </div>
        <div class="flex items-start justify-between gap-3">
          <div>
            <h3 class="text-base font-medium text-ink group-hover:text-primary transition">{{.Title}}</h3>
            <p class="text-xs text-muted mt-1 line-clamp-1">{{StrSub .Description 40}}</p>
          </div>
          {{if .Price}}<div class="text-sm font-medium text-ink whitespace-nowrap">¥{{.Price}}</div>{{end}}
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 6. 核心优势 ===== */}}
{{$advantages := index .ThemesExt "advantages"}}
{{if $advantages}}
<section class="py-20 bg-stone-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="text-center mb-12">
      <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">WHY TOORUNN</span>
      <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">为什么选择途然</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {{range $advantages}}
      <div class="bg-white p-7 border-t-2 border-accent">
        <h3 class="text-lg font-serif font-semibold text-ink mb-3">{{.title}}</h3>
        <p class="text-sm text-ink/70 leading-relaxed">{{.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 7. 推荐爆款 ===== */}}
{{$recom := Recom}}
{{if $recom}}
<section class="py-20 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-4">
      <div>
        <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">BESTSELLERS</span>
        <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">明星推荐</h2>
        <p class="text-sm text-muted mt-2">用户穿了三年以上、口碑沉淀下来的款。</p>
      </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-10">
      {{range $recom}}
      <a href="{{.URL}}" class="group block">
        <div class="relative aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">{{end}}
        </div>
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="text-xs text-muted mb-1">{{.ColumnName}}</div>
            <h3 class="text-base font-medium text-ink group-hover:text-primary transition">{{.Title}}</h3>
          </div>
          {{if .Price}}<div class="text-sm font-medium text-ink whitespace-nowrap">¥{{.Price}}</div>{{end}}
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 8. 用户口碑 ===== */}}
{{$testimonials := index .ThemesExt "testimonials"}}
{{if $testimonials}}
<section class="py-20 bg-ink text-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="text-center mb-12">
      <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">VOICES</span>
      <h2 class="text-3xl md:text-4xl font-serif font-semibold">用户的话</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {{range $testimonials}}
      <figure class="bg-white/5 p-7 border-l-2 border-accent">
        <blockquote class="text-sm md:text-base leading-relaxed text-stone-200 mb-5">"{{.quote}}"</blockquote>
        <figcaption class="flex items-center gap-3 pt-4 border-t border-white/10">
          {{if .avatar}}<img src="{{.avatar}}" alt="{{.name}}" class="w-10 h-10 rounded-full object-cover">{{end}}
          <div>
            <div class="text-sm font-medium">{{.name}}</div>
            <div class="text-xs text-stone-400">{{.title}}</div>
          </div>
        </figcaption>
      </figure>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 9. 资讯动态 ===== */}}
{{$news := ColumnContents "news" 3}}
{{$newsCol := Column "news"}}
{{if $news}}
<section class="py-20 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-4">
      <div>
        <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-2">JOURNAL</span>
        <h2 class="text-3xl md:text-4xl font-serif font-semibold text-ink">资讯动态</h2>
      </div>
      {{if $newsCol}}<a href="{{$newsCol.URL}}" class="text-sm tracking-wider text-primary hover:text-accent self-start md:self-end whitespace-nowrap">查看全部 →</a>{{end}}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-10">
      {{range $news}}
      <a href="{{.URL}}" class="group block">
        <div class="relative aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">{{end}}
        </div>
        <div>
          <div class="text-xs text-muted mb-2 tracking-wider">{{ParseTime .CreatedAt "2006-01-02"}} · {{.ColumnName}}</div>
          <h3 class="text-lg font-serif font-medium text-ink group-hover:text-primary leading-snug mb-2">{{.Title}}</h3>
          <p class="text-sm text-ink/60 line-clamp-2 leading-relaxed">{{StrSub .Description 80}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 10. 合作伙伴 ===== */}}
{{$partners := index .ThemesExt "partners"}}
{{if $partners}}
<section class="py-14 bg-stone-50 border-t border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="text-center text-xs tracking-[0.4em] uppercase text-muted mb-8">SUPPLIER PARTNERS</div>
    <div class="grid grid-cols-3 md:grid-cols-6 gap-6 items-center">
      {{range $partners}}
      <div class="flex flex-col items-center gap-2 grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition">
        <img src="{{.logo}}" alt="{{.name}}" class="h-10 w-auto object-contain">
        <span class="text-xs text-muted">{{.name}}</span>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* ===== 11. CTA 询价 ===== */}}
<section class="relative py-24">
  <div class="absolute inset-0">
    <img src="https://images.unsplash.com/photo-1601057835100-c3791de58a2c?auto=format&fit=crop&w=1600&h=900&q=80" alt="" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-ink/80"></div>
  </div>
  <div class="relative max-w-3xl mx-auto px-4 text-center text-white">
    <span class="block text-xs tracking-[0.4em] uppercase text-accent mb-3">GET IN TOUCH</span>
    <h2 class="text-3xl md:text-4xl font-serif font-semibold mb-4">让一双鞋、一只包,陪你走更远</h2>
    <p class="text-sm md:text-base text-stone-200 opacity-90 mb-8 max-w-xl mx-auto leading-relaxed">尺码咨询 · 企业团购 · 礼盒定制 · 售后养护,留下需求,1 个工作日内回复你。</p>
    <div class="flex flex-wrap justify-center gap-3">
      <a href="/message" class="inline-block px-8 py-3 bg-accent text-white text-sm tracking-wider hover:opacity-90 transition">在线咨询</a>
      <a href="/contact" class="inline-block px-8 py-3 border border-white text-white text-sm tracking-wider hover:bg-white hover:text-ink transition">联系我们</a>
    </div>
  </div>
</section>

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