<template>
  <section class="project-links-section">
    <div class="project-links-card">
      <div class="project-links-left">
        <div class="project-links-badge">项目源码</div>
        <h4 class="project-links-title">72QishierPlayer 开源仓库</h4>
        <p class="project-links-desc">
          包含前端播放器、后端采集服务、数据缓存、播放记录与剧集列表逻辑，方便部署与二次开发。
        </p>

        <div class="project-links-url">
          <span class="label">仓库地址：</span>
          <a
              :href="gitUrl"
              target="_blank"
              rel="noopener noreferrer"
              class="git-url-link"
          >
            {{ gitUrl }}
          </a>
        </div>

        <div class="project-links-code">
          <code>git clone {{ gitUrl }}</code>
        </div>
      </div>

      <div class="project-links-right">
        <a
            class="btn btn-dark btn-sm px-3"
            :href="gitUrl"
            target="_blank"
            rel="noopener noreferrer"
        >
          打开仓库
        </a>

        <button class="btn btn-outline-secondary btn-sm px-3" @click="copyGitUrl">
          复制链接
        </button>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const gitUrl = 'https://git.a-hxin.cn/ahxin/72QishierPlayer.git'

async function copyGitUrl() {
  try {
    await navigator.clipboard.writeText(gitUrl)
    alert('Git 仓库链接已复制')
  } catch {
    alert('复制失败，请手动复制')
  }
}
</script>

<style scoped>
.project-links-section {
  margin-top: 18px;
}

.project-links-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.project-links-left {
  flex: 1;
  min-width: 0;
}

.project-links-badge {
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.1);
}

.project-links-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #212529;
}

.project-links-desc {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: #6c757d;
}

.project-links-url {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-all;
}

.project-links-url .label {
  color: #6c757d;
}

.git-url-link {
  color: #0d6efd;
  text-decoration: none;
}

.git-url-link:hover {
  text-decoration: underline;
}

.project-links-code {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1f3f5;
  overflow-x: auto;
}

.project-links-code code {
  color: #212529;
  font-size: 13px;
  white-space: nowrap;
}

.project-links-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .project-links-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-links-right {
    width: 100%;
  }
}
</style>
