{# @description One column, centred. The default opener, for when the words are the product. #}
{# @prop eyebrow:text | description:"Short line above the heading — a category, a release name" #}
{# @prop title:text | default:"Ship the page, not the CSS" | 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:"1" | description:"Heading level. 1 is right for a landing page." #}
{# @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', 'screen'] | 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:background — A background block, rendered into a layer behind the copy #}
{# @slot:announcement — Above the eyebrow. A pill linking to the latest release, usually. #}
{# @slot:actions <a class="btn btn-primary btn-lg" href="#">Get started</a> <a class="btn btn-outline btn-lg" href="#">Learn more</a> — The button row. Write real anchor markup, so it can post, submit or carry anything. #}
{# @slot:footnote — Under the actions. A trust line, a rating, a row of logos. #}
<c-vars eyebrow title lead level="1" invert size="md" class />
<c-section flush height="{% if size == 'screen' %}screen{% else %}content{% endif %}" :invert="invert" class="{% if size == 'sm' %}py-12 md:py-16{% elif size == 'lg' %}py-24 md:py-32{% elif size == 'screen' %}py-24{% else %}py-16 md:py-24{% endif %} {{ class }}" :attrs="attrs" only>
  {% if background %}<c-slot name="background">{{ background }}</c-slot>{% endif %}
  <div class="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
    {{ announcement }}
    <c-heading :eyebrow="eyebrow" :title="title" :lead="lead" level="{{ level }}" size="xl" :invert="invert" only />
    {% if actions %}
      <div class="flex flex-wrap items-center justify-center gap-3 pt-2">{{ actions }}</div>
    {% endif %}
    {% if footnote %}
      <div class="pt-2 text-sm {% if not invert %}text-base-content/80{% endif %}">{{ footnote }}</div>
    {% endif %}
  </div>
</c-section>