<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 :md="6" :xs="24">
          <div class="brand-section">
            <div class="brand-logo">广西决策咨询网</div>
            <p class="brand-desc">
              广西决策咨询中心官方平台，汇聚专家智慧，服务政府决策，推动广西高质量发展。
            </p>
            <div class="social-links">
              <a-tooltip title="微信公众号">
                <span class="social-item">
                  <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.348z"/></svg>
                </span>
              </a-tooltip>
            </div>
          </div>
        </a-col>

        <!-- 快速导航 -->
        <a-col :md="4" :sm="6" :xs="12">
          <div class="footer-title">快速导航</div>
          <div class="footer-links">
            <NuxtLink to="/news">政策要闻</NuxtLink>
            <NuxtLink to="/consultation">决策咨询</NuxtLink>
            <NuxtLink to="/reference">决策参考</NuxtLink>
            <NuxtLink to="/expert">专家资讯</NuxtLink>
          </div>
        </a-col>

        <!-- 特色服务 -->
        <a-col :md="4" :sm="6" :xs="12">
          <div class="footer-title">特色服务</div>
          <div class="footer-links">
            <NuxtLink to="/think-tank">智库观察</NuxtLink>
            <NuxtLink to="/suggestions">建言献策</NuxtLink>
            <NuxtLink to="/membership">会员服务</NuxtLink>
            <NuxtLink to="/hanmo">翰墨文谈</NuxtLink>
          </div>
        </a-col>

        <!-- 关于我们 -->
        <a-col :md="4" :sm="6" :xs="12">
          <div class="footer-title">关于我们</div>
          <div class="footer-links">
            <NuxtLink to="/about">学会简介</NuxtLink>
            <NuxtLink to="/about/organization">组织机构</NuxtLink>
            <NuxtLink to="/about/charter">学会章程</NuxtLink>
            <NuxtLink to="/about/join">加入我们</NuxtLink>
          </div>
        </a-col>

        <!-- 联系我们 -->
        <a-col :md="6" :sm="12" :xs="24">
          <div class="footer-title">联系我们</div>
          <div class="contact-info">
            <div class="contact-item">
              <span class="contact-icon">📍</span>
              <span>广西·南宁·良庆区 五象大道401号五象航洋城</span>
            </div>
            <div class="contact-item">
              <span class="contact-icon">📞</span>
              <span>0771-5386339</span>
            </div>
            <div class="contact-item">
              <span class="contact-icon">📧</span>
              <span>gxjzxzx@126.com</span>
            </div>
          </div>

          <!-- 二维码 -->
          <div class="qrcode-section">
            <div class="qrcode-item">
              <div class="qrcode-box">
                <img alt="微信公众号" class="qrcode-img" src="/images/qrcode-mp-official.jpg" />
              </div>
              <span class="qrcode-label">关注公众号</span>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 底部版权区域 -->
      <div class="footer-bottom">
        <div class="footer-bottom-content">
          <div class="copyright">
            <span>© {{ year }} 广西决策咨询中心 版权所有</span>
            <a
              class="icp-link"
              href="https://beian.miit.gov.cn/"
              rel="nofollow noopener"
              target="_blank"
            >桂ICP备13003666号-12</a>
          </div>
          <div class="powered-by">
            Powered by <a class="text-gray-200" href="https://websoft.top/website" target="_blank">云·企业官网</a>
          </div>
        </div>
      </div>
    </div>
  </a-layout-footer>
</template>

<script lang="ts" setup>
const year = new Date().getFullYear()
</script>

<style scoped>
.footer {
  background: #1e3a5f;
  padding: 0;
  color: #fff;
}

/* 品牌区域 */
.brand-section {
  display: flex;
  flex-direction: column;
}

.brand-logo {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.brand-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s;
}

.social-item:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 链接区域 */
.footer-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #fff;
}

/* 联系信息 */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.contact-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* 二维码 */
.qrcode-section {
  display: flex;
  gap: 16px;
}

.qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qrcode-box {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
}

.qrcode-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qrcode-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* 底部版权 */
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom-content {
    flex-direction: row;
    justify-content: space-between;
  }
}

.copyright {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.icp-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.icp-link:hover {
  color: #fff;
}

.powered-by {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

/* 覆盖 a-layout-footer 默认样式 */
.footer :deep(.ant-layout-footer) {
  padding: 0;
}
</style>
