<template>
  <!--
    首页底部信息块（完全对照 Figma 150897:8486 · 审核版本）
    节点：150904:8642（底部信息块）
      ├─ Group 29 (1440×144, #F0F7F2)
      │   └─ 底部信息 (row · space-between · align center · padding 40 20)
      │       └─ Frame 235 (1200)
      │           ├─ Frame 213 (column · gap 10)
      │           │   ├─ Frame 208 (row) ─ 标题"联系"带 1px 底边 + "我们"
      │           │   └─ Frame 209 (row · gap 32) ─ 邮箱 + 地址
      │           └─ Frame 212 (column · gap 16)
      │               ├─ Frame 208 ─ 标题"友情"带 1px 底边 + "链接"
      │               └─ Frame 209 (row · gap 32) ─ 两个友链
      └─ 版权 (1440×80, #E2EDE5)
          └─ Frame 219 (row · center · gap 20)
              └─ Frame 221 (1200 · column · center · gap 8 · padding 16 0)
                  ├─ Frame 210 ─ 指导单位行
                  └─ Frame 1898 (row · gap 20) ─ 版权行
  -->
  <div class="portal-footer-shell">
    <footer class="site-footer">

      <!-- 上区：底部信息（1440×144 · #F0F7F2） -->
      <div class="footer-main">
        <div class="footer-main-inner">

          <!-- Frame 235：1200 · row · space-between -->
          <div class="footer-frame">

            <!-- Frame 213：联系我们列（column · gap 10） -->
            <div class="footer-col footer-col--contact">
              <!-- Frame 208：标题行 ─ "联系"(带 1px 下边框) + "我们" -->
              <div class="footer-title-row">
                <span class="footer-title-with-underline">联系</span>
                <span class="footer-title">我们</span>
              </div>
              <!-- Frame 209：邮箱 + 地址（row · gap 32） -->
              <div class="footer-contact-row">
                <span class="footer-contact-item">
                  <span class="footer-icon" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2 3.5C2 2.94772 2.44772 2.5 3 2.5H11C11.5523 2.5 12 2.94772 12 3.5V10.5C12 11.0523 11.5523 11.5 11 11.5H3C2.44772 11.5 2 11.0523 2 10.5V3.5Z" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
                      <path d="M2.5 3.8L7 7.2L11.5 3.8" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </span>
                  <span class="footer-text">{{ contact.email }}</span>
                </span>
                <span class="footer-contact-item">
                  <span class="footer-icon" aria-hidden="true">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 1.5C4.34315 1.5 3 2.84315 3 4.5C3 6.8 6 10.5 6 10.5C6 10.5 9 6.8 9 4.5C9 2.84315 7.65685 1.5 6 1.5Z" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
                      <circle cx="6" cy="4.5" r="1.2" stroke="currentColor" stroke-width="1"/>
                    </svg>
                  </span>
                  <span class="footer-text">{{ contact.address }}</span>
                </span>
              </div>
            </div>

            <!-- Frame 212：友情链接列（column · gap 16） -->
            <div class="footer-col footer-col--links">
              <!-- 标题行 ─ "友情"(带 1px 下边框) + "链接" -->
              <div class="footer-title-row">
                <span class="footer-title-with-underline">友情</span>
                <span class="footer-title">链接</span>
              </div>
              <!-- Frame 209：两个友链（row · gap 32） -->
              <div class="footer-links-row">
                <a class="footer-text" href="https://segg.sh.gov.cn/" target="_blank" rel="noopener noreferrer">上海市企业走出去综合服务平台</a>
                <span class="footer-text">上海浦江数链数字科技有限公司</span>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- 下区：版权（1440×80 · #E2EDE5） -->
      <div class="footer-bar">
        <div class="footer-bar-inner">
          <!-- Frame 210 · 指导单位行 -->
          <div class="footer-guide">
            <span class="footer-guide-label">指导单位：</span>
            <span class="footer-guide-item">上海市数据局</span>
            <span class="footer-guide-gap"></span>
            <span class="footer-guide-item">宝山区政府</span>
          </div>
          <!-- Frame 1898 · 版权行 · gap 20 -->
          <div class="footer-copyright">
            <span class="footer-bar-line">©2025可信碳信息网版权所有</span>
            <span class="footer-bar-line">技术支持：上海市宝山区大数据中心</span>
            <span class="footer-bar-line">基础设施：国家区块链网络基础底座</span>
          </div>
        </div>
      </div>

    </footer>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Footer',
  computed: {
    ...mapState('settings', ['contact']),
  },
};
</script>

<style lang="less" scoped>
/* =============================================================================
 * 首页底部信息块（Figma 150904:8642 · 审核版本精确对照）
 *   Group 29：1440 × 144 · #F0F7F2
 *   版权块： 1440 × 80  · #E2EDE5
 * ============================================================================= */

.portal-footer-shell {
  flex-shrink: 0;
  width: 100%;
  background: #f0f7f2;
}

.site-footer {
  display: block;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

/* ── 上区：底部信息 ─────────────────────────────  1440×144 · #F0F7F2 ── */

.footer-main {
  background: #f0f7f2;
}

.footer-main-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;            /* Figma 底部信息 padding */
}

.footer-frame {
  display: flex;
  align-items: center;            /* Figma 底部信息 align-items: center */
  justify-content: space-between; /* Figma Frame 235 justify-content: space-between */
  box-sizing: border-box;
  width: 100%;
}

/* ── 列通用样式 ── */

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;            /* 列内内容居中 */
}

/* Frame 213：联系我们列 · column · gap 10 */
.footer-col--contact {
  flex: 0 1 auto;
  row-gap: 10px;
}

/* Frame 212：友情链接列 · column · gap 16 */
.footer-col--links {
  flex: 0 1 auto;
  row-gap: 10px;
}

/* ── 标题行（Frame 208） ─ row ──────────────────────  h:28 ── */

.footer-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 6px;               /* Figma Frame 1900 padding 0 0 6px */
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin-left: -10px;
}

.footer-title-with-underline {
  font-weight: 600;
  border-bottom: 1px solid #000000;
  padding-bottom: 0;
  line-height: 22px;
}

.footer-title {
  font-weight: 600;
  line-height: 22px;
}

/* ── Frame 209：内容行 ──────────────────────────────  h:14/20 ── */

/* 联系我们：邮箱 + 地址 · row · gap 32 */
.footer-contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 32px;
  font-size: 0;
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
}

.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #555555;
  line-height: 0;
}

/* 友情链接：两个链接 · row · gap 32 */
.footer-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 32px;
  font-size: 0;
}

/* ── 文字通用样式 ── */

.footer-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #555555;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}

a.footer-text {
  cursor: pointer;
  transition: color 0.2s ease;

  &:hover {
    color: #00b96b;
  }
}

/* ── 下区：版权 ──────────────────────────────────  1440×80 · #E2EDE5 ── */

.footer-bar {
  background: #e2ede5;
}

.footer-bar-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 0;                /* Figma Frame 221 padding 16 0 */
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 8px;                   /* Figma gap 8 */
}

/* 指导单位行 · Frame 210 */
.footer-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
}

.footer-guide-label,
.footer-guide-item {
  font-weight: 400;
}

.footer-guide-gap {
  display: inline-block;
  width: 10px;
  flex-shrink: 0;
}

/* 版权行 · Frame 1898 · gap 20 */
.footer-copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;               /* Figma gap 20 */
  white-space: nowrap;
}

.footer-bar-line {
  font-size: 14px;                /* Figma style_ERXFUQ 14px */
  font-weight: 400;
  line-height: 20px;
  color: #555555;
}

/* ── 响应式 ────────────────────────────────────────── */

@media screen and (max-width: 1279px) {
  .footer-frame {
    flex-direction: column;
    row-gap: 28px;
  }

  .footer-col--contact,
  .footer-col--links {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .footer-main-inner {
    padding: 32px 16px;
  }

  .footer-frame {
    row-gap: 24px;
  }

  .footer-contact-row {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
  }

  .footer-links-row {
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
  }

  .footer-bar-inner {
    padding: 12px 0;
  }

  .footer-guide {
    flex-wrap: wrap;
  }

  .footer-guide-gap {
    display: none;
  }

  .footer-copyright {
    flex-direction: column;
    row-gap: 4px;
  }

  .footer-bar-line {
    white-space: normal;
    text-align: center;
  }
}
</style>
