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

{{/* 1. Hero / 轮播 */}}
{{$slides := HomeSlides}}
{{if $slides}}
<section class="relative bg-sand">
  <div class="max-w-[1440px] mx-auto">
    {{range $i, $s := $slides}}
    <div class="hero-slide relative {{if ne $i 0}}hidden{{end}}" data-index="{{$i}}">
      <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[640px]">
        <div class="lg:col-span-5 flex flex-col justify-center px-6 lg:px-14 py-14 order-2 lg:order-1">
          <div class="text-xs tracking-wider2 text-gray-500 mb-4">{{index $.ThemesExt "hero_eyebrow"}}</div>
          <h1 class="font-serif text-4xl md:text-5xl lg:text-6xl leading-tight text-ink mb-6">{{.Title}}</h1>
          <p class="text-base lg:text-lg text-gray-600 max-w-md leading-relaxed mb-8">{{.SubTitle}}</p>
          <div class="flex flex-wrap gap-3">
            <a href="{{.URL}}" class="px-7 py-3 bg-ink text-mist text-sm tracking-wide hover:bg-primary transition">了解详情 →</a>
            <a href="/inquiry" class="px-7 py-3 border border-ink text-ink text-sm tracking-wide hover:bg-ink hover:text-mist transition">提交询盘</a>
          </div>
        </div>
        <div class="lg:col-span-7 relative order-1 lg:order-2">
          <div class="aspect-[9/16] lg:aspect-auto lg:h-[640px] overflow-hidden">
            <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover">
          </div>
        </div>
      </div>
    </div>
    {{end}}
  </div>

  {{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 class="hero-dot w-8 h-0.5 {{if eq $i 0}}bg-ink{{else}}bg-ink/30{{end}}" data-index="{{$i}}" aria-label="slide-{{$i}}"></button>
    {{end}}
  </div>
  {{end}}
</section>
{{end}}

{{/* 2. 数据卡 */}}
{{$stats := index .ThemesExt "stats_cards"}}
{{if $stats}}
<section class="border-t border-sand bg-mist">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10 py-12 grid grid-cols-2 lg:grid-cols-4 divide-x divide-sand">
    {{range $stats}}
    <div class="text-center px-4">
      <div class="font-serif text-3xl lg:text-4xl text-ink">{{.value}}</div>
      <div class="text-xs tracking-wider2 text-gray-500 mt-2">{{.label}}</div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{/* 3. 关于栎雅 (左右) */}}
{{$about := Column "about"}}
{{if $about}}
<section class="py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
    <div class="lg:col-span-4">
      <div class="aspect-[3/4] lg:aspect-auto lg:h-[440px] overflow-hidden bg-sand">
        <img src="{{index $about.Ext "banner_img"}}" alt="{{$about.Name}}" class="w-full h-full object-cover">
      </div>
    </div>
    <div class="lg:col-span-8">
      <div class="text-xs tracking-wider2 text-gray-500 mb-4">01 · ABOUT LIYA</div>
      <h2 class="font-serif text-3xl md:text-4xl text-ink leading-tight mb-6">{{$about.Name}} · 一家版师驱动的成衣工厂</h2>
      <p class="text-gray-600 leading-relaxed mb-4">{{$about.Description}}</p>
      <p class="text-gray-600 leading-relaxed mb-8">我们坚信工艺、版型与面料的三角才是品牌长期主义的护城河。每件出厂成衣,经过版师、工艺师、车间主任三方会签,以及水洗、整烫、悬挂、QC 四道整理工序。</p>
      <div class="grid grid-cols-2 gap-x-8 gap-y-4 mb-8 max-w-md">
        <div><div class="text-xs text-gray-400">创立年份</div><div class="font-serif text-lg text-ink">{{index $about.Ext "established"}}</div></div>
        <div><div class="text-xs text-gray-400">工厂面积</div><div class="font-serif text-lg text-ink">{{index $about.Ext "factory_area"}}</div></div>
        <div><div class="text-xs text-gray-400">日产能</div><div class="font-serif text-lg text-ink">{{index $about.Ext "daily_output"}}</div></div>
        <div><div class="text-xs text-gray-400">最小起订</div><div class="font-serif text-lg text-ink">{{index $about.Ext "min_order"}}</div></div>
      </div>
      <a href="{{$about.URL}}" class="inline-flex items-center gap-2 text-sm tracking-wide text-ink border-b border-ink pb-1 hover:text-accent hover:border-accent">阅读完整介绍 →</a>
    </div>
  </div>
</section>
{{end}}

{{/* 4. 产品中心 - 9:16 grid */}}
{{$products := ColumnContents "products" 8}}
{{if $products}}
<section class="bg-sand py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
      <div>
        <div class="text-xs tracking-wider2 text-gray-500 mb-3">02 · CURRENT EDIT</div>
        <h2 class="font-serif text-3xl md:text-4xl text-ink">产品中心 — 当季款式</h2>
      </div>
      <a href="/products" class="text-sm tracking-wide text-ink border-b border-ink pb-1 hover:text-accent hover:border-accent self-start md:self-auto">查看全部产品 →</a>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 lg:gap-7">
      {{range $products}}
      <a href="{{.URL}}" class="group block">
        <div class="aspect-[9/16] overflow-hidden bg-mist mb-3">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.03] transition duration-500">{{end}}
        </div>
        <div class="px-1">
          {{$badge := index .Ext "badge"}}
          {{if $badge}}<div class="text-[10px] tracking-wider2 text-accent mb-1">{{$badge}}</div>{{end}}
          <h3 class="font-serif text-base text-ink leading-snug group-hover:text-primary">{{.Title}}</h3>
          {{$code := index .Ext "code"}}
          {{if $code}}<div class="text-[11px] text-gray-400 mt-1 tracking-wide">{{$code}}</div>{{end}}
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 5. 设计系列 - 大图横向滚动感 */}}
{{$collections := ColumnContents "collections" 4}}
{{if $collections}}
<section class="py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
      <div>
        <div class="text-xs tracking-wider2 text-gray-500 mb-3">03 · COLLECTIONS</div>
        <h2 class="font-serif text-3xl md:text-4xl text-ink">设计系列 · 整盘订货</h2>
      </div>
      <a href="/collections" class="text-sm tracking-wide text-ink border-b border-ink pb-1 hover:text-accent hover:border-accent self-start md:self-auto">查看全部系列 →</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-10">
      {{range $collections}}
      <a href="{{.URL}}" class="group block">
        <div class="aspect-[9/16] md:aspect-[3/4] overflow-hidden bg-sand mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.02] transition duration-700">{{end}}
        </div>
        <div class="flex items-baseline gap-3 mb-2">
          {{$season := index .Ext "season"}}
          {{if $season}}<span class="text-xs tracking-wider2 text-accent">{{$season}}</span>{{end}}
          {{$pieces := index .Ext "pieces"}}
          {{if $pieces}}<span class="text-xs text-gray-400">· {{$pieces}}</span>{{end}}
        </div>
        <h3 class="font-serif text-xl md:text-2xl text-ink leading-snug group-hover:text-primary">{{.Title}}</h3>
        <p class="text-sm text-gray-500 mt-2 leading-relaxed">{{StrSub .Description 60}}</p>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 6. 六大优势 */}}
{{$advs := index .ThemesExt "advantages"}}
{{if $advs}}
<section class="bg-ink text-mist py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-400 mb-3">04 · WHY LIYA</div>
    <h2 class="font-serif text-3xl md:text-4xl mb-12 max-w-2xl">为什么 60+ 独立设计师品牌选择栎雅</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-10">
      {{range $i, $a := $advs}}
      <div class="border-t border-gray-700 pt-6">
        <div class="text-xs tracking-wider2 text-accent mb-3">0{{Add $i 1}}</div>
        <h3 class="font-serif text-xl mb-3">{{$a.title}}</h3>
        <p class="text-sm text-gray-300 leading-relaxed">{{$a.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 7. 21 天交付流程 */}}
{{$steps := index .ThemesExt "process_steps"}}
{{if $steps}}
<section class="py-20 lg:py-24 bg-mist">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">05 · 21 DAYS</div>
    <h2 class="font-serif text-3xl md:text-4xl text-ink mb-12 max-w-2xl">21 天,一件衣服从图纸到出货</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-sand border border-sand">
      {{range $steps}}
      <div class="bg-mist p-7">
        <div class="font-serif text-3xl text-accent mb-3">{{.step}}</div>
        <h3 class="text-lg text-ink mb-2 tracking-wide">{{.title}}</h3>
        <p class="text-sm text-gray-500 leading-relaxed">{{.desc}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 8. 客户评价 */}}
{{$testi := index .ThemesExt "testimonials"}}
{{if $testi}}
<section class="bg-sand py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">06 · CLIENT VOICES</div>
    <h2 class="font-serif text-3xl md:text-4xl text-ink mb-12 max-w-2xl">来自合作品牌主理人的反馈</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {{range $testi}}
      <figure class="bg-mist p-8 border border-sand">
        <blockquote class="font-serif text-lg text-ink leading-relaxed mb-6">「{{.quote}}」</blockquote>
        <figcaption class="flex items-center gap-3 border-t border-sand pt-4">
          <img src="{{.avatar}}" alt="{{.name}}" class="w-11 h-11 rounded-full object-cover">
          <div>
            <div class="text-sm text-ink">{{.name}}</div>
            <div class="text-xs text-gray-500 mt-0.5">{{.title}}</div>
          </div>
        </figcaption>
      </figure>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 9. 最新资讯 */}}
{{$news := ColumnContents "news" 3}}
{{if $news}}
<section class="py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
      <div>
        <div class="text-xs tracking-wider2 text-gray-500 mb-3">07 · JOURNAL</div>
        <h2 class="font-serif text-3xl md:text-4xl text-ink">行业资讯 · 工艺解读</h2>
      </div>
      <a href="/news" class="text-sm tracking-wide text-ink border-b border-ink pb-1 hover:text-accent hover:border-accent self-start md:self-auto">查看全部 →</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {{range $news}}
      <a href="{{.URL}}" class="group block">
        <div class="aspect-[3/2] overflow-hidden bg-sand mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.03] transition duration-500">{{end}}
        </div>
        <div class="text-xs text-gray-400 mb-2">{{ParseTime .CreatedAt "2006.01.02"}}{{if .Author}} · {{.Author}}{{end}}</div>
        <h3 class="font-serif text-lg text-ink leading-snug group-hover:text-primary mb-2">{{.Title}}</h3>
        <p class="text-sm text-gray-500 leading-relaxed">{{StrSub .Description 70}}</p>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 10. 合作伙伴 */}}
{{$partners := index .ThemesExt "partners"}}
{{if $partners}}
<section class="border-t border-sand py-14 bg-mist">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
    <div class="text-xs tracking-wider2 text-gray-500 text-center mb-8">合作品牌 · PARTNERS</div>
    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-x-6 gap-y-4 items-center">
      {{range $partners}}
      <div class="text-center text-xs tracking-wider2 text-gray-500 hover:text-ink py-3 px-2 border border-sand bg-mist">{{.name}}</div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{/* 11. 最终询盘 CTA */}}
<section class="bg-ink text-mist py-20 lg:py-24">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
    <div class="lg:col-span-7">
      <div class="text-xs tracking-wider2 text-accent mb-3">08 · GET IN TOUCH</div>
      <h2 class="font-serif text-3xl md:text-5xl leading-tight mb-6">一份询盘,<br>开启一次成衣合作。</h2>
      <p class="text-gray-300 leading-relaxed max-w-xl">留下品牌名、款式偏好、目标交期与起订量,我们将在 1 个工作日内安排资深销售顾问与你接洽,提供版型样卡、面料样本与初步报价。</p>
    </div>
    <div class="lg:col-span-5 flex lg:justify-end gap-4 flex-wrap">
      <a href="/inquiry" class="px-8 py-4 bg-accent text-ink text-sm tracking-wider2 hover:bg-mist transition">提交询盘表 →</a>
      <a href="/contact" class="px-8 py-4 border border-mist text-mist text-sm tracking-wider2 hover:bg-mist hover:text-ink transition">直接联系我们</a>
    </div>
  </div>
</section>

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