{{/*
  页脚（footer.html）—— 小米式浅色页脚。

  · 服务承诺白条（可配置，无数据整块不渲染）；
  · 多栏：品牌简介 / 有子栏目的栏目独立成列 / 快速链接 / 联系方式 / 关注我们；
  · 底部居中版权 + ICP。
  ⚠️ 联系方式读 .ThemesExt，没有配置时整行隐藏 —— 显示一串假号码比不显示更糟。
  ⚠️ 本文件只输出结构，页脚本一律放在页面尾部或 js.html ——
  校验器规定 footer partial 内不得出现脚本标签（「回到顶部」的绑定在 js.html）。
*/}}
{{$ext := .ThemesExt}}
{{$promises := index $ext "service_promises"}}

{{if $promises}}
<div class="border-t border-[#e6e6e6] bg-white">
  <div class="vm-container grid grid-cols-2 gap-6 py-8 md:grid-cols-4">
    {{range $i, $p := $promises}}
    <div class="flex items-start gap-3">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
        {{if eq $i 0}}
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
        </svg>
        {{else if eq $i 1}}
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 8h14M5 8a2 2 0 012-2h10a2 2 0 012 2M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
        </svg>
        {{else if eq $i 2}}
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 4v6h6M4.93 19a8 8 0 111.41-11.07L4 10"/>
        </svg>
        {{else}}
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M18.364 5.636l-3.536 3.536m0 0a5 5 0 11-7.071 7.071 5 5 0 017.071-7.071zm2.121-5.657a9 9 0 11-12.728 12.728 9 9 0 0112.728-12.728z"/>
        </svg>
        {{end}}
      </span>
      <div class="min-w-0">
        <div class="text-sm font-medium text-[#1a1a1a]">{{index $p "title"}}</div>
        <div class="mt-0.5 text-xs leading-relaxed text-[#999]">{{index $p "desc"}}</div>
      </div>
    </div>
    {{end}}
  </div>
</div>
{{end}}

<footer class="border-t border-[#e6e6e6] bg-white text-[#757575]">
  {{/*
    页脚多栏（2026-10-12 重排）：品牌栏 + 有子栏目的栏目每栏独立成列
    + 快速链接（只收无子栏目的栏目与商城入口）+ 联系我们 + 关注我们。
    用 flex-wrap 而不是固定栅格：栏数由运营数据决定，
    固定 grid-cols 在栏目增减时必然出现空格或挤窄。
  */}}
  {{$wechatQR := index $ext "wechat_qr"}}
  {{$wechatID := index $ext "wechat_id"}}
  {{$footerLinks := index $ext "footer_links"}}
  {{$aboutTitle := default "关于我们" (index $ext "footer_about_title")}}
  <div class="vm-container flex flex-wrap gap-x-10 gap-y-10 py-12">
    <div class="w-full shrink-0 lg:w-72 lg:pr-6">
      <div class="mb-4 flex items-center gap-2">
        {{if .Site.Logo}}
        <img src="{{.Site.Logo}}" alt="{{.Site.Title}}" class="h-8 w-auto object-contain">
        {{else}}
        <img src="/static/images/logo.webp" alt="{{if .Site}}{{.Site.Title}}{{else}}电子商城{{end}}" class="h-8 w-auto object-contain">
        {{end}}
      </div>
      <p class="text-sm leading-relaxed">
        {{with index $ext "footer_about"}}{{.}}{{else}}我们专注于消费电子产品，为用户提供品质可靠、价格厚道的智能设备。{{end}}
      </p>
    </div>

    {{/* 产品等有子栏目的栏目：每栏独立成列，栏目标题链到栏目本身 */}}
    {{range .Columns}}
    {{if and (ne .URL "/") .Children (ge (len .Children) 2)}}
    <div class="w-1/2 min-w-[7.5rem] sm:w-1/3 lg:w-auto lg:min-w-0 lg:flex-1">
      <h3 class="mb-4 text-sm font-semibold text-[#1a1a1a]"><a href="{{.URL}}" class="transition-colors hover:text-primary">{{.Name}}</a></h3>
      <ul class="space-y-2.5 text-sm">
        {{range $i, $c := .Children}}{{if lt $i 6}}
        <li><a href="{{$c.URL}}" class="transition-colors hover:text-primary">{{$c.Name}}</a></li>
        {{end}}{{end}}
        {{if gt (len .Children) 6}}
        <li><a href="{{.URL}}" class="transition-colors hover:text-primary">更多 →</a></li>
        {{end}}
      </ul>
    </div>
    {{end}}
    {{end}}

    <div class="w-1/2 min-w-[7.5rem] sm:w-1/3 lg:w-auto lg:min-w-0 lg:flex-1">
      <h3 class="mb-4 text-sm font-semibold text-[#1a1a1a]">快速链接</h3>
      <ul class="grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm">
        <li><a href="/" class="transition-colors hover:text-primary">首页</a></li>
        {{/* 首页若被建成栏目（URL 为 /）会重复出现，跳过；有子栏目的栏目已在上面独立成列 */}}
        {{range .Columns}}
        {{if and (ne .URL "/") (or (not .Children) (lt (len .Children) 2)) (ne .Kind 3) (ne .Kind 6)}}
        <li><a href="{{.URL}}" class="transition-colors hover:text-primary">{{.Name}}</a></li>
        {{end}}
        {{end}}
        {{if .ShopEnabled}}
        <li><a href="/cart" class="transition-colors hover:text-primary">购物车</a></li>
        <li><a href="/coupons" class="transition-colors hover:text-primary">领券中心</a></li>
        <li><a href="/orders" class="transition-colors hover:text-primary">订单查询</a></li>
        {{end}}
      </ul>
    </div>

    {{/*
      「关于我们」栏（FR-03/FR-04）。
      单页（Kind=3）与外链（Kind=6）栏目不再混进「快速链接」——它们没有子栏目，
      混在那儿只会把「公司简介」和「购物车」并排放在一起。这里单独成栏，
      语义与「联系我们」（电话/地址）区分开。
      footer_links 是后台可配的自定义链接：隐私政策、服务条款这类法定页面
      **不必建栏目**就能出现——建了栏目就必然占一个导航位，而这正是要避免的。
      ⚠️ 栏内项目来自 map（footer_links 的项是 JSON 对象），必须用 index . "url"
      取值；写 .URL 访问不到 map 的 key，会静默渲染成空链接。
      ⚠️ $hasPage 先扫一遍再决定是否渲染整栏：模板无法在 range 之后判断
      「刚才有没有输出过」，不预扫就会留下一个空标题栏。
    */}}
    {{$hasPage := false}}
    {{range .Columns}}{{if and (or (eq .Kind 3) (eq .Kind 6)) (ne .URL "/")}}{{$hasPage = true}}{{end}}{{end}}
    {{if or $hasPage $footerLinks}}
    <div class="w-1/2 min-w-[7.5rem] sm:w-1/3 lg:w-auto lg:min-w-0 lg:flex-1">
      <h3 class="mb-4 text-sm font-semibold text-[#1a1a1a]">{{$aboutTitle}}</h3>
      <ul class="space-y-2.5 text-sm">
        {{range .Columns}}
        {{if and (or (eq .Kind 3) (eq .Kind 6)) (ne .URL "/")}}
        <li><a href="{{.URL}}" class="transition-colors hover:text-primary">{{.Name}}</a></li>
        {{end}}
        {{end}}
        {{range $link := $footerLinks}}
        {{with index . "url"}}
        <li><a href="{{.}}" class="transition-colors hover:text-primary">{{index $link "text"}}</a></li>
        {{end}}
        {{end}}
      </ul>
    </div>
    {{end}}

    <div class="w-1/2 min-w-[7.5rem] sm:w-1/3 lg:w-auto lg:min-w-0 lg:flex-1">
      <h3 class="mb-4 text-sm font-semibold text-[#1a1a1a]">联系我们</h3>
      <ul class="space-y-2.5 text-sm">
        {{with index $ext "contact_phone"}}<li>服务热线：<span class="text-[#1a1a1a]">{{.}}</span></li>{{end}}
        {{with index $ext "contact_email"}}<li>邮箱：{{.}}</li>{{end}}
        {{with index $ext "contact_address"}}<li>地址：{{.}}</li>{{end}}
        {{with index $ext "work_time"}}<li>{{.}}</li>{{end}}
      </ul>
    </div>

    {{if or $wechatQR $wechatID}}
    <div class="w-1/2 min-w-[7.5rem] sm:w-1/3 lg:w-auto lg:min-w-0 lg:flex-1">
      <h3 class="mb-4 text-sm font-semibold text-[#1a1a1a]">关注我们</h3>
      {{if $wechatQR}}
      <img src="{{$wechatQR}}" alt="微信公众号二维码" class="h-28 w-28 rounded-lg bg-white p-1 ring-1 ring-[#eee]">
      {{end}}
      {{with $wechatID}}
      <p class="mt-2 text-sm">微信号：<span class="text-[#1a1a1a]">{{.}}</span></p>
      {{end}}
    </div>
    {{end}}
  </div>

  <div class="border-t border-[#f0f0f0]">
    <div class="vm-container flex flex-col items-center gap-1 py-6 text-center text-xs text-[#b0b0b0]">
      {{with index $ext "footer_text"}}<p>{{.}}</p>{{end}}
      {{with index $ext "copyright"}}<p>{{.}}</p>{{end}}
      {{with index $ext "icp"}}<p>{{.}}</p>{{end}}
      <p>Powered by <a href="https://www.vvcms.cn" target="_blank" rel="noopener" class="underline hover:text-primary">VVCMS</a></p>
    </div>
  </div>
</footer>


{{/* ------------------------------------------------------------ 回到顶部 */}}
<button id="vv-back-to-top" type="button" aria-label="回到顶部"
        style="display:none;position:fixed;right:1.5rem;bottom:1.5rem;z-index:50;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;background:#0f172a;color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.25);border:none;cursor:pointer;">
  <svg style="width:1.25rem;height:1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
  </svg>
</button>

{{/* vv-footer-deepened */}}