{%- set accent_rgb = accent_rgb|default('16,185,129') -%}
{%- set shell_bg_class = shell_bg_class|default('bg-stone-100') -%}
{%- set show_handle = show_handle|default(true) -%}
{%- set subtitle = subtitle|default(null) -%}
{%- set back_href = back_href|default(null) -%}
{%- set back_label = back_label|default('Retour') -%}
{%- set header_bar_class = header_bar_class|default('') -%}
{%- set title = title|default('') -%}
{%- set eyebrow = eyebrow|default('') -%}

{% block header_actions %}{% endblock %}
{%- set _index_shell_header_actions -%}
{{- block('header_actions') -}}
{%- endset -%}

<div class="flex flex-1 flex-col min-h-0 w-full max-w-lg mx-auto min-w-0"
     style="--index-accent-rgb: {{ accent_rgb }}"
     data-controller="index-header"
     data-index-shell>

    <div class="fixed inset-x-0 top-0 z-10 pointer-events-none overflow-hidden"
         data-index-shell-ambient>
        <div class="absolute inset-0 {{ shell_bg_class }} dark:bg-stone-950"></div>
        <div class="absolute inset-0"
             style="background: radial-gradient(ellipse 55% 75% at 92% 68%, rgba(var(--index-accent-rgb), 0.30) 0%, transparent 65%);
                    opacity: clamp(0, calc(1 - var(--p) * 2), 1)"></div>
        <svg class="absolute index-shell-ambient-icon"
             aria-hidden="true"
             style="opacity: clamp(0, calc((1 - var(--p) * 2) * 0.22), 0.22);
                    color: rgb(var(--index-accent-rgb))"
             width="40" height="40" viewBox="0 0 40 40">
            <g fill="currentColor">
            <circle cx="7"  cy="7"  r="1.5"/>
            <circle cx="21" cy="7"  r="1.5"/>
            <circle cx="35" cy="7"  r="1.5"/>
            <circle cx="7"  cy="21" r="1.5"/>
            <circle cx="21" cy="21" r="1.5"/>
            <circle cx="35" cy="21" r="1.5"/>
            <circle cx="7"  cy="35" r="1.5"/>
            <circle cx="21" cy="35" r="1.5"/>
            <circle cx="35" cy="35" r="1.5"/>
            </g>
        </svg>
    </div>

    {% embed 'ui/index_fixed_header.html.twig' with {
        title: title,
        back_href: back_href|default(null),
        back_label: back_label|default('Retour'),
        header_bar_class: header_bar_class|default(''),
    } %}
        {% block back %}
            {% block header_back %}{% endblock %}
        {% endblock %}
        {% block actions %}
            {{- _index_shell_header_actions|raw -}}
        {% endblock %}
    {% endembed %}

    <div data-index-shell-header-spacer></div>

    {% include 'ui/index_hero_title.html.twig' with {
        title: title,
        eyebrow: eyebrow|default(''),
        subtitle: subtitle|default(null),
    } only %}

    <div class="index-shell-reveal relative z-20 flex flex-1 flex-col min-h-0 bg-white rounded-t-[24px] -mt-6 pb-28 min-w-0 dark:bg-stone-900 shadow-[0_-1px_0_rgba(28,25,23,0.04),0_-8px_32px_rgba(28,25,23,0.07)] dark:shadow-[0_-1px_0_rgba(255,255,255,0.05),0_-12px_40px_rgba(0,0,0,0.35)]">

        {% if show_handle %}
        <div class="flex justify-center pt-3 pb-1 shrink-0">
            <div class="w-8 h-1 rounded-full bg-stone-200 dark:bg-stone-700"></div>
        </div>
        {% endif %}

        <div class="flex flex-1 flex-col min-h-0 px-4 pt-2">
            {% block index_card %}{% endblock %}
        </div>
    </div>
</div>