{# Normalize footer_classes - handle both array and string formats #}
{% set additional_classes = footer_classes|default('') %}
{% if additional_classes is iterable %}
  {% set additional_classes = additional_classes|join(' ') %}
{% endif %}

{% set footer_variants = html_cva(base: ['flex', 'flex-col']) %}

{% set footer_top_variants = html_cva(base: ['flex w-full flex-col justify-between gap-6 py-10 md:grid md:grid-cols-2 md:gap-6 [&_li]:text-lg']) %}

{% set footer_first_col_variants = html_cva(base: ['flex', 'flex-col', 'gap-6', '[&_.branding]:h-8']) %}

{% set footer_last_col_variants =
  html_cva(
    base: [
      'flex flex-col gap-2 md:mx-0 md:ms-auto md:w-xs lg:w-md',
      '[&_form]:flex [&_form]:flex-row [&_form]:gap-[1px] md:[&_form]:items-end',
      '[&_input]:bg-background [&_input:focus]:bg-primary-foreground',
      '[&_input[type="email"]]:rounded-l-full [&_input[type="text"]]:rounded-l-full',
      '[&_input[type="email"]]:pl-4 [&_input[type="text"]]:pl-4',
      '[&_input[type="email"]]:border-none [&_input[type="text"]]:border-none',
      '[&_input[type="submit"]]:rounded-l-none [&_input[type="submit"]]:bg-accent [&_input[type="submit"]]:text-primary',
      '[&_input[type="submit"]:focus-visible]:bg-accent-dark [&_input[type="submit"]:hover]:bg-accent-dark'
    ]
  )
%}

{% set footer_bottom_variants =
  html_cva(
    base: [
      'flex w-full flex-col gap-2 py-3 [&_li]:text-xs [&_li]:md:text-sm [&_li]:xl:text-md',
      'md:grid md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] md:gap-6 md:py-4',
      'border-t border-input'
    ]
  )
%}

{% set footer_bottom_col_variants =
  html_cva(
    base: ['site-footer--bottom-col'],
    variants: {
      align: {
        left: '',
        right: ['md:flex md:justify-end']
      }
    }
  )
%}

<section class="site-footer -mt-6 bg-primary text-primary-foreground">
  <div class="container mx-auto px-4 pt-6 md:px-12 {{ footer_variants.apply({}, additional_classes) }}">
    <div class="{{ footer_top_variants.apply({}) }}">
      {% if block('footer_first') is defined %}
        <div class="{{ footer_first_col_variants.apply({}) }}">
          {% block footer_first %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}

      {% if block('footer_last') is defined %}
        <div class="{{ footer_last_col_variants.apply({}) }}">
          {% block footer_last %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}
    </div>

    <div class="{{ footer_bottom_variants.apply({}) }}">
      {% if block('footer_utility_first') is defined %}
        <div
          class="{{
          footer_bottom_col_variants.apply({
            align: 'left'
          })
          }}"
        >
          {% block footer_utility_first %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}

      {% if block('footer_utility_last') is defined %}
        <div
          class="{{
          footer_bottom_col_variants.apply({
            align: 'right'
          })
          }}"
        >
          {% block footer_utility_last %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}
    </div>
  </div>
</section>
