{% extends "base.html" %}

{% block content %}
<div class="space-y-16">
  <!-- Hero/About Section -->
  {% if home %}
  <section>
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ site.config.title }}</h1>
      <div class="h-px flex-1 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-transparent ml-6"></div>
    </div>
    <div class="prose prose-lg dark:prose-invert max-w-none prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-li:marker:text-gray-400 dark:prose-li:marker:text-gray-500 prose-ol:text-gray-600 dark:prose-ol:text-gray-300 prose-ul:text-gray-600 dark:prose-ul:text-gray-300 prose-a:text-blue-500 dark:prose-a:text-blue-400 prose-strong:text-gray-900 dark:prose-strong:text-white prose-code:text-pink-600 dark:prose-code:text-pink-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none">
      {{ home.content | safe }}
    </div>
  </section>
  {% else %}
  <section class="py-12 text-center">
    <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent">
      {{ site.config.title }}
    </h1>
    {% if site.config.description %}
    <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">{{ site.config.description }}</p>
    {% endif %}
  </section>
  {% endif %}

  <!-- Blog Posts Section -->
  {% if posts | length > 0 %}
  <section>
    <div class="flex items-center justify-between mb-8">
      <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Recent Posts</h2>
      <div class="h-px flex-1 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-transparent ml-6"></div>
    </div>

    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      {% for post in posts %}
      <article class="group relative bg-white dark:bg-gray-800/50 rounded-2xl border border-gray-200 dark:border-gray-700/50 overflow-hidden hover:shadow-xl hover:shadow-blue-500/5 dark:hover:shadow-blue-500/10 transition-all duration-300 hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-purple-500/5 dark:from-blue-500/10 dark:to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6">
          <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-3">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <time>{{ post.date | date(format="%B %d, %Y") }}</time>
          </div>
          <h3 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
            <a href="{{ site.config.base_url }}/posts/{{ post.slug }}/" class="after:absolute after:inset-0">
              {{ post.title }}
            </a>
          </h3>
          {% if post.excerpt %}
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-4 line-clamp-3">{{ post.excerpt }}</p>
          {% endif %}
          {% if post.tags | length > 0 %}
          <div class="flex flex-wrap gap-2 relative z-10">
            {% for tag in post.tags %}
            <a href="{{ site.config.base_url }}/tags/{{ tag | slugify }}/" class="px-3 py-1 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full text-xs font-medium border border-blue-100 dark:border-blue-500/20 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">{{ tag }}</a>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </article>
      {% endfor %}
    </div>

    {% if total_pages > 1 %}
    <nav class="mt-12 flex justify-center items-center gap-4">
        {% if prev_page_url %}
        <a href="{{ prev_page_url }}" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-500 transition-colors font-medium">&larr; Newer</a>
        {% endif %}
        <span class="text-gray-500 dark:text-gray-400 text-sm">Page {{ current_page }} of {{ total_pages }}</span>
        {% if next_page_url %}
        <a href="{{ next_page_url }}" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-500 transition-colors font-medium">Older &rarr;</a>
        {% endif %}
    </nav>
    {% endif %}
  </section>
  {% endif %}
</div>
{% endblock %}