{% extends "base.html" %}

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

Opinionated marketing landing for the site root. Zero-config: when frontmatter
omits features/CTAs, the template fills in a polished splash from site.title
and site.description — distinct from the generic section index (gallery) layout.

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
================================================================================
#}

{# =============================================================================
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">
            {{ t('home.read_more', default='Read more') }}
            {{ icon('arrow-right', size=14, css_class='nav-arrow') }}
        </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">
        {% if feat_icon | length <= 24 and not (feat_icon.startswith('<') or feat_icon.startswith('http')) %}
        {{ icon(feat_icon, size=32) }}
        {% else %}
        {{ feat_icon }}
        {% end %}
    </div>
    {% end %}
    <h3 class="feature-title"><bdi>{{ feat_title }}</bdi></h3>
    <p class="feature-description"><bdi>{{ feat_desc }}</bdi></p>
    {% if feat_link %}
    {% let link_url = feat_link?.href ?? feat_link?.url ?? '#' %}
    {% let link_text = feat_link?.text ?? t('home.learn_more', default='Learn more') %}
    <a href="{{ link_url | absolute_url }}" class="feature-link">
        <bdi>{{ link_text }}</bdi>
        {{ icon('arrow-right', size=14, css_class='nav-arrow') }}
    </a>
    {% end %}
</article>
{% end %}

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

{% block content %}
{% let page_title = page?.title ?? site.title ?? 'Home' %}
{% let page_desc = params?.description ?? site.description ?? '' %}
{% let _main_nav = get_menu_lang('main', _current_lang) %}
{% let _first_section = _main_nav[0] if _main_nav | length > 0 else none %}

{% let _default_features = [
  {'icon': 'star', 'title': t('home.feature_speed_title', default='Lightning fast'), 'description': t('home.feature_speed_desc', default='Static HTML, zero runtime overhead, and builds that finish in seconds.')},
  {'icon': 'palette', 'title': t('home.feature_theme_title', default='Beautiful by default'), 'description': t('home.feature_theme_desc', default='Named palettes, view transitions, and a polished theme with no configuration required.')},
  {'icon': 'puzzle-piece', 'title': t('home.feature_zero_dep_title', default='Zero dependencies'), 'description': t('home.feature_zero_dep_desc', default='No npm, no CDN — self-hosted assets and dependency-free enhancements.')},
  {'icon': 'code', 'title': t('home.feature_python_title', default='Python native'), 'description': t('home.feature_python_desc', default='Content, templates, and tooling written in pure Python for modern free-threaded runtimes.')}
] %}

{% let _default_ctas = [
  {'text': t('home.cta_explore', default='Explore'), 'href': (_first_section?.href ?? '/docs/'), 'style': 'primary'},
  {'text': t('home.cta_search', default='Search'), 'href': '/search/', 'style': 'secondary'}
] %}

{% let _default_quick_links = [] %}
{% for item in _main_nav | take(6) %}
{% set _ = _default_quick_links.append({'title': item?.name ?? 'Section', 'href': item?.href ?? '#', 'icon': 'folder', 'description': ''}) %}
{% end %}

{% let _has_custom_landing = (params?.features ?? none) is not none
  or (params?.cta_buttons ?? none) is not none
  or (params?.quick_links ?? none) is not none
  or (params?.stats ?? none) is not none
  or (params?.blob_background ?? none) is not none
  or (content and content.strip()) %}

{% let features = params?.features ?? (_default_features if not _has_custom_landing else []) %}
{% let cta_buttons = params?.cta_buttons ?? (_default_ctas if not _has_custom_landing else []) %}
{% let quick_links = params?.quick_links ?? (_default_quick_links if not _has_custom_landing and (_default_quick_links | length > 0) else []) %}
{% let stats = params?.stats ?? [] %}
{% let blob_background = params?.blob_background ?? (not _has_custom_landing) %}
{% let show_recent = params?.show_recent_posts ?? true %}
{% let blog_section_name = params?.blog_section ?? 'blog' %}

<div class="home home--splash">
    {# Hero Section #}
    {% let hero_classes = ['hero', 'hero--large', 'hero--splash'] %}
    {% 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">
                {% if not _has_custom_landing %}
                <p class="hero__eyebrow">{{ t('home.eyebrow', default='Welcome') }}</p>
                {% end %}
                <h1 class="hero__title">
                    <span class="fluid-text"><bdi>{{ page_title }}</bdi></span>
                </h1>
                {% if page_desc %}
                <p class="hero__subtitle"><bdi>{{ page_desc }}</bdi></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 }}">
                        <bdi>{{ btn_text }}</bdi>
                    </a>
                    {% end %}
                </div>
                {% end %}
            </div>
        </div>
    </header>

    {# Feature Highlights #}
    {% if features | length > 0 %}
    <section class="features" aria-label="{{ t('home.features_aria', default='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" id="explore" aria-label="{{ t('home.quick_links_aria', default='Quick navigation') }}">
        <h2>{{ t('home.quick_links_title', default='Explore') }}</h2>
        <div class="quick-links-grid">
            {% for link in quick_links %}
            {% let link_url = link?.href ?? link?.url ?? '#' %}
            {% let link_title = link?.title ?? link?.name ?? 'Link' %}
            {% let link_icon = link?.icon ?? 'folder' %}
            {% 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">
                    {% if link_icon | length <= 24 and not (link_icon.startswith('<') or link_icon.startswith('http')) %}
                    {{ icon(link_icon, size=24) }}
                    {% else %}
                    {{ link_icon }}
                    {% end %}
                </div>
                {% end %}
                <h3><bdi>{{ link_title }}</bdi></h3>
                {% if link_desc %}
                <p><bdi>{{ link_desc }}</bdi></p>
                {% end %}
            </a>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Statistics/Metrics Section #}
    {% if stats | length > 0 %}
    <section class="stats" aria-label="{{ t('home.stats_aria', default='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"><bdi>{{ stat?.label ?? '' }}</bdi></div>
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Recent Posts Section - cached for performance #}
    {% if show_recent %}
    {% cache 'home-recent-posts-' ~ (site.nav_version ?? '') %}
    {% let blog_section = get_section(blog_section_name) %}
    {% 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">{{ t('home.recent_posts', default='Recent Posts') }}</h2>
        <div class="posts-grid">
            {% for post in recent %}
            {{ post_card(post) }}
            {% end %}
        </div>
    </section>
    {% end %}
    {% end %}
    {% end %}
</div>
{% end %}