<script setup lang="ts">
import { siteName, footerLinks } from '~/data/siteContent'
</script>

<template>
  <footer class="bg-gray-900 text-gray-300 pt-16 pb-8">
    <div class="section-container">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
        <div>
          <h4 class="text-white font-bold mb-4">{{ siteName }}</h4>
          <p class="text-sm text-gray-400">智慧医养居家上门服务闭环管理平台</p>
        </div>
        <div>
          <h5 class="text-white font-semibold mb-3">解决方案</h5>
          <ul class="space-y-2">
            <li v-for="l in footerLinks.solutions" :key="l.to">
              <NuxtLink :to="l.to" class="text-sm text-gray-400 hover:text-white transition-colors">{{ l.label }}</NuxtLink>
            </li>
          </ul>
        </div>
        <div>
          <h5 class="text-white font-semibold mb-3">应用场景</h5>
          <ul class="space-y-2">
            <li v-for="l in footerLinks.scenarios" :key="l.to">
              <NuxtLink :to="l.to" class="text-sm text-gray-400 hover:text-white transition-colors">{{ l.label }}</NuxtLink>
            </li>
          </ul>
        </div>
        <div>
          <h5 class="text-white font-semibold mb-3">关于</h5>
          <ul class="space-y-2">
            <li v-for="l in footerLinks.company" :key="l.to">
              <NuxtLink :to="l.to" class="text-sm text-gray-400 hover:text-white transition-colors">{{ l.label }}</NuxtLink>
            </li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-700 pt-8 text-center text-sm text-gray-500">
        <p>&copy; {{ new Date().getFullYear() }} {{ siteName }}. All rights reserved.</p>
        <p class="mt-1 text-xs">ICP备案号：上线前补充 | 公安备案号：上线前补充</p>
        <p class="mt-2 text-xs text-gray-600">本网站中系统界面图片为功能示意图（示意素材，待替换为真实系统截图）。</p>
      </div>
    </div>
  </footer>
</template>
