<script setup lang="ts">
import {
  ArrowRight,
  CircleCheck,
  Coin,
  Iphone,
  Lock,
  Pointer,
  Trophy,
} from "@element-plus/icons-vue";

const quickStats = [
  { label: "在线账号", value: "128+", desc: "覆盖热门区服" },
  { label: "最快交接", value: "3分钟", desc: "号主在线响应" },
  { label: "押金托管", value: "平台担保", desc: "归还后释放" },
];

const categories = [
  "烽火地带",
  "全面战场",
  "高哈夫币",
  "高段位",
  "低押金",
  "可包夜",
];
</script>

<template>
  <section class="pc-home page">
    <div class="anti-fraud-strip">
      <el-icon><Lock /></el-icon>
      <span
        >防骗提示：哈夫币租号仅通过平台下单与托管押金，切勿私下转账、共享验证码或点击陌生链接。</span
      >
    </div>

    <section class="pc-hero">
      <div class="pc-hero-content">
        <p class="eyebrow">Delta Force Account Rental</p>
        <h1>三角洲行动账号租赁大厅</h1>
        <p class="pc-hero-desc">
          按区服、段位、哈夫币、价格快速筛选，平台担保交接，找号更省心。
        </p>
        <div class="pc-hero-actions">
          <RouterLink class="primary-cta" to="/listings">
            立即找号
            <el-icon><ArrowRight /></el-icon>
          </RouterLink>
          <RouterLink class="secondary-cta" to="/seller/listings/create"
            >我要发布账号</RouterLink
          >
        </div>
        <div class="hero-tags">
          <span v-for="item in categories" :key="item">{{ item }}</span>
        </div>
      </div>

      <aside class="pc-action-card">
        <h2>快捷入口</h2>
        <RouterLink class="action-row" to="/orders">
          <el-icon><Pointer /></el-icon>
          <div>
            <strong>我租到的</strong>
            <span>查看交接、租赁中与归还订单</span>
          </div>
        </RouterLink>
        <RouterLink class="action-row" to="/seller/listings">
          <el-icon><Trophy /></el-icon>
          <div>
            <strong>我租出的</strong>
            <span>管理已发布账号与租客交接</span>
          </div>
        </RouterLink>
        <RouterLink class="action-row highlight" to="/seller/listings/create">
          <el-icon><Coin /></el-icon>
          <div>
            <strong>账号发布</strong>
            <span>实名认证后即可上架出租</span>
          </div>
        </RouterLink>
      </aside>
    </section>

    <div class="pc-stat-grid">
      <div v-for="item in quickStats" :key="item.label" class="pc-stat-card">
        <span>{{ item.label }}</span>
        <strong>{{ item.value }}</strong>
        <p>{{ item.desc }}</p>
      </div>
    </div>

    <section class="pc-feature-row">
      <div class="feature-card">
        <el-icon><CircleCheck /></el-icon>
        <strong>平台审核上架</strong>
        <span>账号信息、截图与价格经过审核后展示</span>
      </div>
      <div class="feature-card">
        <el-icon><Lock /></el-icon>
        <strong>押金账务留痕</strong>
        <span>订单、押金、仲裁记录全链路可追踪</span>
      </div>
      <div class="feature-card">
        <el-icon><Iphone /></el-icon>
        <strong>交接流程清晰</strong>
        <span>号主提交说明，租客确认收号与归还</span>
      </div>
    </section>
  </section>
</template>
