{# @description The case in words on one side and the figures that back it on the other, each figure on a panel of its own. #}
{# @prop eyebrow:text | description:"Short line above the heading" #}
{# @prop title:text | description:"The heading. Use the title slot instead when it contains markup." #}
{# @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 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.trend title="Deploys a day" value="31" change="12%" desc="since last month" /><c-stats.trend title="Lead time" value="18m" change="26m" direction="down" inverse /><c-stats.progress title="Services moved over" value="14" percent="70" desc="of 20" /><c-stats.count title="Rolled back" to="2" suffix="%" /> — The figures: any of the stats components, or daisy-cotton's own stat. Four fill the grid. #}
{# @slot:actions <a class="btn btn-primary" href="#">Read the report</a> — Under the copy. Write real anchor markup. #}
{% comment %}
  The copy comes first in the markup and on a narrow screen, so the figures are
  read as evidence for a claim already made. An odd figure out takes a whole row.
{% endcomment %}
<c-vars eyebrow title lead level="2" size="md" class />
<c-section flush align="center" 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>
  <c-section.col class="dce:flex dce:flex-col dce:items-start dce:gap-4" only>
    <c-heading :eyebrow="eyebrow" :title="title" :lead="lead" level="{{ level }}" align="start" only />
    {% if actions %}<div class="dce:flex dce:flex-wrap dce:items-center dce:gap-3 dce:pt-2">{{ actions }}</div>{% endif %}
  </c-section.col>
  <c-section.col class="dce:grid dce:gap-4 dce:sm:grid-cols-2 dce:*:rounded-[var(--radius-box)] dce:*:bg-base-200 dce:sm:*:last:odd:col-span-2" only>{{ slot }}</c-section.col>
</c-section>