{# @description A band of headline figures across the page, under an optional heading. For the few numbers a visitor should leave with. #}
{# @prop eyebrow:text | description:"Short line above the heading" #}
{# @prop title:text | description:"The heading. Use the title slot instead when it contains markup. Left out, the band is the figures alone." #}
{# @prop lead:text | description:"The supporting sentence under the heading" #}
{# @prop level:select['1', '2', '3', '4', '5', '6'] | default:"2" | description:"Heading level" #}
{# @prop cascade:boolean | default:False | description:"Bring the figures in one after another as the band scrolls into view" #}
{# @prop invert:boolean | default:False | description:"Light copy, for a dark background. Each background says whether it wants this." #}
{# @prop size:select['sm', 'md', 'lg'] | default:"md" | description:"How much vertical room the block takes" #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot <c-stats.count title="Deploys a day" to="31" icon="…" /><c-stats.count title="Rolled back" to="2" suffix="%" /><c-stats.count title="Services" to="14" /> — The figures: any of the stats components, or daisy-cotton's own stat. Three or four read best. #}
{# @slot:background — A background block, rendered into a layer behind the figures #}
{% comment %}
  One row on a wide screen however many figures there are, two columns on a
  tablet, one on a phone. The row is not made of section columns, because
  `cascade` hands it to the cascade reveal and a column has to be a direct
  child of the section body (docs/adr/0011).
{% endcomment %}
<c-vars eyebrow title lead level="2" cascade invert size="md" class />
<c-section flush :invert="invert" class="{% if size == 'sm' %}dce:py-12 dce:md:py-16{% elif size == 'lg' %}dce:py-24 dce:md:py-32{% else %}dce:py-16 dce:md:py-24{% endif %} {{ class }}" :attrs="attrs" only>
  {% if background %}<c-slot name="background">{{ background }}</c-slot>{% endif %}
  {% if eyebrow or title or lead %}
    <c-slot name="header">
      <c-heading :eyebrow="eyebrow" :title="title" :lead="lead" level="{{ level }}" :invert="invert" only />
    </c-slot>
  {% endif %}
  {% if cascade %}
    <c-reveal.cascade class="dce:grid dce:justify-items-center dce:gap-y-4 dce:text-center dce:sm:grid-cols-2 dce:lg:auto-cols-fr dce:lg:grid-flow-col dce:lg:grid-cols-none dce:lg:divide-x dce:*:justify-items-center {% if invert %}dce:divide-neutral-content/20{% else %}dce:divide-base-300{% endif %}" only>{{ slot }}</c-reveal.cascade>
  {% else %}
    <div class="dce:grid dce:justify-items-center dce:gap-y-4 dce:text-center dce:sm:grid-cols-2 dce:lg:auto-cols-fr dce:lg:grid-flow-col dce:lg:grid-cols-none dce:lg:divide-x dce:*:justify-items-center {% if invert %}dce:divide-neutral-content/20{% else %}dce:divide-base-300{% endif %}">{{ slot }}</div>
  {% endif %}
</c-section>