<template>
  <div class="home-page">
    <header class="navbar">
      <div class="container nav-inner">
        <div class="logo">API计费系统</div>
        <nav class="nav-buttons">
          <button class="btn btn-outline" @click="goToLogin">登录</button>
          <button class="btn btn-primary" @click="goToRegister">注册</button>
        </nav>
      </div>
    </header>

    <main>
      <section class="hero">
        <div class="container hero-inner">
          <div class="hero-text">
            <h1>用更少的成本，掌控更多的调用</h1>
            <p class="lead">实时计费与可视化报表，清晰明了的 API 使用与费用管理，帮助你把注意力放回业务。</p>

            <div class="cta-row">
              <button class="btn btn-primary large" @click="goToRegister">立即开始 — 免费试用</button>
              <button class="btn btn-ghost" @click="goToLogin">查看演示</button>
            </div>

            <ul class="kpis" aria-hidden="true">
              <li><strong>100k+</strong><span>次/天 监控</span></li>
              <li><strong>99.99%</strong><span>可用性 SLA</span></li>
              <li><strong>企业级</strong><span>安全与权限</span></li>
            </ul>
          </div>

          <div class="hero-visual" aria-hidden="true">
            <!-- 简洁、安全、不透明的占位插画 -->
            <svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
              <rect x="0" y="0" width="480" height="320" rx="12" fill="#ffffff"/>
              <g transform="translate(24,24)" fill="none" stroke="#e6f0ff" stroke-width="10" stroke-linecap="round">
                <path d="M0 64h200" opacity="0.95"/>
                <path d="M0 120h160" opacity="0.75"/>
                <path d="M0 176h220" opacity="0.6"/>
              </g>
              <circle cx="380" cy="80" r="44" fill="#eef9ff"/>
              <circle cx="340" cy="220" r="72" fill="#f7f0ff"/>
            </svg>
          </div>
        </div>
      </section>

      <section class="plans">
        <div class="container">
          <h2>套餐介绍</h2>
          <div class="plan-list">
            <article class="plan">
              <div class="plan-head">
                <h3>基础版</h3>
                <span class="tag">入门</span>
              </div>
              <p class="desc">适合个人开发者</p>
              <ul class="features">
                <li>1000 次/月</li>
                <li>限速：10 次/分钟</li>
              </ul>
              <div class="price">免费</div>
              <button class="btn btn-outline">开始使用</button>
            </article>

            <article class="plan featured">
              <div class="plan-head">
                <h3>专业版</h3>
                <span class="tag pro">推荐</span>
              </div>
              <p class="desc">适合成长型团队</p>
              <ul class="features">
                <li>10 万次/月</li>
                <li>限速：100 次/分钟</li>
                <li>报表与告警</li>
              </ul>
              <div class="price">¥49 / 月</div>
              <button class="btn btn-primary">选择专业版</button>
            </article>

            <article class="plan">
              <div class="plan-head">
                <h3>企业版</h3>
                <span class="tag">商务</span>
              </div>
              <p class="desc">为大型团队与 SLA 定制</p>
              <ul class="features">
                <li>不限调用</li>
                <li>专属支持 & SLA</li>
              </ul>
              <div class="price">¥199 / 月</div>
              <button class="btn btn-outline">联系我们</button>
            </article>
          </div>
        </div>
      </section>

      <section class="about">
        <div class="container">
          <h2>关于我们</h2>
          <p>我们是一支专注于 API 管理与计费的技术团队，提供高性能、低成本且可扩展的方案，帮助开发者聚焦产品价值。</p>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="container foot-inner">
        <div>© 2025 API计费系统</div>
        <div class="foot-links">
          <a href="#" @click.prevent>隐私</a>
          <a href="#" @click.prevent>服务条款</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  methods: {
    goToLogin() { this.$router.push("/auth/login"); },
    goToRegister() { this.$router.push("/auth/register"); }
  }
};
</script>

<style scoped>
/* 明确变量（局部使用） */
.home-page {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f1720;
  --muted: #6b7280;
  --primary: #0b75ff;
  --primary-dark: #0857c6;
  --shadow: rgba(15,23,32,0.06);

  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* navbar */
.navbar {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(15,23,32,0.04);
  background: transparent;
}

.nav-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 0;
}

.logo {
  font-weight:700;
  font-size:18px;
  color:var(--text);
}

/* buttons */
.nav-buttons { display:flex; gap:12px; align-items:center; }

.btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-weight:600;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: transform .12s ease, box-shadow .12s ease;
  color:var(--text);
  background:transparent;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(90deg,var(--primary),var(--primary-dark));
  color:#fff;
  box-shadow: 0 8px 20px rgba(11,117,255,0.12);
}

.btn-outline {
  background: var(--card);
  border: 1px solid rgba(15,23,32,0.06);
  box-shadow: 0 8px 16px var(--shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--primary-dark);
  border: 1px dashed rgba(11,117,255,0.12);
}

/* hero */
.hero {
  padding: 56px 0 40px;
}

.hero-inner {
  display:flex;
  gap:28px;
  align-items:center;
}

.hero-text {
  flex:1;
  max-width:640px;
}

.hero h1 {
  font-size:34px;
  margin:0 0 10px;
  line-height:1.05;
  color:var(--text);
  /* 不使用大面积模糊阴影 */
  text-shadow: none;
}

.lead { color:var(--muted); margin:0 0 18px; font-size:16px; }

.cta-row { display:flex; gap:12px; align-items:center; margin-bottom:16px; }

.btn.large { padding:12px 20px; border-radius:12px; font-size:15px; }

/* KPI row */
.kpis { display:flex; gap:18px; margin-top:12px; list-style:none; padding:0; color:var(--muted); font-size:13px; }
.kpis li strong { display:block; color:var(--text); font-size:15px; }

/* hero-visual */
.hero-visual {
  width:440px;
  height:260px;
  border-radius:12px;
  background: var(--card);
  box-shadow: 0 18px 40px rgba(15,23,32,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,32,0.04);
}

/* plans */
.plans { padding:44px 0; }

.plans h2 {
  text-align:center;
  font-size:22px;
  margin-bottom:24px;
  color:var(--text);
}

.plan-list {
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}

.plan {
  width:300px;
  background:var(--card);
  border-radius:12px;
  padding:18px;
  box-shadow: 0 10px 30px var(--shadow);
  border:1px solid rgba(15,23,32,0.03);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(15,23,32,0.08);
}

.plan-head { display:flex; justify-content:space-between; align-items:center; }

.plan h3 { margin:0; font-size:18px; color:var(--text); }

.tag {
  font-size:12px;
  color:var(--muted);
  background:#f7fafc;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(15,23,32,0.03);
}

.tag.pro {
  background: linear-gradient(90deg, rgba(11,117,255,0.12), rgba(126,231,255,0.06));
  color:var(--primary-dark);
  font-weight:700;
}

.desc { color:var(--muted); margin:0; font-size:14px; }
.features { list-style:none; padding:0; margin:8px 0; color:var(--muted); font-size:14px; }
.price { font-weight:800; font-size:18px; color:var(--text); margin-top:auto; }

/* about & footer */
.about { padding:36px 0; text-align:center; color:var(--muted); }
.footer { padding:18px 0; border-top:1px solid rgba(15,23,32,0.04); color:var(--muted); }

.foot-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1100px; margin:0 auto; }

/* small screens */
@media (max-width:1000px) {
  .hero-inner { flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  .hero-visual { width:100%; height:180px; border-radius:10px; }
  .plan-list { gap:14px; }
}

@media (max-width:520px) {
  .container { padding:0 14px; }
  .hero h1 { font-size:22px; }
  .cta-row { flex-direction:column; align-items:stretch; }
  .btn.large { width:100%; }
  .plan { width:100%; }
  .foot-inner { flex-direction:column; text-align:center; gap:10px; }
}
</style>
