<template>
  <a-layout-footer class="footer">
    <div class="mx-auto max-w-screen-xl px-4 py-12">
      <!-- 主要内容区域 -->
      <a-row :gutter="[32, 40]">
        <!-- 品牌介绍 -->
        <a-col :xs="24" :md="6">
          <div class="flex items-center gap-2 mb-4">
            <span class="text-2xl">🦞</span>
            <span class="text-lg font-semibold text-white">AI-Native</span>
          </div>
          <p class="text-sm text-gray-400 leading-6 mb-4">
            深度集成 OpenClaw 开源 AI Agent 框架，为企业提供智能客服、知识库问答、自动化工作流等能力。
          </p>
          <div class="flex gap-3">
            <a-tooltip title="GitHub">
              <a href="https://github.com/openclaw" target="_blank" class="text-gray-400 hover:text-white transition-colors">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
              </a>
            </a-tooltip>
            <a-tooltip title="微信公众号">
              <span class="text-gray-400 hover:text-white cursor-pointer transition-colors">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .186-.059l2.114-1.225a.866.866 0 0 1 .58-.091 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 3.952 6.884 3.952.526 0 1.045-.048 1.555-.133-.207-.533-.454-1.05-.768-1.532l-.15.086c-.655.373-1.546.597-2.477.597-.769 0-1.491-.183-2.143-.507a4.226 4.226 0 0 1-1.762-1.399c-.052-.059-.104-.117-.154-.175l-.001.001a4.312 4.312 0 0 1 2.824-1.127c1.513 0 2.75.707 3.534 1.606.505.759.882 1.613 1.105 2.523 1.418-1.215 2.391-2.727 2.797-4.415.458-1.193.412-2.285-.097-3.177-.538-.942-1.391-1.64-2.397-2.086zm-6.115 5.115a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683zm4.524 0a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683z" /></svg>
              </span>
            </a-tooltip>
          </div>
        </a-col>

        <!-- 产品服务 -->
        <a-col :xs="12" :sm="6" :md="4">
          <div class="text-base font-semibold text-white mb-4">产品服务</div>
          <div class="grid gap-3 text-sm text-gray-400">
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/ai-agent">AI 智能体</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/website">云官网</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/miniapp">小程序开发</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/shop">小程序商城</NuxtLink>
          </div>
        </a-col>

        <!-- 平台能力 -->
        <a-col :xs="12" :sm="6" :md="4">
          <div class="text-base font-semibold text-white mb-4">平台能力</div>
          <div class="grid gap-3 text-sm text-gray-400">
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">多租户架构</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">私有化部署</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">模板市场</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">插件市场</NuxtLink>
          </div>
        </a-col>

        <!-- 快速入口 -->
        <a-col :xs="12" :sm="6" :md="4">
          <div class="text-base font-semibold text-white mb-4">快速入口</div>
          <div class="grid gap-3 text-sm text-gray-400">
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/flow">开通流程</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/deploy">部署方案</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/contact">联系我们</NuxtLink>
            <NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/login">立即登录</NuxtLink>
          </div>
        </a-col>

        <!-- 联系我们 -->
        <a-col :xs="12" :sm="6" :md="6">
          <div class="text-base font-semibold text-white mb-4">联系我们</div>
          <div class="grid gap-3 text-sm text-gray-400">
            <div class="flex items-center gap-2">
              <span class="text-gray-500">📱</span>
              <span>0771-5386339</span>
            </div>
            <div class="flex items-start gap-2">
              <span class="text-gray-500">📍</span>
              <span>广西·南宁·良庆区 五象大道401号五象航洋城1226</span>
            </div>
          </div>

          <!-- 扫码下载 / 关注 -->
          <div class="mt-5">
            <div class="text-xs text-gray-500 mb-3">扫码下载 / 关注</div>
            <div class="flex flex-wrap gap-4">
              <!-- 微信小程序 -->
              <a-tooltip color="#1f2937" placement="top">
                <template #title>
                  <div class="flex flex-col items-center gap-1 p-1">
                    <img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-28 h-28 rounded" />
                    <span class="text-xs text-gray-300">微信小程序</span>
                  </div>
                </template>
                <div class="flex flex-col items-center gap-1 cursor-pointer group">
                  <div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
                    <img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-full h-full object-cover" />
                  </div>
                  <span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">小程序</span>
                </div>
              </a-tooltip>

              <!-- 微信公众号 -->
              <a-tooltip color="#1f2937" placement="top">
                <template #title>
                  <div class="flex flex-col items-center gap-1 p-1">
                    <img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-28 h-28 rounded" />
                    <span class="text-xs text-gray-300">微信公众号</span>
                  </div>
                </template>
                <div class="flex flex-col items-center gap-1 cursor-pointer group">
                  <div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
                    <img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-full h-full object-cover" />
                  </div>
                  <span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">公众号</span>
                </div>
              </a-tooltip>

              <!-- APP 下载（Android & iOS 通用） -->
              <a-tooltip color="#1f2937" placement="top">
                <template #title>
                  <div class="flex flex-col items-center gap-1 p-1">
                    <img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-28 h-28 rounded" />
                    <span class="text-xs text-gray-300">扫码下载 APP</span>
                    <span class="text-xs text-gray-500">Android &amp; iOS</span>
                  </div>
                </template>
                <div class="flex flex-col items-center gap-1 cursor-pointer group">
                  <div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-blue-400/60 transition-colors">
                    <img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-full h-full object-cover" />
                  </div>
                  <span class="text-xs text-gray-500 group-hover:text-blue-400 transition-colors">下载 APP</span>
                </div>
              </a-tooltip>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 底部版权区域 -->
      <div class="mt-10 pt-6 border-t border-white/10">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between text-xs text-gray-500">
          <div class="flex items-center gap-2 flex-wrap">
            <img src="/logo.png" alt="websopy" style="height:12px;width:auto;opacity:0.4;" />
            <span>© {{ year }} Websopy. All rights reserved.</span>
            <a
              href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener"
              class="text-gray-500 hover:text-orange-400 transition-colors"
            >{{ icpText }}</a>
          </div>
          <div class="flex items-center gap-2 opacity-80 hover:opacity-90 text-gray-100 text-xs">
            <!-- 切换语言 -->
<!--            <LangSwitch />-->
            <span class="text-gray-500">Powered by</span>
            <a
              rel="nofollow"
              href="https://site.websoft.top"
              target="_blank"
            >
              <span class="text-gray-500 hover:text-gray-200">云·企业官网</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </a-layout-footer>
</template>

<script setup lang="ts">
import { getAppProductFieldByCode } from '@/api/cms/cmsWebsiteField'

const siteName = '桂乐淘'

const { data: icpField } = useAsyncData('cmsWebsite-field-icpNo', async () => {
  try {
    return await getAppProductFieldByCode('icpNo')
  } catch {
    return null
  }
})

const icpNo = computed(() => {
  const v = icpField.value?.value ?? icpField.value?.defaultValue
  if (typeof v === 'string' && v.trim()) return v.trim()
  return ''
})

const icpText = computed(() => (icpNo.value ? `备案号：${icpNo.value}` : '备案号：桂ICP备13003666号-12'))
const year = new Date().getFullYear()
</script>

<style scoped>
.footer {
  background: #111827;
  padding: 0;
}
/* 覆盖浏览器默认蓝色链接色 */
.footer :deep(a) {
  color: inherit;
  text-decoration: none;
}
</style>
