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

{{$hero := index .ThemesExt "hero"}}
<section class="hero">
  <div class="hero-bg"></div>
  <div class="container hero-inner">
    <div class="hero-copy">
      <p class="eyebrow">{{index $hero "eyebrow"}}</p>
      <h1>{{index $hero "title"}}</h1>
      <p>{{index $hero "subtitle"}}</p>
      <form class="hero-search" action="/search" method="get">
        <input name="key" placeholder="输入游戏名、区服、段位、装备、金币">
        <button type="submit">立即搜索</button>
      </form>
      <div class="hero-actions">
        {{with Column "account-sale"}}<a class="btn btn-primary" href="{{.URL}}">{{index $hero "primary"}}</a>{{end}}
        {{with Column "contact"}}<a class="btn btn-ghost" href="{{.URL}}">{{index $hero "secondary"}}</a>{{end}}
      </div>
    </div>
    <div class="hero-panel">
      <h2>今日重点</h2>
      {{range ContentsByIds "1001,1101,1201,1301"}}
      <a class="hero-deal" href="{{.URL}}">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
        <span>
          <strong>{{.Title}}</strong>
          <small>{{if .Ext}}{{index .Ext "price_range"}} · {{index .Ext "game_server"}}{{end}}</small>
        </span>
      </a>
      {{end}}
    </div>
  </div>
</section>

{{if index .ThemesExt "stats_cards"}}
<section class="section compact">
  <div class="container stats-grid">
    {{range index .ThemesExt "stats_cards"}}
    <div class="stat-card">
      <strong>{{index . "value"}}</strong>
      <span>{{index . "label"}}</span>
    </div>
    {{end}}
  </div>
</section>
{{end}}

<section class="section">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">TRADE TYPE</p>
      <h2>四类交易入口</h2>
      <p>按账号、租号、装备和游戏币拆分展示，每类都有独立筛选字段。</p>
    </div>
    <div class="type-grid">
      {{range index .ThemesExt "trade_types"}}
      {{$slug := index . "slug"}}
      {{with Column $slug}}
      <a class="type-card" href="{{.URL}}">
        <strong>{{.Name}}</strong>
      {{end}}
        <h3>{{index . "title"}}</h3>
        <p>{{index . "desc"}}</p>
      </a>
      {{end}}
    </div>
  </div>
</section>

{{$sale := ColumnContents "account-sale" 6}}
{{$rent := ColumnContents "account-rent" 6}}
{{$equip := ColumnContents "equipment" 6}}
{{$coin := ColumnContents "currency" 6}}
<section class="section soft">
  <div class="container deal-sections">
    <div class="section-head inline">
      <div>
        <p class="eyebrow">ACCOUNT SALE</p>
        <h2>账号买卖精选</h2>
      </div>
      {{with Column "account-sale"}}<a class="more-link" href="{{.URL}}">查看全部</a>{{end}}
    </div>
    <div class="deal-grid">{{range $sale}}{{template "dealCard" .}}{{end}}</div>

    <div class="section-head inline space-top">
      <div>
        <p class="eyebrow">ACCOUNT RENT</p>
        <h2>账号租借推荐</h2>
      </div>
      {{with Column "account-rent"}}<a class="more-link" href="{{.URL}}">查看全部</a>{{end}}
    </div>
    <div class="deal-grid">{{range $rent}}{{template "dealCard" .}}{{end}}</div>

    <div class="split-grid space-top">
      <div>
        <div class="section-head inline">
          <div><p class="eyebrow">EQUIPMENT</p><h2>装备买卖</h2></div>
          {{with Column "equipment"}}<a class="more-link" href="{{.URL}}">更多</a>{{end}}
        </div>
        <div class="vertical-list">{{range $equip}}{{template "miniDeal" .}}{{end}}</div>
      </div>
      <div>
        <div class="section-head inline">
          <div><p class="eyebrow">CURRENCY</p><h2>游戏币买卖</h2></div>
          {{with Column "currency"}}<a class="more-link" href="{{.URL}}">更多</a>{{end}}
        </div>
        <div class="vertical-list">{{range $coin}}{{template "miniDeal" .}}{{end}}</div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container process-wrap">
    <div class="section-head">
      <p class="eyebrow">PROCESS</p>
      <h2>交易信息核验流程</h2>
      <p>主题前台只负责展示和咨询收集，真实订单、支付和担保需要业务系统承接。</p>
    </div>
    <div class="process-grid">
      {{range index .ThemesExt "process"}}
      <div class="process-card">
        <span>{{index . "step"}}</span>
        <h3>{{index . "title"}}</h3>
        <p>{{index . "desc"}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>

{{$news := ColumnContents "news" 6}}
<section class="section soft">
  <div class="container">
    <div class="section-head inline">
      <div>
        <p class="eyebrow">GUIDE</p>
        <h2>交易指南</h2>
      </div>
      {{with Column "news"}}<a class="more-link" href="{{.URL}}">更多指南</a>{{end}}
    </div>
    <div class="news-grid">
      {{range $news}}
      <a class="news-card" href="{{.URL}}">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
        <div>
          <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
          <h3>{{.Title}}</h3>
          <p>{{StrLimit .Description 86 "..."}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </div>
</section>

<section class="section">
  <div class="container faq-grid">
    <div class="section-head">
      <p class="eyebrow">FAQ</p>
      <h2>交易展示常见问题</h2>
      <p>把风险、边界和字段解释放在前台，减少无效沟通。</p>
    </div>
    <div class="faq-list">
      {{range index .ThemesExt "faq"}}
      <details>
        <summary>{{index . "q"}}</summary>
        <p>{{index . "a"}}</p>
      </details>
      {{end}}
    </div>
  </div>
</section>

{{if index .ThemesExt "partners"}}
<section class="section soft">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">PARTNERS</p>
      <h2>合作资源展示</h2>
    </div>
    <div class="partner-grid">
      {{range index .ThemesExt "partners"}}
      <div class="partner-card"><img src="{{index . "logo"}}" alt="{{index . "name"}}"><span>{{index . "name"}}</span></div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="cta-band">
  <div class="container cta-inner">
    <div>
      <p class="eyebrow">SUBMIT</p>
      <h2>有账号、装备或游戏币需求？</h2>
      <p>提交区服、预算、交易类型和联系方式，客服可按字段快速跟进。</p>
    </div>
    {{with Column "contact"}}<a class="btn btn-light" href="{{.URL}}">发布需求</a>{{end}}
  </div>
</section>

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

{{define "dealCard"}}
<a class="deal-card" href="{{.URL}}">
  <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
  <div class="deal-body">
    <div class="deal-meta">
      <span>{{.ColumnName}}</span>
      {{if .Ext}}{{if index .Ext "badge"}}<em>{{index .Ext "badge"}}</em>{{end}}{{end}}
    </div>
    <h3>{{.Title}}</h3>
    <p>{{StrLimit .Description 70 "..."}}</p>
    <div class="deal-spec">
      {{if .Ext}}{{if index .Ext "game_server"}}<span>{{index .Ext "game_server"}}</span>{{end}}{{if index .Ext "grade"}}<span>{{index .Ext "grade"}}</span>{{end}}{{end}}
    </div>
    <strong class="price">{{if .Ext}}{{index .Ext "price_range"}}{{else if .Price}}{{printf "¥%.0f" .Price}}{{end}}</strong>
  </div>
</a>
{{end}}

{{define "miniDeal"}}
<a class="mini-deal" href="{{.URL}}">
  <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
  <span>
    <strong>{{.Title}}</strong>
    <small>{{if .Ext}}{{index .Ext "price_range"}} · {{index .Ext "game_server"}}{{end}}</small>
  </span>
</a>
{{end}}