<footer class="bg-ink text-stone-300 mt-24">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 pt-16 pb-10">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-10">
      <div class="md:col-span-4">
        <div class="flex items-baseline gap-1.5 mb-4">
          <span class="text-2xl font-serif font-semibold text-white">途然</span>
          <span class="text-xs tracking-[0.3em] text-stone-400 uppercase">TooRunn</span>
        </div>
        <p class="text-sm text-stone-400 leading-relaxed">{{index .ThemesExt "footer_text"}}</p>
        {{$qr := index .ThemesExt "wechat_qr"}}
        {{if $qr}}
        <div class="mt-6 flex items-center gap-4">
          <img src="{{$qr}}" alt="微信二维码" class="w-20 h-20 rounded object-cover">
          <div class="text-xs text-stone-400 leading-relaxed">
            <div class="mb-1">扫码加微信</div>
            <div>新品 · 保养 · 限定团购</div>
          </div>
        </div>
        {{end}}
      </div>
      <div class="md:col-span-2">
        <h3 class="text-sm font-medium text-white mb-4 tracking-wider">浏览</h3>
        <ul class="space-y-2.5 text-sm">
          <li><a href="/" class="text-stone-400 hover:text-white">首页</a></li>
          {{range .Columns}}<li><a href="{{.URL}}" class="text-stone-400 hover:text-white">{{.Name}}</a></li>{{end}}
        </ul>
      </div>
      <div class="md:col-span-3">
        <h3 class="text-sm font-medium text-white mb-4 tracking-wider">联系方式</h3>
        {{$c := index .ThemesExt "contact"}}
        {{if $c}}
        <ul class="space-y-2.5 text-sm text-stone-400">
          {{if $c.phone}}<li>客服:{{$c.phone}}</li>{{end}}
          {{if $c.email}}<li>邮件:{{$c.email}}</li>{{end}}
          {{if $c.address}}<li class="leading-relaxed">{{$c.address}}</li>{{end}}
          {{if $c.hours}}<li class="text-stone-500 text-xs pt-1">{{$c.hours}}</li>{{end}}
        </ul>
        {{end}}
      </div>
      <div class="md:col-span-3">
        <h3 class="text-sm font-medium text-white mb-4 tracking-wider">订阅</h3>
        <p class="text-sm text-stone-400 mb-4 leading-relaxed">新品发布、季节保养、限定团购,一月一封,不打扰。</p>
        <form class="flex gap-2" onsubmit="event.preventDefault(); alert('已订阅,谢谢!');">
          <input type="email" placeholder="您的邮箱" required class="flex-1 px-3 py-2 text-sm bg-stone-800 border border-stone-700 rounded text-white placeholder-stone-500 focus:outline-none focus:border-accent">
          <button type="submit" class="px-4 py-2 text-sm bg-accent text-white rounded hover:opacity-90 whitespace-nowrap">订阅</button>
        </form>
      </div>
    </div>

    {{$links := FriendLinks}}
    {{if $links}}
    <div class="mt-12 pt-6 border-t border-stone-800">
      <div class="flex flex-wrap gap-x-6 gap-y-2 items-center text-xs text-stone-500">
        <span class="text-stone-400">友情链接</span>
        {{range $links}}<a href="{{.URL}}" class="hover:text-white" target="_blank" rel="noopener">{{.Name}}</a>{{end}}
      </div>
    </div>
    {{end}}
  </div>
  <div class="border-t border-stone-800 py-5">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-2 text-xs text-stone-500">
      <span>{{index .ThemesExt "copyright"}}</span>
      <span>{{index .ThemesExt "icp"}}</span>
    </div>
  </div>
</footer>
