{{$contact := index .ThemesExt "contact"}}
{{$loginUrl := index .ThemesExt "login_url"}}

<footer class="bg-slate-900 text-slate-300 mt-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 grid grid-cols-1 md:grid-cols-12 gap-10">
    {{/* 品牌区 */}}
    <div class="md:col-span-4">
      <div class="flex items-center gap-3 mb-4">
        {{if .Site}}{{if .Site.Logo}}
          <img src="{{.Site.Logo}}" alt="{{.Site.Title}}" class="h-9 w-auto object-contain">
        {{else}}
          <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-primary text-white font-bold text-lg">示</span>
        {{end}}{{end}}
        <div class="text-lg font-semibold text-white">{{if .Site}}{{.Site.Title}}{{else}}示例科技{{end}}</div>
      </div>
      <p class="text-sm text-slate-400 leading-relaxed mb-5">{{index .ThemesExt "footer_text"}}</p>
      {{$qr := index .ThemesExt "wechat_qr"}}
      {{if $qr}}
      <div class="flex items-center gap-3">
        <img src="{{$qr}}" alt="二维码" class="w-20 h-20 object-cover rounded border border-slate-700 bg-slate-800">
        <div class="text-xs text-slate-500 leading-relaxed">扫码关注公众号<br>获取产品与服务动态</div>
      </div>
      {{end}}
    </div>

    {{/* 快速导航 */}}
    <div class="md:col-span-2">
      <h3 class="text-sm font-semibold text-white mb-4 tracking-wide">快速导航</h3>
      <ul class="space-y-2.5 text-sm">
        <li><a href="/" class="text-slate-400 hover:text-accent">首页</a></li>
        {{range .Columns}}
          {{if eq .Kind 6}}
            <li><a href="{{if .LinkUrl}}{{.LinkUrl}}{{else}}{{.URL}}{{end}}" {{if eq .LinkTarget "_blank"}}target="_blank" rel="noopener"{{end}} class="text-slate-400 hover:text-accent">{{.Name}}</a></li>
          {{else}}
            <li><a href="{{.URL}}" class="text-slate-400 hover:text-accent">{{.Name}}</a></li>
          {{end}}
        {{end}}
      </ul>
    </div>

    {{/* 产品导航 */}}
    <div class="md:col-span-3">
      <h3 class="text-sm font-semibold text-white mb-4 tracking-wide">产品系列</h3>
      <ul class="grid grid-cols-1 gap-2.5 text-sm">
        {{$products := ColumnContents "products" 6}}
        {{if $products}}{{range $products}}
          <li><a href="{{.URL}}" class="text-slate-400 hover:text-accent line-clamp-1">{{.Title}}</a></li>
        {{end}}{{end}}
      </ul>
    </div>

    {{/* 联系方式 */}}
    <div class="md:col-span-3">
      <h3 class="text-sm font-semibold text-white mb-4 tracking-wide">联系我们</h3>
      {{if $contact}}
      <ul class="space-y-3 text-sm text-slate-400">
        {{if $contact.phone}}<li class="flex items-start gap-2"><span class="text-slate-500 mt-0.5">📞</span><div><div class="text-slate-500 text-xs">咨询热线</div><a href="tel:{{$contact.phone}}" class="text-white font-semibold hover:text-accent">{{$contact.phone}}</a></div></li>{{end}}
        {{if $contact.email}}<li class="flex items-start gap-2"><span class="text-slate-500 mt-0.5">✉️</span><div><div class="text-slate-500 text-xs">邮箱</div><a href="mailto:{{$contact.email}}" class="hover:text-accent">{{$contact.email}}</a></div></li>{{end}}
        {{if $contact.address}}<li class="flex items-start gap-2"><span class="text-slate-500 mt-0.5">📍</span><div><div class="text-slate-500 text-xs">地址</div>{{$contact.address}}</div></li>{{end}}
      </ul>
      {{end}}
    </div>
  </div>

  {{$links := FriendLinks}}
  {{if $links}}
  <div class="border-t border-slate-800">
    <div class="max-w-7xl mx-auto px-4 py-5 flex flex-wrap gap-x-5 gap-y-2 text-xs text-slate-500">
      <span class="text-slate-400">友情链接：</span>
      {{range $links}}<a href="{{.URL}}" target="_blank" rel="nofollow" class="hover:text-accent">{{.Name}}</a>{{end}}
    </div>
  </div>
  {{end}}

  <div class="border-t border-slate-800 py-5">
    <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-2 text-xs text-slate-500">
      <div>{{index .ThemesExt "copyright"}}</div>
      <div class="flex items-center gap-3">
        <span>{{index .ThemesExt "icp"}}</span>
        {{if index .ThemesExt "police"}}<span>·</span><span>{{index .ThemesExt "police"}}</span>{{end}}
      </div>
    </div>
  </div>
</footer>
</body>
</html>