{% extends "base.html" %}
{% from 'chirpui/bento_grid.html' import bento_grid, bento_item %}
{% from 'chirpui/button.html' import btn %}
{% from 'chirpui/card.html' import resource_card %}
{% from 'chirpui/feature_section.html' import feature_section, feature_stack %}
{% from 'chirpui/hero.html' import page_hero %}
{% from 'chirpui/layout.html' import cluster, container, grid, stack %}
{% from 'chirpui/logo_cloud.html' import logo_cloud %}
{% from 'chirpui/metric_grid.html' import metric_card, metric_grid %}
{% from 'chirpui/story_card.html' import story_card %}
{% from 'chirpui/surface.html' import surface %}

{% block content %}
{% let page_title = page?.title ?? config?.title ?? 'Home' %}
{% let page_desc = params?.description ?? '' %}
{% let hero_eyebrow = params?.hero_eyebrow ?? 'chirp-ui' %}
{% let hero_summary = params?.hero_summary ?? page_desc %}
{% let hero_points = params?.hero_points ?? [] %}
{% let cta_buttons = params?.cta_buttons ?? [] %}
{% let hero_preview = params?.hero_preview ?? none %}
{% let hero_panels = params?.hero_panels ?? [] %}
{% let proof_metrics = params?.proof_metrics ?? [] %}
{% let marketing_shapes = params?.marketing_shapes ?? [] %}
{% let feature_sections = params?.feature_sections ?? [] %}
{% let ecosystem_logos = params?.ecosystem_logos ?? [] %}
{% let quick_links = params?.quick_links ?? [] %}
{% let final_cta = params?.final_cta ?? none %}

{% call container(max_width='88rem', cls='chirp-theme-home') %}
<div class="chirp-theme-home__spine" data-chirp-theme-surface="home">
  <section class="chirp-theme-home__hero-stage">
    <div class="chirp-theme-home__hero-copy">
      {% call page_hero(title=page_title, subtitle=hero_summary, variant='editorial', background='solid', cls='chirp-theme-home__hero') %}
        {% slot eyebrow %}{{ hero_eyebrow }}{% 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 %}
        {% if hero_points | length > 0 %}
        <ul class="chirp-theme-home__hero-points" aria-label="Product strengths">
          {% for point in hero_points %}
          <li>{{ point }}</li>
          {% end %}
        </ul>
        {% end %}
      {% end %}
    </div>

    <div class="chirp-theme-home__product-visual" aria-label="Preview of chirp-ui marketing page shapes">
      <div class="chirp-theme-home__visual-topbar" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
      </div>
      {% if hero_preview and hero_preview?.nav_items %}
      <nav class="chirp-theme-home__visual-nav" aria-label="Preview sections">
        {% for nav_item in hero_preview.nav_items %}
        <span>{{ nav_item }}</span>
        {% end %}
      </nav>
      {% end %}
      <div class="chirp-theme-home__visual-hero">
        <p class="chirp-theme-home__visual-eyebrow">{{ hero_preview?.eyebrow ?? 'Example interface' }}</p>
        <h2>{{ hero_preview?.title ?? 'Render common screens from Python.' }}</h2>
        <p>{{ hero_preview?.summary ?? 'Use ready-made components for pages, forms, navigation, and app shells.' }}</p>
      </div>
      {% if hero_preview and hero_preview?.proof_items %}
      <div class="chirp-theme-home__visual-proof" aria-label="Preview proof logos">
        {% for proof in hero_preview.proof_items %}
        <span>{{ proof }}</span>
        {% end %}
      </div>
      {% end %}
      <div class="chirp-theme-home__visual-compose">
        <article class="chirp-theme-home__visual-feature">
          <span>{{ hero_preview?.feature_title ?? 'Feature band' }}</span>
          <p>{{ hero_preview?.feature_text ?? 'Reusable sections carry rhythm, actions, and media slots.' }}</p>
        </article>
        <a class="chirp-theme-home__visual-cta" href="{{ (hero_preview?.cta_url ?? '/showcase/') | absolute_url }}">
          <strong>{{ hero_preview?.cta_text ?? 'View showcase' }}</strong>
          <span>{{ hero_preview?.resource_text ?? 'Patterns' }}</span>
        </a>
      </div>
      {% if (not hero_preview) and hero_panels | length > 0 %}
      <div class="chirp-theme-home__visual-panels">
        {% for panel in hero_panels %}
        <article>
          <span>{{ panel?.label ?? 'Surface' }}</span>
          <p>{{ panel?.text ?? '' }}</p>
        </article>
        {% end %}
      </div>
      {% end %}
    </div>
  </section>

  {% if proof_metrics | length > 0 %}
  <section class="chirp-theme-home__proof" aria-label="chirp-ui proof points">
    {% call metric_grid(cols=3, gap='md', cls='chirp-theme-home__metric-grid') %}
      {% for metric in proof_metrics %}
      {{ metric_card(metric?.value ?? '', metric?.label ?? '', hint=metric?.hint ?? none, cls='chirp-theme-home__metric') }}
      {% end %}
    {% end %}
  </section>
  {% end %}

  {% if marketing_shapes | length > 0 %}
  <section class="chirp-theme-home__section chirp-theme-home__section--shapes" aria-labelledby="home-shapes-title">
    <div class="chirp-theme-home__section-head">
      <p class="chirp-theme-home__section-eyebrow">What you can build</p>
      <h2 id="home-shapes-title">Reusable UI for pages and product screens.</h2>
      <p>Chirp UI gives Python projects a practical starting point for the interfaces teams build repeatedly.</p>
    </div>
    {% call bento_grid(cls='chirp-theme-home__bento') %}
      {% for shape in marketing_shapes %}
      {% call bento_item(span=2 if loop.first else none, cls='chirp-theme-home__bento-item') %}
        <a class="chirp-theme-home__shape-link chirp-theme-home__shape-link--{{ shape?.layout ?? 'default' }}" href="{{ (shape?.href ?? '#') | absolute_url }}">
          <span class="chirp-theme-home__shape-eyebrow">{{ shape?.eyebrow ?? 'Shape' }}</span>
          <strong>{{ shape?.title ?? 'Component shape' }}</strong>
          <p>{{ shape?.description ?? '' }}</p>
          {% if shape?.layout == 'hero' %}
          <span class="chirp-theme-home__shape-demo chirp-theme-home__shape-demo--hero" aria-hidden="true">
            <span></span>
            <span></span>
          </span>
          {% elif shape?.layout == 'feature' %}
          <span class="chirp-theme-home__shape-demo chirp-theme-home__shape-demo--feature" aria-hidden="true">
            <span></span>
            <span></span>
            <span></span>
          </span>
          {% elif shape?.layout == 'proof' %}
          <span class="chirp-theme-home__shape-demo chirp-theme-home__shape-demo--proof" aria-hidden="true">
            <span>100+</span>
            <span>0</span>
          </span>
          {% elif shape?.layout == 'links' %}
          <span class="chirp-theme-home__shape-demo chirp-theme-home__shape-demo--links" aria-hidden="true">
            <span></span>
            <span></span>
            <span></span>
          </span>
          {% elif shape?.layout == 'cta' %}
          <span class="chirp-theme-home__shape-demo chirp-theme-home__shape-demo--cta" aria-hidden="true">
            <span></span>
          </span>
          {% end %}
        </a>
      {% end %}
      {% end %}
    {% end %}
  </section>
  {% end %}

  {% if feature_sections | length > 0 %}
  <section class="chirp-theme-home__section chirp-theme-home__section--features" aria-labelledby="home-feature-title">
    <div class="chirp-theme-home__section-head">
      <p class="chirp-theme-home__section-eyebrow">How it fits</p>
      <h2 id="home-feature-title">Render HTML first. Add behavior where it helps.</h2>
    </div>
    {% call feature_stack(cls='chirp-theme-home__feature-stack') %}
      {% for item in feature_sections %}
      {% call feature_section(layout='balanced', variant='muted', reverse=item?.reverse ?? false, cls='chirp-theme-home__feature') %}
        {% slot eyebrow %}{{ item?.eyebrow ?? 'Recipe' }}{% end %}
        {% slot title %}{{ item?.title ?? 'Feature section' }}{% end %}
        <p>{{ item?.description ?? '' }}</p>
        {% slot actions %}
        {{ btn(item?.label ?? 'Read more', href=(item?.href ?? '#') | absolute_url, variant='secondary') }}
        {% end %}
        {% slot media %}
        {% call surface(variant='muted', cls='chirp-theme-home__feature-surface') %}
          <p class="chirp-theme-home__feature-surface-title">{{ item?.visual_title ?? 'Component kit' }}</p>
          {% if item?.visual_items %}
          <ul>
            {% for visual in item.visual_items %}
            <li>{{ visual }}</li>
            {% end %}
          </ul>
          {% end %}
        {% end %}
        {% end %}
      {% end %}
      {% end %}
    {% end %}
  </section>
  {% end %}

  <section class="chirp-theme-home__section chirp-theme-home__section--proof" aria-labelledby="home-proof-title">
    <div class="chirp-theme-home__section-head">
      <p class="chirp-theme-home__section-eyebrow">Why it works</p>
      <h2 id="home-proof-title">The UI stays inspectable from Python.</h2>
    </div>
    {% call grid(cols=2, gap='md', cls='chirp-theme-home__story-grid') %}
      {{ story_card(
        customer='Python teams',
        outcome='Pages and application screens can share the same component library.',
        summary='Use Chirp UI for cards, forms, navigation, surfaces, grids, and actions instead of rebuilding each screen by hand.',
        metric='one library'
      ) }}
      {{ story_card(
        customer='Maintainers',
        outcome='Components are easier to audit because the Python API, templates, CSS, and docs are kept in sync.',
        summary='Generated references and tests help keep the shipped UI surface documented instead of hidden in one-off markup.',
        metric='inspectable'
      ) }}
    {% end %}
  </section>

  {% if ecosystem_logos | length > 0 %}
  <section class="chirp-theme-home__section chirp-theme-home__section--ecosystem" aria-labelledby="home-ecosystem-title">
    <div class="chirp-theme-home__section-head">
      <p class="chirp-theme-home__section-eyebrow">Ecosystem</p>
      <h2 id="home-ecosystem-title">Part of a Python-first HTML stack.</h2>
    </div>
    {{ logo_cloud(items=ecosystem_logos, label='Bengal ecosystem projects', cls='chirp-theme-home__logo-cloud') }}
  </section>
  {% end %}

  {% if quick_links | length > 0 %}
  <section class="chirp-theme-home__section chirp-theme-home__section--links" aria-labelledby="home-next-title">
    <div class="chirp-theme-home__section-head">
      <p class="chirp-theme-home__section-eyebrow">Next steps</p>
      <h2 id="home-next-title">Pick the path that matches your work.</h2>
    </div>
    {% 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 %}
  </section>
  {% end %}

  {% if final_cta %}
  {% call surface(variant='gradient-border', cls='chirp-theme-home__cta') %}
    <div class="chirp-theme-home__cta-copy">
      <p class="chirp-theme-home__section-eyebrow">Start</p>
      <h2>{{ final_cta?.title ?? 'Build with chirp-ui' }}</h2>
      <p>{{ final_cta?.description ?? '' }}</p>
    </div>
    <div class="chirp-theme-home__cta-actions">
      {{ btn(final_cta?.primary_text ?? 'Get started', href=(final_cta?.primary_url ?? '/docs/get-started/') | absolute_url, variant='primary') }}
      {{ btn(final_cta?.secondary_text ?? 'API reference', href=(final_cta?.secondary_url ?? '/api/') | absolute_url, variant='secondary') }}
    </div>
  {% end %}
  {% end %}
</div>
{% end %}
{% end %}