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

const changelog = [
  {
    version: 'v0.1.0',
    date: '2024年5月4日',
    changes: ['等待名单页面上线', '基础官网框架搭建'],
    status: 'planning'
  }
];
---

<BaseLayout
  title="更新日志 - 知习"
  description="知习的最新更新和开发进度。"
>
  <Header />
  <main class="animate-page-enter">
    <Hero
      title="更新日志"
      subtitle="产品开发进度与更新记录"
    />

    <section class="changelog-section">
      <div class="changelog-container">
        {changelog.map(item => (
          <div class="changelog-item">
            <div class="version-header">
              <span class="version">{item.version}</span>
              <span class="date">{item.date}</span>
              <span class:list={['status', item.status]}>{item.status === 'planning' ? '计划中' : item.status}</span>
            </div>
            <ul class="changes">
              {item.changes.map(change => (
                <li>{change}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  </main>
  <Footer />
</BaseLayout>

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

  .changelog-container {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .changelog-item {
    padding: 1.5rem;
    background: var(--color-bg-secondary);
    border-radius: 12px;
  }

  .version-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .version {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }

  .status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 500;
  }

  .status.planning {
    background: #e8f4fd;
    color: #0071e3;
  }

  .status.current {
    background: #d4edda;
    color: #28a745;
  }

  .changes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .changes li {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    padding-left: 1.25rem;
    position: relative;
  }

  .changes li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-text-secondary);
  }
</style>