---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
---

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>下载 - 知习</title>
  <meta name="description" content="下载知习 App，支持 iPhone、Android、Mac 和 Web 多端使用。" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
</head>
<body style="background-color: #faf9ff; color: #131b2c; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; position: relative;">

  <Header />

  <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, #d2daf1 1px, transparent 1px); background-size: 24px 24px; opacity: 0.25; pointer-events: none; z-index: -1;"></div>

  <main class="animate-page-enter" style="flex: 1; padding-top: 140px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px;">

    <!-- Hero -->
    <section style="max-width: 720px; margin: 0 auto 64px; text-align: center;">
      <h1 style="font-family: 'Manrope', sans-serif; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 16px;">下载知习</h1>
      <p style="font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.7; color: #434654;">选择你的设备，开始更聪明的学习方式</p>
    </section>

    <!-- Download Cards -->
    <section style="max-width: 1000px; margin: 0 auto 80px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;" class="download-grid">

      <!-- Apple App Store -->
      <a href="#" class="download-card" style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.25rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04); text-decoration: none; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s;">
        <div style="width: 48px; height: 48px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
          <span class="material-symbols-outlined" style="font-size: 28px;">phone_iphone</span>
        </div>
        <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin: 0 0 8px;">App Store</h3>
        <p style="font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: #737686; margin: 0 0 24px; flex: 1;">iPhone / iPad 用户可通过 App Store 下载</p>
        <span class="dl-badge" style="display: inline-flex; align-items: center; gap: 8px; background: #131b2c; color: #ffffff; padding: 12px 20px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; transition: background 0.2s; align-self: flex-start;">
          <span class="material-symbols-outlined" style="font-size: 18px;">apple</span>
          即将上线
        </span>
      </a>

      <!-- Google Play / Android -->
      <a href="#" class="download-card" style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.25rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04); text-decoration: none; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s;">
        <div style="width: 48px; height: 48px; border-radius: 12px; background: #edf7ed; color: #2e7d32; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
          <span class="material-symbols-outlined" style="font-size: 28px;">android</span>
        </div>
        <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin: 0 0 8px;">Google Play</h3>
        <p style="font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: #737686; margin: 0 0 24px; flex: 1;">Android 用户可通过 Google Play 下载</p>
        <span class="dl-badge" style="display: inline-flex; align-items: center; gap: 8px; background: #131b2c; color: #ffffff; padding: 12px 20px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; transition: background 0.2s; align-self: flex-start;">
          <span class="material-symbols-outlined" style="font-size: 18px;">android</span>
          即将上线
        </span>
      </a>

      <!-- macOS -->
      <a href="#" class="download-card" style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.25rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04); text-decoration: none; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s;">
        <div style="width: 48px; height: 48px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
          <span class="material-symbols-outlined" style="font-size: 28px;">laptop_mac</span>
        </div>
        <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin: 0 0 8px;">macOS</h3>
        <p style="font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: #737686; margin: 0 0 24px; flex: 1;">支持 macOS 12 及以上版本，原生 Apple Silicon 体验</p>
        <span class="dl-badge" style="display: inline-flex; align-items: center; gap: 8px; background: #131b2c; color: #ffffff; padding: 12px 20px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; transition: background 0.2s; align-self: flex-start;">
          <span class="material-symbols-outlined" style="font-size: 18px;">download</span>
          即将上线
        </span>
      </a>

      <!-- Web -->
      <a href="https://zhixiai.com" target="_blank" class="download-card" style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.25rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04); text-decoration: none; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s;">
        <div style="width: 48px; height: 48px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
          <span class="material-symbols-outlined" style="font-size: 28px;">language</span>
        </div>
        <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin: 0 0 8px;">Web 版</h3>
        <p style="font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: #737686; margin: 0 0 24px; flex: 1;">浏览器直接使用，无需安装，随时访问</p>
        <span class="dl-badge dl-badge-live" style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #1550d3, #583dde); color: #ffffff; padding: 12px 20px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; transition: all 0.3s; box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2); align-self: flex-start;">
          <span class="material-symbols-outlined" style="font-size: 18px;">open_in_new</span>
          立即使用
        </span>
      </a>

    </section>

    <!-- Bottom CTA -->
    <section style="max-width: 600px; margin: 0 auto; text-align: center;">
      <div style="background: linear-gradient(135deg, #f1f3ff, #e9edff); border-radius: 1rem; padding: 28px 32px;">
        <p style="font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: #434654; margin: 0;">
          <span class="material-symbols-outlined" style="color: #1550d3; font-size: 18px; vertical-align: -5px; margin-right: 6px;">schedule</span>
          移动端版本正在开发中，<strong style="color: #131b2c;">Web 版已可体验</strong>。加入等待名单第一时间获取上线通知。
        </p>
      </div>
    </section>

  </main>

  <Footer />

  <style is:global>
    .download-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 32px 56px rgba(18, 26, 43, 0.08) !important;
    }

    .download-card:hover .dl-badge {
      background: #1e293b;
    }

    .download-card:hover .dl-badge-live {
      background: linear-gradient(135deg, #1a5af0, #674ff0) !important;
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(21, 80, 211, 0.35) !important;
    }

    @media (max-width: 768px) {
      .download-grid {
        grid-template-columns: 1fr !important;
      }
    }
  </style>
</body>
</html>
