<template>
  <qi-container>
    <div class="grid grid-cols-5 gap-8 py-10">
      <div v-for="(section, index) in footerSections" :key="index" class="space-y-4">
        <h3 class="font-medium text-gray-700">{{ section.title }}</h3>
        <ul class="space-y-2">
          <li v-for="(item, itemIndex) in section.items" :key="itemIndex">
            <a :href="item.link" class="text-gray-500 hover:text-blue-600 text-sm">
              {{ item.text }}
            </a>
          </li>
        </ul>
      </div>
      <div class="space-y-4">
        <h3 class="font-medium text-gray-700">关注或联系我们</h3>
        <div class="flex space-x-4">
          <div class="text-center">
            <!-- <img src="/qrcode-weixin.png" alt="微信二维码" class="w-32 h-32 mb-2" /> -->
            <span class="text-sm text-gray-500">微信公众号</span>
          </div>
          <div class="text-center">
            <!-- <img src="/qrcode-mini.png" alt="小程序码" class="w-32 h-32 mb-2" /> -->
            <span class="text-sm text-gray-500">小程序</span>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          <p>咨询热线：95716 或 4009 100 100 转 1</p>
          <button class="mt-2 px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
            联系我们
          </button>
        </div>
      </div>
    </div>
    <div class="border-t border-gray-200 py-6">
      <div class="flex items-center text-sm text-gray-500">
        <img src="~/assets/nav/logo.png" alt="Logo" class="h-8">
        <a v-for="(item, index) in qiLink" :href="item.link" class="text-gray-500 hover:text-blue-600 text-sm ml-4">
          {{ item.text }}
        </a>
      </div>
      <div class="flex items-center justify-between text-sm text-gray-500">
        <div class="text-start flex flex-col">
          <p class="mt-1">Copyright {{ new Date().getFullYear() }} Tencent Cloud. All Rights Reserved. 腾讯云 版权所有</p>
          <p class="mt-1">深圳市腾讯计算机系统有限公司ICP备案/许可证号：粤B2-20090059
            粤公网安备44030502008569号
          </p>
          <p class="mt-4">腾讯云计算（北京）有限责任公司京ICP证150476号 | 京ICP备11018762号| 域名注册服务机构许可:京D3-20230006| 增值电信业务经营许可证：B1.B2-20130326 |
            京B2-20170284</p>
          <p class="mt-1">代理域名注册服务机构：烟台帝思普网络科技有限公司 | 新网数码 | 广州云讯信息科技有限公司</p>
        </div>
        <div>
          <select class="bg-transparent border-none" v-model="selectedLanguage">
            <option value="zh">中国站</option>
            <option value="en">International</option>
            <option value="jp">日本語</option>
          </select>
        </div>
      </div>
    </div>
  </qi-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface FooterItem {
  text: string;
  link: string;
}

interface FooterSection {
  title: string;
  items: FooterItem[];
}

const selectedLanguage = ref('zh')
const qiLink = [
  {
    text: '产品文档',
    link: '/'
  },
  {
    text: 'API 中心',
    link: '/'
  },
  {
    text: 'SDK 中心',
    link: '/'
  },
  {
    text: '入门中心',
    link: '/'
  },
  {
    text: '开发者社区',
    link: '/'
  },
  {
    text: '培训认证',
    link: '/'
  },
]
const footerSections: FooterSection[] = [
  {
    title: '热门推荐',
    items: [
      { text: '云服务器', link: '/' },
      { text: '轻量应用服务器', link: '/' },
      { text: '对象存储', link: '/' },
      { text: '云数据库 MySQL', link: '/' },
      { text: '域名注册', link: '/' },
      { text: '人脸识别', link: '/' },
      { text: '实时音视频', link: '/' },
      { text: '即时通信 IM', link: '/' }
    ]
  },
  {
    title: '资源与社区',
    items: [
      { text: '产品文档', link: '/' },
      { text: 'API 中心', link: '/' },
      { text: 'SDK 中心', link: '/' },
      { text: '入门中心', link: '/' },
      { text: '开发者社区', link: '/' },
      { text: '培训认证', link: '/' },
      { text: '腾讯云学堂', link: '/' }
    ]
  },
  {
    title: '支持服务',
    items: [
      { text: '公告', link: '/' },
      { text: '控制台', link: '/' },
      { text: '续费', link: '/' },
      { text: '安全中心', link: '/' },
      { text: '举报平台', link: '/' },
      { text: '健康专板', link: '/' },
      { text: '联系我们', link: '/' },
      { text: 'ICP 备案', link: '/' }
    ]
  },
  {
    title: '腾讯云计算',
    items: [
      { text: '最新动态', link: '/' },
      { text: '免费试用', link: '/' },
      { text: '合作伙伴', link: '/' },
      { text: '客户案例', link: '/' },
      { text: '合规认证', link: '/' },
      { text: '关于我们', link: '/' },
      { text: 'Techo 开发者大会', link: '/' },
      { text: '2024腾讯全球数字生态大会', link: '/' }
    ]
  }
];
</script>

<style scoped>
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}
</style>
