<template>
  <footer class="bg-slate-950 px-4 py-12 text-white sm:px-8 lg:px-24">
    <div class="container mx-auto">
      <div class="grid gap-10 md:grid-cols-[1.3fr_2fr]">
        <div>
          <router-link to="/" class="mb-5 flex items-center">
            <img src="@/assets/images/logo-white.png" alt="萧康云医" class="h-10" />
            <span class="ml-3 text-2xl font-bold">萧康云医</span>
          </router-link>
          <p class="max-w-sm text-sm leading-7 text-slate-400">
            萧康云医官网面向诊所经营者、医生团队和推广团队，提供患者端、医生端、门店老板端、推广员端与 PC 后台一体化 SaaS 能力。
          </p>
          <div class="mt-6 flex gap-3">
            <a v-for="item in social" :key="item.icon" :href="item.link" class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-sky-600" aria-label="社交媒体链接">
              <i :class="item.icon"></i>
            </a>
          </div>
        </div>

        <div class="grid gap-8 sm:grid-cols-3">
          <div v-for="block in footerLinks" :key="block.title">
            <h3 class="mb-4 text-base font-semibold">{{ block.title }}</h3>
            <ul class="space-y-3">
              <li v-for="link in block.links" :key="link.title">
                <router-link v-if="link.path.startsWith('/')" :to="link.path" class="text-sm text-slate-400 transition hover:text-sky-300">
                  {{ link.title }}
                </router-link>
                <a v-else :href="link.path" class="text-sm text-slate-400 transition hover:text-sky-300">
                  {{ link.title }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="mt-10 border-t border-white/10 pt-6">
        <div class="flex flex-col items-center justify-between gap-4 text-center text-xs text-slate-500 md:flex-row md:text-left">
          <p>© 2026 萧康云医官网. All rights reserved.</p>
          <div class="flex flex-col items-center gap-3 sm:flex-row">
            <a href="https://beian.miit.gov.cn/" class="hover:text-sky-300">沪ICP备2021007173号-1</a>
            <span class="hidden sm:inline">|</span>
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402009014" class="hover:text-sky-300">沪公网安备 31010402009014号</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      social: [
        { icon: 'fab fa-weixin', link: '#' },
        { icon: 'fab fa-weibo', link: '#' },
        { icon: 'fab fa-linkedin-in', link: '#' }
      ],
      footerLinks: [
        {
          title: '产品',
          links: [
            { title: '产品能力', path: '/features' },
            { title: '解决方案', path: '/solutions' },
            { title: '价格方案', path: '/pricing' }
          ]
        },
        {
          title: '公司',
          links: [
            { title: '关于我们', path: '/about' },
            { title: '团队介绍', path: '/team' },
            { title: '加入我们', path: '/careers' }
          ]
        },
        {
          title: '联系',
          links: [
            { title: '上海市中山西路2020号华宜大厦2号楼1501室', path: '#' },
            { title: '021-34161621', path: 'tel:021-34161621' },
            { title: 'youbaiwangluo@163.com', path: 'mailto:youbaiwangluo@163.com' }
          ]
        }
      ]
    }
  }
}
</script>
