<template>
  <footer class="bg-gray-900 text-white pt-16 pb-10 px-4 sm:px-8 lg:px-24">
    <div class="container mx-auto">
      <div class="flex flex-wrap -mx-4">
        <!-- 公司信息部分 -->
        <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
          <div>
            <router-link to="/" class="flex items-center mb-6">
              <img
                  src="@/assets/images/logo-white.png"
                  alt="酉佰"
                  class="h-8 md:h-10"
              />
              <span class="ml-2 text-xl md:text-2xl font-bold text-white"
              >酉佰</span
              >
            </router-link>
            <p class="text-gray-400 mb-4 max-w-xs text-sm sm:text-base">
              酉佰专注金融、投资领域的专业服务，提供金融行业解决方案。
            </p>
            <div class="flex space-x-4">
              <a
                  v-for="(item, index) in social"
                  :key="index"
                  :href="item.link"
                  class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-primary transition-colors"
                  aria-label="社交媒体链接"
              >
                <i :class="item.icon" class="text-white text-sm sm:text-base"></i>
              </a>
            </div>
          </div>
        </div>

        <!-- 导航链接部分 -->
        <div
            v-for="(block, index) in footerLinks"
            :key="index"
            class="w-full sm:w-1/2 md:w-1/4 px-4 mb-8 md:mb-0"
        >
          <h3 class="text-base sm:text-lg font-semibold mb-4">{{ block.title }}</h3>
          <ul class="space-y-2">
            <li v-for="(link, linkIndex) in block.links" :key="linkIndex">
              <a
                  :href="link.path"
                  class="text-gray-400 hover:text-primary transition-colors text-sm sm:text-base"
              >
                {{ link.title }}
              </a>
            </li>
          </ul>
        </div>

        <!-- 订阅部分 -->
<!--        <div class="w-full md:w-1/4 px-4">-->
<!--          <h3 class="text-base sm:text-lg font-semibold mb-4">订阅我们</h3>-->
<!--          <p class="text-gray-400 mb-4 text-sm sm:text-base">-->
<!--            订阅我们的邮件，获取最新电商行业资讯和解决方案。-->
<!--          </p>-->
<!--          <div class="flex">-->
<!--            <input-->
<!--                type="email"-->
<!--                placeholder="您的邮箱地址"-->
<!--                class="w-full px-3 py-2 sm:px-4 sm:py-2 rounded-l-lg focus:outline-none text-gray-700 text-sm sm:text-base"-->
<!--                aria-label="订阅邮箱输入框"-->
<!--            />-->
<!--            <button-->
<!--                class="bg-primary hover:bg-blue-700 text-white font-semibold px-3 sm:px-4 py-2 rounded-r-lg transition-colors text-sm sm:text-base"-->
<!--                aria-label="订阅按钮"-->
<!--            >-->
<!--              订阅-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->
      </div>

      <!-- 底部版权信息 -->
      <div class="border-t border-gray-800 mt-10 pt-6">
        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
          <div class="mb-4 md:mb-0">
            <p class="text-gray-500 text-xs sm:text-sm">
              © 2021 shyoubai.com. All rights reserved
            </p>
          </div>
          <div class="flex flex-col sm:flex-row justify-center items-center gap-3 text-gray-500 text-sm">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402009014"
               class="flex items-center hover:text-primary transition-colors duration-200 group">
              <img src="@/assets/images/gongan.png" alt="公安备案图标" class="h-4 mr-1.5 group-hover:scale-105 transition-transform">
              <span>沪公网安备 31010402009014号</span>
            </a>

            <span class="hidden sm:inline-block text-gray-400">|</span>

            <a href="https://beian.miit.gov.cn/"
               class="flex items-center hover:text-primary transition-colors duration-200 group">
              <img src="@/assets/images/icp.png" alt="公安备案图标" class="h-4 mr-1.5 group-hover:scale-105 transition-transform">
              <span>沪ICP备2021007173号-1</span>
            </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: '#' },
        { icon: 'fab fa-zhihu', link: '#' },
      ],
      footerLinks: [
        {
          title: '快速导航',
          links: [
            { title: '关于我们', path: '/about' },
            { title: '团队介绍', path: '/team' },
            { title: '服务特色', path: '/features' },
            { 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' },
            { title: '周一至周五 9:00-18:00', path: '#' },
          ]
        }
      ]
    }
  }
}
</script>