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

{{if .Single}}
<section class="relative bg-sand">
  <div class="max-w-[1440px] mx-auto grid grid-cols-1 lg:grid-cols-12 min-h-[560px]">
    <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">01 · ABOUT LIYA APPAREL</div>
      <h1 class="font-serif text-4xl md:text-5xl lg:text-6xl text-ink leading-tight mb-6">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-base lg:text-lg text-gray-600 leading-relaxed max-w-md">{{.Single.Description}}</p>{{end}}
    </div>
    <div class="lg:col-span-7 order-1 lg:order-2">
      <div class="aspect-[9/16] lg:aspect-auto lg:h-[560px] overflow-hidden">
        {{$banner := index .Single.Ext "banner_img"}}
        {{if $banner}}<img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover">{{end}}
      </div>
    </div>
  </div>
</section>

<section class="py-20 lg:py-24">
  <div class="max-w-[1080px] mx-auto px-6 lg:px-10 grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-6 mb-16">
    <div class="border-t border-sand pt-4">
      <div class="text-xs tracking-wider2 text-gray-500 mb-2">EST.</div>
      <div class="font-serif text-2xl text-ink">{{index .Single.Ext "established"}}</div>
    </div>
    <div class="border-t border-sand pt-4">
      <div class="text-xs tracking-wider2 text-gray-500 mb-2">工厂面积</div>
      <div class="font-serif text-2xl text-ink">{{index .Single.Ext "factory_area"}}</div>
    </div>
    <div class="border-t border-sand pt-4">
      <div class="text-xs tracking-wider2 text-gray-500 mb-2">日产能</div>
      <div class="font-serif text-2xl text-ink">{{index .Single.Ext "daily_output"}}</div>
    </div>
    <div class="border-t border-sand pt-4">
      <div class="text-xs tracking-wider2 text-gray-500 mb-2">起订</div>
      <div class="font-serif text-2xl text-ink">{{index .Single.Ext "min_order"}}</div>
    </div>
  </div>

  <div class="max-w-[820px] mx-auto px-6 lg:px-10">
    <div class="prose prose-lg max-w-none prose-headings:font-serif prose-headings:text-ink prose-headings:mt-12 prose-headings:mb-4 prose-p:text-gray-700 prose-p:leading-relaxed">
      {{.Single.Content|Str2Html}}
    </div>
  </div>
</section>

{{$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-accent mb-3">02 · WHY US</div>
    <h2 class="font-serif text-3xl md:text-4xl mb-12 max-w-2xl">六大能力,支撑长期合作</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}}

{{$certs := index .ThemesExt "certificates"}}
{{if $certs}}
<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">03 · CERTIFICATES</div>
    <h2 class="font-serif text-3xl md:text-4xl text-ink mb-12">资质与认证</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      {{range $certs}}
      <div class="text-center">
        <div class="aspect-[3/4] overflow-hidden bg-sand mb-3 border border-sand">
          <img src="{{.img}}" alt="{{.name}}" class="w-full h-full object-cover">
        </div>
        <div class="text-xs text-gray-500 tracking-wide">{{.name}}</div>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="bg-sand py-20 lg:py-24">
  <div class="max-w-[920px] mx-auto px-6 lg:px-10 text-center">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">CONTACT US</div>
    <h2 class="font-serif text-3xl md:text-4xl text-ink mb-6">想看更多版型与面料样卡?</h2>
    <p class="text-gray-600 leading-relaxed mb-8 max-w-xl mx-auto">我们准备了完整的当季样卡 (面料 + 版型 + 工艺) 给到合作品牌,可以预约线下看款,或者先提交询盘获取电子样卡。</p>
    <div class="flex gap-3 justify-center flex-wrap">
      <a href="/inquiry" class="px-8 py-3 bg-ink text-mist text-sm tracking-wider2 hover:bg-primary transition">提交询盘 →</a>
      <a href="/contact" class="px-8 py-3 border border-ink text-ink text-sm tracking-wider2 hover:bg-ink hover:text-mist transition">线下看款预约</a>
    </div>
  </div>
</section>
{{end}}

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