{% extends "base.html" %}
{% from 'chirpui/button.html' import btn %}
{% from 'chirpui/card.html' import resource_card %}
{% from 'chirpui/hero.html' import page_hero %}
{% from 'chirpui/layout.html' import cluster, container, grid %}

{% block content %}
{% let page_title = page?.title ?? config?.title ?? 'Home' %}
{% let page_desc = params?.description ?? '' %}
{% let cta_buttons = params?.cta_buttons ?? [] %}
{% let quick_links = params?.quick_links ?? [] %}
{% let features = params?.features ?? [] %}

{% call container(max_width='84rem', cls='chirp-theme-home') %}
  {% call page_hero(title=page_title, subtitle=page_desc, variant='editorial', background='solid', cls='chirp-theme-home__hero') %}
    {% slot eyebrow %}Bengal theme · chirp-ui aesthetic{% end %}
    {% slot actions %}
    {% if cta_buttons | length > 0 %}
    {% call cluster(gap='sm', cls='chirp-theme-home__actions') %}
      {% for button in cta_buttons %}
      {% let btn_url = button?.href ?? button?.url ?? '#' %}
      {% let btn_text = button?.text ?? 'Learn more' %}
      {% let btn_style = button?.style ?? 'primary' %}
      {{ btn(btn_text, href=btn_url | absolute_url, variant='primary' if btn_style == 'primary' else 'secondary') }}
      {% end %}
    {% end %}
    {% end %}
    {% end %}
  {% end %}

  {% if features | length > 0 %}
  {% call grid(cols=3, gap='md', cls='chirp-theme-home__grid') %}
    {% for feature in features %}
    {{ resource_card((feature?.href ?? feature?.url ?? '#') | absolute_url, feature?.title ?? 'Feature', feature?.description ?? '') }}
    {% end %}
  {% end %}
  {% end %}

  {% if quick_links | length > 0 %}
  {% call grid(cols=3, gap='md', cls='chirp-theme-home__grid chirp-theme-home__grid--links') %}
    {% for link in quick_links %}
    {{ resource_card((link?.href ?? link?.url ?? '#') | absolute_url, link?.title ?? 'Link', link?.description ?? '') }}
    {% end %}
  {% end %}
  {% end %}

  {% if content and content.strip() %}
  <section class="chirp-theme-home__content">
    <div class="chirp-theme-home__content-inner prose">
      {{ content | safe }}
    </div>
  </section>
  {% end %}
{% end %}
{% end %}