{{ define "main" }}
<!-- Hero Section -->
<section class="py-16 md:py-24 text-center">
  <div class="max-w-3xl mx-auto px-4">
    <div class="mb-6">
      <span class="text-5xl md:text-6xl">🜁</span>
    </div>
    <h1 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-primary">
      Val's Dreamscape Journal
    </h1>
    <p class="text-lg md:text-xl text-secondary mb-2 font-serif italic">
      "记录多元宇宙的梦幻旅程"
    </p>
    <p class="text-secondary max-w-xl mx-auto">
      从真实世界的隐秘角落，到异世界的魔法大陆，再到宇宙深处的星际漫游。
      这里是一切想象的栖息地。
    </p>
  </div>
</section>

<!-- Content Categories -->
<section class="py-8 border-t border-border">
  <div class="max-w-4xl mx-auto px-4">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      {{ range .Site.Menus.main }}
      {{ if and (ne .Identifier "home") (ne .Identifier "about") }}
      <a href="{{ .URL }}" class="card p-4 text-center group">
        <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">
          {{ if eq .Identifier "journey" }}🌍
          {{ else if eq .Identifier "sketch" }}✨
          {{ else if eq .Identifier "gallery" }}📷
          {{ else if eq .Identifier "essay" }}📜
          {{ else }}📝{{ end }}
        </div>
        <h3 class="font-medium text-primary">{{ .Name }}</h3>
      </a>
      {{ end }}
      {{ end }}
    </div>
  </div>
</section>

<!-- Recent Posts -->
<section class="py-12">
  <div class="max-w-4xl mx-auto px-4">
    <div class="flex items-center justify-between mb-8">
      <h2 class="text-2xl font-serif font-bold text-primary">最新记录</h2>
      <a href="/journey/" class="text-sm text-accent hover:underline">查看全部 →</a>
    </div>
    
    <div class="space-y-6">
      {{ range first 5 (where .Site.RegularPages "Type" "in" (slice "journey" "sketch" "gallery" "essay")) }}
      <article class="card p-6">
        <div class="flex flex-col md:flex-row md:items-start gap-4">
          <!-- Date & Category -->
          <div class="flex-shrink-0 md:w-24 text-sm">
            <div class="text-tertiary">{{ .Date.Format "01/02" }}</div>
            <div class="text-accent text-xs mt-1">
              {{ range .Params.categories }}
              {{ if eq . "journey" }}旅程
              {{ else if eq . "sketch" }}速记
              {{ else if eq . "gallery" }}图志
              {{ else if eq . "essay" }}随笔
              {{ else }}{{ . }}{{ end }}
              {{ end }}
            </div>
          </div>
          
          <!-- Content -->
          <div class="flex-1">
            <h3 class="text-xl font-serif font-semibold mb-2">
              <a href="{{ .RelPermalink }}" class="text-primary hover:text-accent transition-colors">
                {{ .Title }}
              </a>
            </h3>
            {{ with .Description }}
            <p class="text-secondary text-sm mb-3">{{ . }}</p>
            {{ end }}
            
            <!-- Tags -->
            {{ with .Params.tags }}
            <div class="flex flex-wrap gap-2 mt-3">
              {{ range first 3 . }}
              <span class="tag">{{ . }}</span>
              {{ end }}
            </div>
            {{ end }}
            
            <!-- Meta -->
            <div class="flex items-center gap-4 mt-3 text-xs text-tertiary">
              {{ if .Params.reading_time }}
              <span>📖 {{ .ReadingTime }} 分钟阅读</span>
              {{ end }}
              {{ with .Params.location }}
              <span>📍 {{ . }}</span>
              {{ end }}
            </div>
          </div>
        </div>
      </article>
      {{ end }}
    </div>
  </div>
</section>

<!-- Timeline Preview -->
<section class="py-12 border-t border-border">
  <div class="max-w-4xl mx-auto px-4">
    <h2 class="text-2xl font-serif font-bold text-primary mb-8">旅程时间线</h2>
    
    <div class="relative">
      <!-- Timeline Line -->
      <div class="absolute left-4 md:left-8 top-0 bottom-0 w-px bg-border"></div>
      
      <!-- Timeline Items -->
      <div class="space-y-8">
        {{ range first 4 (where .Site.RegularPages "Type" "in" (slice "journey" "sketch")).ByDate.Reverse }}
        <div class="relative pl-12 md:pl-20">
          <!-- Dot -->
          <div class="absolute left-2 md:left-6 top-1.5 w-4 h-4 rounded-full bg-accent border-4 border-primary"></div>
          
          <!-- Content -->
          <div class="text-sm text-tertiary mb-1">{{ .Date.Format "2006年1月2日" }}</div>
          <a href="{{ .RelPermalink }}" class="text-primary hover:text-accent font-medium transition-colors">
            {{ .Title }}
          </a>
          {{ with .Params.location }}
          <div class="text-xs text-secondary mt-1">📍 {{ . }}</div>
          {{ end }}
        </div>
        {{ end }}
      </div>
    </div>
    
    <div class="mt-8 pl-12 md:pl-20">
      <a href="/sketch/" class="text-sm text-accent hover:underline">查看完整时间线 →</a>
    </div>
  </div>
</section>

<!-- About CTA -->
<section class="py-16 border-t border-border">
  <div class="max-w-2xl mx-auto px-4 text-center">
    <h2 class="text-xl font-serif font-bold text-primary mb-4">关于 Val</h2>
    <p class="text-secondary mb-6">
      一个穿梭于多元宇宙的观察者，用文字和图像记录那些只存在于梦境与想象之间的风景。
    </p>
    <a href="/about/" class="inline-flex items-center px-6 py-3 bg-accent text-white rounded-lg hover:bg-accent-hover transition-colors">
      了解更多
    </a>
  </div>
</section>
{{ end }}