<script setup lang="ts">
// 打开AI使用教程（跳转到外部链接）
function openTutorial() {
  window.open('https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde', '_blank');
}
</script>

<template>
  <div class="ai-tutorial-btn-container" data-tour="ai-tutorial-link">
    <div
      class="ai-tutorial-btn"
      title="点击跳转YiXinAI玩法指南专栏"
      @click="openTutorial"
    >
      <!-- PC端显示文字 -->
      <span class="pc-text">文档</span>
      <!-- 移动端显示图标 -->
      <svg
        class="mobile-icon w-6 h-6"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 14l9-5-9-5-9 5 9 5z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 14l6.16-3.422A12.083 12.083 0 0118 13.5c0 2.579-3.582 4.5-6 4.5s-6-1.921-6-4.5c0-.432.075-.85.198-1.244L12 14z"
        />
      </svg>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ai-tutorial-btn-container {
  display: flex;
  align-items: center;

  .ai-tutorial-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    color: #E6A23C;
    transition: all 0.2s;

    &:hover {
      color: #F1B44C;
      transform: translateY(-1px);
    }

    // PC端显示文字，隐藏图标
    .pc-text {
      display: inline;
      margin: 0 12px;
    }

    .mobile-icon {
      display: none;
    }
  }
}

// 移动端显示图标，隐藏文字
@media (max-width: 768px) {
  .ai-tutorial-btn-container {
    .ai-tutorial-btn {
      .pc-text {
        display: none;
      }

      .mobile-icon {
        display: inline;
      }
    }
  }
}
</style>
