{% extends "base.html" %}

{% block content %}
<div class="home">
    {# Hero Section #}
    <header class="hero hero--large">
        <div class="hero__container">
            <div class="hero__content">
                <h1 class="hero__title">{{ page.title | default(site.config.title) }}</h1>
                {% if page.metadata.get('description', '') %}
                <p class="hero__subtitle">{{ page.metadata.get('description', '') }}</p>
                {% endif %}

                {% if page.metadata.get('cta_buttons') %}
                <div class="hero__actions">
                    {% for button in page.metadata.get('cta_buttons') %}
                    <a href="{{ button.url }}"
                        class="hero__button hero__button--{{ button.style | default('primary') }}">
                        {{ button.text }}
                    </a>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
    </header>

    {# Feature Highlights #}
    {% if page.metadata.get('features') %}
    <section class="features">
        <div class="features-grid">
            {% for feature in page.metadata.get('features') %}
            <div class="feature-card">
                {% if feature.icon %}
                <div class="feature-icon">{{ feature.icon }}</div>
                {% endif %}
                <h3 class="feature-title">{{ feature.title }}</h3>
                <p class="feature-description">{{ feature.description }}</p>
                {% if feature.link %}
                <a href="{{ feature.link.url }}" class="feature-link">
                    {{ feature.link.text | default('Learn more') }} →
                </a>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# Main Content #}
    <div class="home-content prose">
        {{ content | safe }}
    </div>

    {# Quick Links Section #}
    {% if page.metadata.get('quick_links') %}
    <section class="quick-links">
        <h2>Quick Links</h2>
        <div class="quick-links-grid">
            {% for link in page.metadata.get('quick_links') %}
            <a href="{{ link.url }}" class="quick-link-card">
                {% if link.icon %}
                <div class="quick-link-icon">{{ link.icon }}</div>
                {% endif %}
                <h3>{{ link.title }}</h3>
                {% if link.description %}
                <p>{{ link.description }}</p>
                {% endif %}
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# Statistics/Metrics Section #}
    {% if page.metadata.get('stats') %}
    <section class="stats">
        <div class="stats-grid">
            {% for stat in page.metadata.get('stats') %}
            <div class="stat-card">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {# Recent Posts/Updates (if this is a blog-style home) #}
    {% if page.metadata.get('show_recent_posts') %}
    {# Use query index for O(1) lookup instead of O(n) filtering #}
    {% set blog_section = page.metadata.get('blog_section', 'blog') %}
    {% set blog_posts = site.indexes.section.get(blog_section) | resolve_pages %}
    {% set recent = blog_posts | sort_by('date', reverse=true) | limit(3) %}
    {% if recent %}
    <section class="recent-posts">
        <h2>Recent Updates</h2>
        <div class="posts-grid">
            {% for post in recent %}
            <article class="post-card">
                <h3><a href="{{ post.permalink }}">{{ post.title }}</a></h3>
                {% if post.date %}
                <time datetime="{{ post.date | date_iso }}">{{ post.date | dateformat('%B %d, %Y') }}</time>
                {% endif %}
                {% if post.metadata.get('description') %}
                <p>{{ post.metadata.get('description') }}</p>
                {% endif %}
                <a href="{{ post.permalink }}" class="read-more">Read more →</a>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    {% endif %}
</div>

{# Styles moved to assets/css/pages/home.css #}
{% endblock %}