{% extends "base.html" %}

{#
================================================================================
Site Home Page Template (Kida-Native)
================================================================================

Landing page for the site with hero, features, stats, and recent posts.

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- Pipeline operator (|>) for filter chains
- {% def %} for reusable components
- {% cache %} for recent posts computation

USAGE:
Auto-selected for site home page (index.html)
================================================================================
#}

{# =============================================================================
POST CARD COMPONENT
============================================================================= #}
{% def post_card(post) %}
{% let post_meta = post?.metadata ?? {} %}
{% let post_image = post_meta?.image ?? post_meta?.cover ?? '' %}
{% let post_title = post?.title ?? 'Untitled' %}
{% let post_href = post?.href ?? '#' %}
{% let post_date = post?.date %}
{% let post_desc = post_meta?.description ?? post?.excerpt ?? '' %}

<article class="post-card gradient-border fluid-combined">
    {% if post_image %}
    <div class="post-card-image">
        <a href="{{ post_href }}">
            <img src="{{ post_image }}" alt="{{ post_title }}" loading="lazy">
        </a>
    </div>
    {% end %}
    <div class="post-card-content">
        <h3 class="post-card-title"><a href="{{ post_href }}">{{ post_title }}</a></h3>
        {% if post_date %}
        <time datetime="{{ post_date | date_iso }}" class="post-card-date">
            {{ post_date | dateformat('%B %d, %Y') }}
        </time>
        {% end %}
        {% if post_desc %}
        <p class="post-card-excerpt">{{ post_desc | truncate(150) }}</p>
        {% end %}
        <a href="{{ post_href }}" class="read-more">Read more →</a>
    </div>
</article>
{% end %}

{# =============================================================================
FEATURE CARD COMPONENT
============================================================================= #}
{% def feature_card(feature) %}
{% let feat_icon = feature?.icon ?? '' %}
{% let feat_title = feature?.title ?? '' %}
{% let feat_desc = feature?.description ?? '' %}
{% let feat_link = feature?.link %}

<article class="feature-card">
    {% if feat_icon %}
    <div class="feature-icon" aria-hidden="true">{{ feat_icon }}</div>
    {% end %}
    <h3 class="feature-title">{{ feat_title }}</h3>
    <p class="feature-description">{{ feat_desc }}</p>
    {% if feat_link %}
    {% let link_url = feat_link?.href ?? feat_link?.url ?? '#' %}
    {% let link_text = feat_link?.text ?? 'Learn more' %}
    <a href="{{ link_url | absolute_url }}" class="feature-link">
        {{ link_text }}
        <span aria-hidden="true">→</span>
    </a>
    {% end %}
</article>
{% end %}

{# =============================================================================
MAIN TEMPLATE
============================================================================= #}

{% block content %}
{# Template-scoped variables with null-safe access #}
{% let page_title = page?.title ?? config?.title ?? 'Home' %}
{% let page_desc = params?.description ?? '' %}
{% let blob_background = params?.blob_background ?? false %}
{% let cta_buttons = params?.cta_buttons ?? [] %}
{% let features = params?.features ?? [] %}
{% let quick_links = params?.quick_links ?? [] %}
{% let stats = params?.stats ?? [] %}
{% let show_recent = params?.show_recent_posts ?? true %}
{% let blog_section_name = params?.blog_section ?? 'blog' %}

<div class="home">
    {# Hero Section #}
    {% let hero_classes = ['hero', 'hero--large'] %}
    {% if blob_background %}{% set _ = hero_classes.append('hero--blob-background') %}{% end %}

    <header class="{{ hero_classes | join(' ') }}">
        {% if blob_background %}
        <div class="hero__blobs" aria-hidden="true">
            <div class="hero__blob hero__blob--1"></div>
            <div class="hero__blob hero__blob--2"></div>
            <div class="hero__blob hero__blob--3"></div>
            <div class="hero__blob hero__blob--4"></div>
        </div>
        {% end %}
        <div class="hero__container">
            <div class="hero__content">
                <h1 class="hero__title">
                    <span class="fluid-text">{{ page_title }}</span>
                </h1>
                {% if page_desc %}
                <p class="hero__subtitle">{{ page_desc }}</p>
                {% end %}

                {% if cta_buttons | length > 0 %}
                <div class="hero__actions">
                    {% for button in cta_buttons %}
                    {% let btn_url = button?.href ?? button?.url ?? '#' %}
                    {% let btn_text = button?.text ?? 'Button' %}
                    {% let btn_style = button?.style ?? 'primary' %}
                    <a href="{{ btn_url | absolute_url }}"
                        class="{{ ['hero__button', 'hero__button--' ~ btn_style, 'gradient-border' if btn_style != 'primary'] | classes }}">
                        {{ btn_text }}
                    </a>
                    {% end %}
                </div>
                {% end %}
            </div>
        </div>
    </header>

    {# Feature Highlights #}
    {% if features | length > 0 %}
    <section class="features" aria-label="Key features">
        <div class="features-grid">
            {% for feature in features %}
            {{ feature_card(feature) }}
            {% end %}
        </div>
    </section>
    {% end %}

    {# Main Content #}
    {% if content and content.strip() %}
    <div class="home-content prose">
        {{ content | safe }}
    </div>
    {% end %}

    {# Quick Links Section #}
    {% if quick_links | length > 0 %}
    <section class="quick-links" aria-label="Quick navigation">
        <h2>Quick Links</h2>
        <div class="quick-links-grid">
            {% for link in quick_links %}
            {% let link_url = link?.href ?? link?.url ?? '#' %}
            {% let link_title = link?.title ?? 'Link' %}
            {% let link_icon = link?.icon ?? '' %}
            {% let link_desc = link?.description ?? '' %}
            <a href="{{ link_url | absolute_url }}" class="quick-link-card">
                {% if link_icon %}
                <div class="quick-link-icon" aria-hidden="true">{{ link_icon }}</div>
                {% end %}
                <h3>{{ link_title }}</h3>
                {% if link_desc %}
                <p>{{ link_desc }}</p>
                {% end %}
            </a>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Statistics/Metrics Section #}
    {% if stats | length > 0 %}
    <section class="stats" aria-label="Key metrics">
        <div class="stats-grid">
            {% for stat in stats %}
            <div class="stat-card">
                <div class="stat-value">{{ stat?.value ?? '0' }}</div>
                <div class="stat-label">{{ stat?.label ?? '' }}</div>
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Recent Posts Section - cached for performance #}
    {% if show_recent %}
    {% cache 'home-recent-posts-' ~ (site.nav_version ?? '') %}
    {# Find blog section - O(1) dict lookup via get_section() #}
    {% let blog_section = get_section(blog_section_name) %}

    {# Get recent posts from section pages #}
    {% let recent = [] %}
    {% if blog_section %}
    {% let recent = (blog_section.pages ?? [])
    |> selectattr('date')
    |> sort(attribute='date', reverse=true)
    |> take(3) %}
    {% end %}

    {% if recent | length > 0 %}
    <section class="recent-posts">
        <h2 class="recent-posts-title">Recent Posts</h2>
        <div class="posts-grid">
            {% for post in recent %}
            {{ post_card(post) }}
            {% end %}
        </div>
    </section>
    {% end %}
    {% end %}
    {% end %}
</div>
{% end %}