{# @description A footer that asks for one last thing before it lists the links: a heading and a form or a button across the top, the columns of links under it, and the logo on the copyright line. #}
{# @prop title:text | default:"Release notes, once a month" | description:"The heading of the banner. Use the title slot instead when it contains markup." #}
{# @prop lead:text | description:"The sentence under the heading" #}
{# @prop level:select['2', '3', '4', '5', '6'] | default:"2" | description:"Heading level. It changes what the heading is, never how large it looks." #}
{# @prop notice:text | description:"The copyright line: © 2026 Meridian GmbH" #}
{# @prop container:select['default', 'wide'] | default:"default" | description:"How wide the content may grow. Match the sections above it." #}
{# @prop invert:boolean | default:False | description:"Light copy, for a dark surface such as bg-neutral" #}
{# @prop class:text | description:"Extra classes on the footer's surface. A plain surface colour goes here: bg-base-200." #}
{# @slot <nav aria-label="Product"><span class="footer-title">Product</span><a class="link link-hover" href="#">Pricing</a><a class="link link-hover" href="#">Changelog</a></nav><nav aria-label="Company"><span class="footer-title">Company</span><a class="link link-hover" href="#">About</a><a class="link link-hover" href="#">Careers</a></nav> — The columns of links: one of daisy-cotton's footer.nav for each. #}
{# @slot:actions <a class="btn btn-primary" href="#">Subscribe</a> — What the banner asks for, beside the heading. Your application's own form, or a button. #}
{# @slot:logo — The logo or wordmark, at the start of the copyright line #}
{# @slot:social — Social links at the end of the copyright line, as daisy-cotton buttons. An icon-only button needs an aria-label. #}
{# @slot:legal — The small links on the copyright line: privacy, terms, imprint #}
{# @slot:background — A background block, rendered into a layer behind the footer #}
{% comment %}
  The form is the application's and goes in `actions` whole: this package ships
  no forms. The banner and the links are parted by the same rule the copyright
  line draws, in the text's own colour.
{% endcomment %}
<c-vars title lead level="2" notice container="default" invert class />
<footer {{ attrs }}>
  <c-section flush container="{{ container }}" :invert="invert" class="dce:py-12 dce:md:py-16 {{ class }}" only>
    {% if background %}<c-slot name="background">{{ background }}</c-slot>{% endif %}
    <div class="dce:flex dce:flex-col dce:gap-6 dce:lg:flex-row dce:lg:items-center dce:lg:justify-between dce:lg:gap-16">
      <div class="dce:flex dce:max-w-xl dce:flex-col dce:gap-2">
        {# djlint:off #}
        {% if title %}<h{{ level }} class="dce:text-2xl dce:font-bold dce:tracking-tight dce:text-balance">{{ title }}</h{{ level }}>{% endif %}
        {# djlint:on #}
        {% if lead %}
          <p class="dce:leading-relaxed dce:text-pretty {% if not invert %}dce:text-base-content/80{% endif %}">{{ lead }}</p>
        {% endif %}
      </div>
      {% if actions %}<div class="dce:flex dce:flex-wrap dce:items-center dce:gap-3 dce:lg:shrink-0">{{ actions }}</div>{% endif %}
    </div>
    {% if slot.strip %}
      <div class="footer dce:mt-10 dce:grid-cols-2 dce:border-t dce:border-current/10 dce:pt-10 dce:sm:auto-cols-fr dce:sm:grid-flow-col dce:sm:grid-cols-none dce:md:mt-12 dce:md:pt-12">{{ slot }}</div>
    {% endif %}
    {% if notice or legal or logo or social %}
      <c-footer.legal :notice="notice" :invert="invert" divided class="dce:mt-10 dce:md:mt-12" only>
        {% if logo %}<c-slot name="start">{{ logo }}</c-slot>{% endif %}
        {% if social %}<c-slot name="end">{{ social }}</c-slot>{% endif %}{{ legal }}</c-footer.legal>
    {% endif %}
  </c-section>
</footer>