{% extends "madga/blog/base.html" %}
{% load madga_tags %}
{% block title %}{{ site.name }}{% endblock %}

{% block content %}
{# Editorial: hero post + 4-up grid. Uses real recent posts (not HomepageBlocks). #}
{% with posts=posts|default:'' %}
<section class="max-w-6xl mx-auto px-4 sm:px-6 py-10 sm:py-16">
  <header class="mb-12 sm:mb-16 text-center">
    <h1 class="font-heading text-4xl sm:text-6xl font-semibold tracking-tight leading-[1.05]">{{ site.name }}</h1>
    {% if site.description %}<p class="mt-4 text-lg sm:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed">{{ site.description }}</p>{% endif %}
  </header>

  {% if posts %}
    {% for post in posts %}
      {% if forloop.first %}
        {# Hero post — full width with featured image #}
        <a href="/blog/{{ post.slug }}/" class="group block mb-12 sm:mb-16 grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-10 items-center">
          <div class="aspect-[4/3] overflow-hidden rounded-xl"
               style="background:linear-gradient(135deg, var(--color-accent, #6C63FF), #ff7a59);">
            {% if post.featured_image %}
              <img src="{{ post.featured_image.file.url }}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            {% endif %}
          </div>
          <div>
            <div class="text-xs uppercase tracking-[0.2em] text-slate-500 mb-3">
              {% if post.category %}<span style="color:{{ post.category.color }};">{{ post.category.name }}</span>&nbsp;·&nbsp;{% endif %}
              <time>{{ post.published_at|date:"j M Y" }}</time>
            </div>
            <h2 class="font-heading text-3xl sm:text-4xl font-semibold leading-tight group-hover:text-accent transition-colors">{{ post.title }}</h2>
            {% if post.excerpt %}<p class="mt-4 text-slate-600 dark:text-slate-400 leading-relaxed">{{ post.excerpt }}</p>{% endif %}
          </div>
        </a>
      {% endif %}
    {% endfor %}

    {% if posts|length > 1 %}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 border-t border-slate-100 dark:border-slate-800 pt-12">
        {% for post in posts %}
          {% if not forloop.first %}{% if forloop.counter <= 5 %}
            <a href="/blog/{{ post.slug }}/" class="group block">
              <div class="aspect-[4/3] overflow-hidden rounded-lg mb-3"
                   style="background:linear-gradient(135deg, var(--color-accent, #6C63FF), #ff7a59);">
                {% if post.featured_image %}
                  <img src="{{ post.featured_image.file.url }}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                {% endif %}
              </div>
              <div class="text-[10px] uppercase tracking-[0.18em] text-slate-500 mb-1">
                {% if post.category %}<span style="color:{{ post.category.color }};">{{ post.category.name }}</span>{% else %}<time>{{ post.published_at|date:"j M" }}</time>{% endif %}
              </div>
              <h3 class="font-heading text-base font-semibold leading-snug group-hover:text-accent transition-colors">{{ post.title }}</h3>
            </a>
          {% endif %}{% endif %}
        {% endfor %}
      </div>
    {% endif %}
  {% else %}
    <p class="text-center py-12 text-slate-500">Aún no hay posts. Crea uno en el Studio.</p>
  {% endif %}
</section>
{% endwith %}
{% endblock %}