{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/home.css' %}?v=4">
{% endblock %}

{% block content %}

{% if breaking_articles %}
<div class="breaking-ticker">
    <div class="label">BREAKING</div>
    <marquee>
        {% for article in breaking_articles %}
        <span class="ticker-item"><a href="{% url 'article_detail' article.slug %}" style="color: inherit;">{{ article.title }}</a> &nbsp;&nbsp;&nbsp;</span>
        {% endfor %}
    </marquee>
</div>
{% endif %}

<!-- Hero Section -->
{% if hero %}
<section class="hero grid" style="margin-top: 2rem;">
    <div class="hero-content" style="grid-column: span 8;">
        {% if hero.featured_image %}
        <div class="hero-image" style="background-image: url('{{ hero.featured_image.url }}'); height: 400px; background-size: cover; background-position: center; position: relative;">
            <div class="hero-overlay" style="position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, var(--ink)); padding: 2rem; color: var(--white-ink); box-sizing: border-box;">
                <span class="category-label" style="color: {{ hero.category.accent_color }}; font-family: var(--font-label); text-transform: uppercase; font-size: 0.8rem;">{{ hero.category.name }}</span>
                <h2 style="font-size: 2.5rem; margin: 0.5rem 0;"><a href="{% url 'article_detail' hero.slug %}" style="color: inherit;">{{ hero.title }}</a></h2>
                <p class="excerpt" style="font-family: var(--font-body); font-size: 1.1rem; opacity: 0.9;">{{ hero.excerpt }}</p>
                <div class="meta" style="font-family: var(--font-label); font-size: 0.8rem; margin-top: 1rem;">By {{ hero.author.name }} &nbsp;|&nbsp; {{ hero.published_at|date:"M j, Y" }}</div>
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- Sidebar: Latest -->
    <div class="sidebar" style="grid-column: span 4; border-left: 1px solid var(--border); padding-left: 1.5rem;">
        <h3 class="section-title" style="border-bottom: 2px solid var(--border); padding-bottom: 0.5rem;">Latest Articles</h3>
        <ul class="latest-list clean-list" style="margin-top: 1rem;">
            {% for article in latest %}
            <li style="margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem;">
                <span class="date" style="font-family: var(--font-label); font-size: 0.7rem; color: var(--muted); display: block;">{{ article.published_at|date:"M j" }}</span>
                <a href="{% url 'article_detail' article.slug %}" style="font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; display: block; margin-top: 0.3rem;">{{ article.title }}</a>
            </li>
            {% endfor %}
        </ul>
        {% include 'partials/_newsletter_cta.html' %}
    </div>
</section>
{% endif %}

<div class="ornament"></div>

<!-- Featured Section -->
<section class="featured-grid grid">
    {% for article in featured %}
        <div style="grid-column: span 4;">
            {% include 'partials/_article_card.html' with article=article %}
        </div>
    {% endfor %}
</section>

<!-- Category Spotlights -->
{% for category, articles in categories_with_articles %}
<section class="dark-section">
    <div class="dark-section-header">
        <span class="star">✦</span> {{ category.name }} <span class="star">✦</span>
    </div>
    
    <div class="dark-grid">
        {% for article in articles|slice:":4" %}
        <div class="dark-card">
            <div class="dark-card-meta">
                {{ article.published_at|date:"M Y" }} &middot; {{ article.author.name }}
            </div>
            <h3 class="dark-card-title">
                <a href="{% url 'article_detail' article.slug %}">{{ article.title }}</a>
            </h3>
            <p class="dark-card-excerpt">
                {{ article.excerpt|truncatewords:20 }}
            </p>
            <a href="{% url 'article_detail' article.slug %}" class="dark-card-btn">
                Read Details &rarr;
            </a>
        </div>
        {% endfor %}
    </div>
</section>
{% endfor %}

{% endblock %}