<script setup lang="ts">
import { siteInfo } from '~/data/site'
</script>

<template>
  <aside class="kefu-widget" aria-label="客服联系方式">
    <a class="widget-item" :href="`tel:${siteInfo.phone}`" aria-label="拨打电话">
      <strong>电话咨询</strong>
      <span>{{ siteInfo.phone }}</span>
    </a>
    <a
      class="widget-item"
      :href="`http://wpa.qq.com/msgrd?v=3&uin=${siteInfo.qq}&site=qq&menu=yes`"
      target="_blank"
      rel="noreferrer"
      aria-label="打开QQ咨询"
    >
      <strong>QQ 咨询</strong>
      <span>{{ siteInfo.qq }}</span>
    </a>
    <div class="widget-item qr-item">
      <strong>微信公众号</strong>
      <img :src="siteInfo.wechatOfficialImage" alt="微信公众号二维码">
    </div>
  </aside>
</template>

<style scoped>
.kefu-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  display: grid;
  gap: 12px;
}

.widget-item {
  min-width: 148px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(16, 37, 65, 0.96);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.widget-item strong,
.widget-item span {
  display: block;
  color: inherit;
}

.qr-item img {
  width: 96px;
  margin-top: 8px;
  border-radius: 10px;
  background: #fff;
}

@media (max-width: 767px) {
  .kefu-widget {
    right: 10px;
    bottom: 10px;
  }

  .widget-item {
    min-width: 112px;
    padding: 10px;
  }

  .qr-item img {
    width: 72px;
  }
}
</style>
