<template>
  <div class="footer-container">
    <div class="footer-content">
      <!-- 左侧内容区域 -->
      <div class="footer-left">
        <!-- 上层：Logo图标 -->
        <div class="footer-logos">
          <img src="/logo/logo2.png" alt="Logo 1" class="footer-logo-img" />
          <img src="/logo/logo3.png" alt="Logo 2" class="footer-logo-img" />
        </div>
        <!-- 下层：标题文字 -->
        <div class="footer-title">
          {{ t('footer.title') }}
        </div>
      </div>

      <!-- 中间分隔线 -->
      <div class="footer-divider"></div>

      <!-- 右侧认证区域 -->
      <div class="footer-right">
        <div class="certification-section">
          <!-- 认证标志 -->
          <div class="certification-logo">
            <img src="/logo/logo4.png" alt="认证标志" class="cert-logo-img" />
          </div>
          <!-- 认证信息 -->
          <div class="certification-info">
            <div class="cert-line">
              <span class="cert-label">{{ t('footer.recordNumber') }}</span>
              <span class="cert-value">{{ t('footer.icpRecord') }}</span>
            </div>
            <div class="cert-line">
              <span class="cert-label">{{ t('footer.address') }}</span>
              <span class="cert-value">{{ t('footer.address1') }}</span>
            </div>
            <div class="cert-line">
              <span class="cert-label">{{ t('footer.address') }}</span>
              <span class="cert-value">{{ t('footer.address2') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<style scoped>
.footer-container {
  background: linear-gradient(to right, #37CBEB, #0088D1);
  width: 100%;
  min-height: 225px;
  height: auto;
  display: flex;
  align-items: center;
  padding: 40px 0;
}

.footer-content {
  width: 100%;
  max-width: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 左侧内容区域 */
.footer-left {
  position: absolute;
  right: calc(50% + 78px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  max-width: calc(50% - 100px);
}

.footer-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.footer-title {
  color: white;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
}

/* 中间分隔线 */
.footer-divider {
  width: 1px;
  height: 140px;
  background-color: #FFFFFF;
  opacity: 0.5;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 右侧认证区域 */
.footer-right {
  position: absolute;
  left: calc(50% + 78px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: calc(50% - 100px);
}

.certification-section {
  display: flex;
  align-items: center;
  gap: 25px;
}

.certification-logo {
  flex-shrink: 0;
}

.cert-logo-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.certification-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cert-line {
  color: white;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.cert-label {
  flex-shrink: 0;
  opacity: 1;
}

.cert-value {
  opacity: 1;
  flex: 1;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .footer-content {
    padding: 0 20px;
    gap: 30px;
  }

  .footer-title {
    font-size: 16px;
  }

  .cert-logo-img {
    height: 50px;
    width: 50px;
  }
}

@media (max-width: 768px) {
  .footer-container {
    padding: 16px 0;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 16px;
  }

  .footer-logo-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-title {
    font-size: 14px;
  }

  .certification-section {
    gap: 16px;
  }

  .cert-logo-img {
    height: 45px;
    width: 45px;
  }

  .cert-line {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .footer-container {
    padding: 12px 0;
  }

  .footer-content {
    padding: 0 12px;
    gap: 16px;
  }

  .footer-logos {
    gap: 8px;
  }

  .footer-logo-img {
    height: 32px;
  }

  .footer-title {
    font-size: 13px;
  }

  .certification-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cert-logo-img {
    height: 40px;
    width: 40px;
  }

  .cert-line {
    font-size: 10px;
  }
}
</style>
