<footer
  class="store-layout__footer mt-auto text-light"
  [style.background-image]="backgroundImageUrl ? 'url(' + backgroundImageUrl + ')' : null"
>
  <div class="container-xl px-3 px-md-4 py-4 py-md-5 store-layout__footer-content">
    <div class="row g-4 store-layout__footer-grid">
      <div class="col-12 store-layout__brand-column">
        <div
          class="store-layout__brand-slot d-inline-flex align-items-center gap-3"
          data-testid="store-footer-brand-slot"
          aria-label="Logo del comercio"
        >
          @if (logoUrl) {
            <img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
          } @else {
            <div class="store-layout__brand-logo-shell" aria-hidden="true">
              <span class="store-layout__brand-logo-skeleton"></span>
            </div>
          }
        </div>
      </div>

      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start store-layout__contact">
        <div class="d-grid gap-2 store-layout__contact-details">
          @if (address) {
            <div class="d-flex align-items-center gap-2">
              <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
              <span>{{ address }}</span>
            </div>
          }
          @if (phone) {
            <div class="d-flex align-items-center gap-2">
              <i class="fa-solid fa-phone" aria-hidden="true"></i>
              <span>{{ phone }}</span>
            </div>
          }
        </div>

        <p class="mb-0 small store-layout__muted-text store-layout__copyright">
          Copyright &copy; {{ currentYear }} - {{ storeName || 'Sonder' }}
        </p>
      </div>

      @for (section of footerSections; track section.heading) {
        <div class="col-12 col-md-6 col-xl-2 d-grid align-content-start store-layout__links-column">
          <div class="d-grid gap-2">
            @for (link of section.links; track link.label) {
              @if (link.routerLink) {
                <a class="store-layout__footer-link" [routerLink]="link.routerLink">
                  {{ link.label }}
                </a>
              } @else if (link.action === 'logout') {
                <button
                  type="button"
                  class="store-layout__footer-link store-layout__footer-action"
                  (click)="logoutClick.emit()"
                >
                  {{ link.label }}
                </button>
              } @else {
                <span class="store-layout__muted-text">{{ link.label }}</span>
              }
            }
          </div>
        </div>
      }

      <div class="store-layout__mobile-divider" aria-hidden="true"></div>

      <div class="col-12 col-md-6 col-xl-3 d-grid align-content-start store-layout__social-column">
        <div class="d-flex align-items-center gap-3 store-layout__social-list">
          @for (social of socialMedia; track social.code) {
            <app-social-media
              class="text-white"
              [code]="social.code"
              [icon]="social.icon"
              [name]="social.name"
              [url]="social.url"
            />
          }
        </div>
      </div>
    </div>
  </div>
</footer>
