<script setup lang="ts">
import { showContactUs } from '@/utils/contact-us';

function handleClick() {
  showContactUs({ scenario: 'regular' });
}
</script>

<template>
  <div class="contact-us-btn-container">
    <div
      class="contact-us-btn"
      title="联系我们"
      @click="handleClick"
    >
      <!-- PC端显示文字 -->
      <span class="pc-text">联系我们</span>
    </div>
  </div>
</template>

<style scoped>
.contact-us-btn-container {
  display: flex;
  align-items: center;
}

.contact-us-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  color: #409eff;
  transition: all 0.2s;
  position: relative;
  padding: 4px 8px;
  border-radius: 4px;
}

.contact-us-btn:hover {
  color: #66b1ff;
  transform: translateY(-1px);
  background-color: rgba(64, 158, 255, 0.1);
}

/* PC端文字样式 */
.pc-text {
  display: inline-block;
  position: relative;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  line-height: 1.2;
  padding: 2px 8px 2px 0;
}
</style>
