<footer class="store-layout__footer mt-auto text-light">
  <div class="container-xl px-3 px-md-4 py-4 py-md-5">
    <div class="row g-4">
      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start">
        <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 class="d-grid gap-2">
          <div class="d-flex align-items-center gap-2 text-light-emphasis">
            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
            <span>Av. San Lorenzo 1542, Rosario</span>
          </div>
          <div class="d-flex align-items-center gap-2 text-light-emphasis">
            <i class="fa-solid fa-phone" aria-hidden="true"></i>
            <span>54 9 (0341) 6658247</span>
          </div>
        </div>

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

      @for (section of footerSections; track section.heading) {
        <div class="col-12 col-md-6 col-xl-2 d-grid gap-3 align-content-start">
          <h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
          <div class="d-grid gap-2">
            @for (link of section.links; track link) {
              <span class="store-layout__muted-text">{{ link }}</span>
            }
          </div>
        </div>
      }

      <div class="col-12 col-md-6 col-xl-3 d-grid gap-3 align-content-start">
        <h2 class="store-layout__footer-heading">Seguinos:</h2>
        <div class="d-flex align-items-center gap-3">
          @for (social of socialLinks; track social.label) {
            <span class="fs-5 text-white">
              <i [class]="social.iconClass" aria-hidden="true"></i>
              <span class="visually-hidden">{{ social.label }}</span>
            </span>
          }
        </div>
      </div>
    </div>
  </div>
</footer>
