<script setup>
import { ref } from "vue";
import { Icon } from "@iconify/vue";
const showSideButtons = ref(true);

const handleFreeExperience = () => {
  // 免费体验按钮点击事件处理
  console.log("免费体验点击");
};

const handleOnlineConsultation = () => {
  // 在线咨询按钮点击事件处理
  console.log("在线咨询点击");
};
</script>

<template>
  <div v-if="showSideButtons" class="side-buttons">
    <button
      class="button-item free-experience"
      @click="handleFreeExperience"
      aria-label="免费体验"
    >
      <Icon icon="mynaui:edit-one" width="24" height="24" />
      <span>免费体验</span>
    </button>

    <button
      class="button-item online-consultation"
      @click="handleOnlineConsultation"
      aria-label="在线咨询"
    >
      <Icon icon="mynaui:headphones" width="24" height="24" />
      <span>在线咨询</span>
    </button>
  </div>
</template>

<style scoped>
.side-buttons {
  position: fixed;
  right: 10px;
  bottom: 40%;
  z-index: 1000;
  display: flex;
  border-radius: 15px;
  height: 200px;
  flex-direction: column;
  /* gap: 12px; */
  width: 55px;
}

.button-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px;
  /* border-radius: 8px; */
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-size: 14px;

  color: #333;
  text-decoration: none;
}

.button-item:hover {
  /* transform: translateY(-2px); */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background: #014198;
  color: aliceblue;
}

.button-item:active {
  transform: translateY(0);
}

.free-experience {
  /* background: linear-gradient(135deg, #00a9ff, #007aff); */
  color: #6a6a6a;
}

.online-consultation {
  /* background: linear-gradient(135deg, #00a9ff, #007aff); */
  color: #6a6a6a;
}

@media (max-width: 768px) {
  .side-buttons {
    right: 12px;
    bottom: 12px;
  }

  .button-item {
    padding: 10px 12px;
    font-size: 13px;
  }

  .button-item svg {
    width: 18px;
    height: 18px;
  }
}
</style>
