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

{{$slides := HomeSlides}}
{{if $slides}}
<section class="hero-slider" id="heroSlider">
  {{range $i, $s := $slides}}
  <article class="hero-slide {{if eq $i 0}}active{{end}}" data-index="{{$i}}">
    <img src="{{.Img}}" alt="{{.Title}}">
    <div class="hero-overlay">
      <div class="wrap hero-copy">
        <p class="eyebrow">{{index $.ThemesExt "hero_eyebrow"}}</p>
        <h1>{{.Title}}</h1>
        <p>{{.SubTitle}}</p>
        <div class="hero-actions">
          <a class="btn primary" href="{{.URL}}">{{index $.ThemesExt "hero_cta"}}</a>
          <a class="btn secondary light" href="/message">提交咨询</a>
        </div>
      </div>
    </div>
  </article>
  {{end}}
  {{if gt (len $slides) 1}}
  <div class="hero-dots">
    {{range $i, $s := $slides}}<button type="button" class="{{if eq $i 0}}active{{end}}" data-target="{{$i}}" aria-label="切换轮播"></button>{{end}}
  </div>
  {{end}}
</section>
{{end}}

{{$stats := index .ThemesExt "stats"}}
{{if $stats}}
<section class="stats-band">
  <div class="wrap stats-grid">
    {{range $stats}}<div><strong>{{.value}}</strong><span>{{.label}}</span></div>{{end}}
  </div>
</section>
{{end}}

{{$promises := index .ThemesExt "promises"}}
{{if $promises}}
<section class="section">
  <div class="wrap section-head">
    <p class="eyebrow">展示边界</p>
    <h2>适合展示，不误导交易</h2>
    <p>所有转化路径都指向咨询，避免访客误以为可以在线结算。</p>
  </div>
  <div class="wrap feature-grid">
    {{range $promises}}<article class="feature-card"><h3>{{.title}}</h3><p>{{.desc}}</p></article>{{end}}
  </div>
</section>
{{end}}

{{$products := ColumnContents "products" 8}}
{{$productsCol := Column "products"}}
{{if $products}}
<section class="section soft">
  <div class="wrap section-head row">
    <div><p class="eyebrow">精选商品</p><h2>清楚展示每一件商品</h2><p>{{if $productsCol}}{{$productsCol.Description}}{{end}}</p></div>
    {{if $productsCol}}<a class="text-link" href="{{$productsCol.URL}}">查看全部商品</a>{{end}}
  </div>
  <div class="wrap product-grid">
    {{range $products}}
    <a class="product-card" href="{{.URL}}">
      <span class="product-image">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
        {{$badge := index .Ext "badge"}}{{if $badge}}<em>{{$badge}}</em>{{end}}
      </span>
      <span class="product-body">
        <span class="product-meta">{{index .Ext "brand"}} · {{index .Ext "category"}}</span>
        <strong>{{.Title}}</strong>
        <span class="desc">{{StrSub .Description 68}}</span>
        <span class="spec-row">{{index .Ext "spec"}}</span>
        <span class="price-row">{{if .Price}}参考价 ¥{{.Price}}{{else}}价格面议{{end}}<b>{{index .Ext "stock_status"}}</b></span>
      </span>
    </a>
    {{end}}
  </div>
</section>
{{end}}

{{$scenes := index .ThemesExt "scenes"}}
{{if $scenes}}
<section class="section">
  <div class="wrap section-head">
    <p class="eyebrow">场景选品</p>
    <h2>从使用场景进入商品</h2>
  </div>
  <div class="wrap scene-grid">
    {{range $scenes}}
    <article class="scene-card">
      <img src="{{.img}}" alt="{{.title}}">
      <div><h3>{{.title}}</h3><p>{{.desc}}</p></div>
    </article>
    {{end}}
  </div>
</section>
{{end}}

{{$categories := ColumnContents "categories" 6}}
{{$catCol := Column "categories"}}
{{if $categories}}
<section class="section soft">
  <div class="wrap section-head row">
    <div><p class="eyebrow">组合推荐</p><h2>按场景组织商品组合</h2><p>{{if $catCol}}{{$catCol.Description}}{{end}}</p></div>
    {{if $catCol}}<a class="text-link" href="{{$catCol.URL}}">浏览场景类目</a>{{end}}
  </div>
  <div class="wrap article-grid three">
    {{range $categories}}
    <a class="article-card" href="{{.URL}}">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
      <span>{{index .Ext "scene"}}</span>
      <strong>{{.Title}}</strong>
      <p>{{.Description}}</p>
    </a>
    {{end}}
  </div>
</section>
{{end}}

{{$recom := Recom}}
{{if $recom}}
<section class="section">
  <div class="wrap section-head">
    <p class="eyebrow">推荐陈列</p>
    <h2>适合首页露出的重点商品</h2>
  </div>
  <div class="wrap product-grid compact">
    {{range $recom}}
    <a class="product-card" href="{{.URL}}">
      <span class="product-image">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
        {{$badge := index .Ext "badge"}}{{if $badge}}<em>{{$badge}}</em>{{end}}
      </span>
      <span class="product-body">
        <span class="product-meta">{{index .Ext "brand"}} · {{index .Ext "category"}}</span>
        <strong>{{.Title}}</strong>
        <span class="desc">{{StrSub .Description 68}}</span>
        <span class="spec-row">{{index .Ext "spec"}}</span>
        <span class="price-row">{{if .Price}}参考价 ¥{{.Price}}{{else}}价格面议{{end}}<b>{{index .Ext "stock_status"}}</b></span>
      </span>
    </a>
    {{end}}
  </div>
</section>
{{end}}

{{$news := ColumnContents "news" 6}}
{{$newsCol := Column "news"}}
{{if $news}}
<section class="section soft">
  <div class="wrap section-head row">
    <div><p class="eyebrow">选购指南</p><h2>让访客先理解，再咨询</h2></div>
    {{if $newsCol}}<a class="text-link" href="{{$newsCol.URL}}">阅读全部</a>{{end}}
  </div>
  <div class="wrap article-grid three">
    {{range $news}}
    <a class="article-card" href="{{.URL}}">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
      <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
      <strong>{{.Title}}</strong>
      <p>{{.Description}}</p>
    </a>
    {{end}}
  </div>
</section>
{{end}}

{{$partners := index .ThemesExt "partners"}}
{{if $partners}}
<section class="section partners-section">
  <div class="wrap section-head">
    <p class="eyebrow">展示生态</p>
    <h2>可扩展为客户、伙伴或认证墙</h2>
  </div>
  <div class="wrap partner-grid">
    {{range $partners}}<div><img src="{{.logo}}" alt="{{.name}}"><span>{{.name}}</span></div>{{end}}
  </div>
</section>
{{end}}

{{$faq := index .ThemesExt "faq"}}
{{if $faq}}
<section class="section soft">
  <div class="wrap faq-grid">
    <div><p class="eyebrow">常见问题</p><h2>关于无支付展示模板</h2><a class="btn primary" href="/message">咨询商品展示</a></div>
    <div class="faq-list">
      {{range $faq}}<details><summary>{{.q}}</summary><p>{{.a}}</p></details>{{end}}
    </div>
  </div>
</section>
{{end}}

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