---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import Hero from '../components/Hero.astro';
import CTA from '../components/CTA.astro';
---

<BaseLayout
  title="下载 - 龙德AI学习"
  description="龙德AI学习 Mac 版下载，敬请期待。"
>
  <Header />
  <main>
    <Hero
      title="Mac 应用"
      subtitle="龙德AI学习 Mac 版正在开发中"
    />

    <section class="download-section">
      <div class="download-card">
        <div class="icon">
          <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="8" y="8" width="48" height="48" rx="8" stroke="currentColor" stroke-width="2"/>
            <path d="M24 28c0-4.418 3.582-8 8-8s8 3.582 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <circle cx="32" cy="38" r="4" fill="currentColor"/>
          </svg>
        </div>
        <h2>即将上线</h2>
        <p>Mac 版应用正在积极开发中，请先加入等待名单获取最新消息。</p>
        <div class="version-info">
          <span>支持 macOS 12+</span>
        </div>
        <CTA
          title="加入等待名单"
          href="/waitlist"
          variant="primary"
        />
      </div>
    </section>
  </main>
  <Footer />
</BaseLayout>

<style>
  .download-section {
    padding: 0 var(--page-padding) 4rem;
  }

  .download-card {
    max-width: 400px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: var(--color-bg-secondary);
    border-radius: 16px;
    text-align: center;
  }

  .icon {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
  }

  .download-card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.75rem;
  }

  .download-card p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .version-info {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .version-info span {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding: 0.375rem 0.875rem;
    background: var(--color-bg);
    border-radius: 4px;
  }
</style>