<template>
  <footer class="hkt-footer">
    <div class="footer-container">
      <!-- 联系我们 -->
      <div class="contact-section">
        <h3 class="section-title">Contact Us</h3>
        <a href="tel:0755-82565333" class="phone-number">Company Tel: 0755-82565333</a>

        <div class="address-list">
          <p class="address-item">Email: hkt@heketai.com</p>
          <p class="address-item">Sales Tel: 13670157820 (same number on WeChat)</p>
          <p class="address-item">Group Headquarters: 8F, Building 7, Kangli City, No. 66 Pingji Avenue, Longgang District, Shenzhen</p>
        </div>
        <h3 class="section-title footer-top-space">Smart Manufacturing Bases</h3>
        <div class="address-list">
          <p class="address-item">South China Region: No. 1758 Boluo Avenue West, Luoyang Subdistrict, Boluo County, Huizhou</p>
          <p class="address-item">Southwest Region: Building 18, Sci-Tech Innovation Center, Shunqing District, Nanchong</p>
        </div>
      </div>

      <!-- 关注我们 -->
      <div class="follow-section">
        <h3 class="section-title footer-top-space">Follow Us</h3>
        <div class="qrcode-group">
          <div class="qrcode-item">
            <div class="qrcode-placeholder sph"></div>
            <span class="qrcode-label">Video Channel</span>
          </div>
          <div class="qrcode-item">
            <div class="qrcode-placeholder douyin"></div>
            <span class="qrcode-label">Douyin</span>
          </div>
          <div class="qrcode-item">
            <div class="qrcode-placeholder gzh"></div>
            <span class="qrcode-label">WeChat Official Account</span>
          </div>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="copyright-section">
        <p class="copyright-text">
          Copyright © 2025 Shenzhen HKT Electronics Co., Ltd. All Rights Reserved.
          Designed by Wanhu ICP 12056215-3
        </p>
        <div class="footer-links">
          <NuxtLink to="/contact" class="footer-link">Contact Us</NuxtLink>
          <span class="link-divider">|</span>
          <a href="#" class="footer-link">Legal Notice</a>
          <span class="link-divider">|</span>
          <a href="#" class="footer-link">Partner Links</a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
// Nuxt3 组件，无需额外脚本
</script>

<style scoped lang="scss">
/* 全局重置与基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hkt-footer {
  background-color: #333333;
  color: #ffffff;
  padding: 15px 15px 15px;
}

.footer-container {
  max-width: 750px;
  margin: 0 auto;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 20px;
  height: 1px;
  background-color: #ffffff;
  transform: translateX(-50%);
}

.footer-top-space {
  margin-top: 12px;
}

.phone-number {
  display: block;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 5px;
  padding-left: 15px;
}

.address-list {
  font-size: 13px;
  line-height: 20px;
}

.address-item {
  text-align: left;
  padding-left: 15px;
}

.address-item:last-child {
  margin-bottom: 0;
}

.email {
  display: block;
  font-size: 12px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  margin-bottom: 12px;
}

.follow-section {
  margin-bottom: 12px;
}

.qrcode-group {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 12px;
  margin-top: 10px;
}

.qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
}

.qrcode-placeholder {
  width: 80px;
  height: 80px;
  background-color: #ffffff;
  border-radius: 6px;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 14px;
  background-image: url("https://via.placeholder.com/94x94/ffffff/000000?text=QR+Code");
  background-size: cover;

  &.gzh {
    background-image: url("@/assets/img/icon/f_3.png");
  }

  &.douyin {
    background-image: url("@/assets/img/icon/f_1.png");
    border-radius: 50%;
  }

  &.sph {
    background-image: url("@/assets/img/icon/f_2.png");
  }
}

.qrcode-label {
  font-size: 14px;
  text-align: center;
}

.copyright-section {
  border-top: 1px solid #444444;
  padding-top: 12px;
}

.copyright-text {
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  margin-bottom: 8px;
  color: #cccccc;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #cccccc;
}

.footer-link {
  color: #cccccc;
  text-decoration: none;
}

.link-divider {
  margin: 0 8px;
  position: relative;
  top: -2px;
}
</style>
