<app-menu-content-section menuCode="help.contact" titleId="contact-page-title">
  <div class="contact-page">
    <div class="contact-page__details">
      @if (contact().whatsappUrl && contact().whatsappLabel) {
        <a
          class="contact-page__contact-link"
          [href]="contact().whatsappUrl"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
          <span>{{ contact().whatsappLabel }}</span>
        </a>
      }

      @if (contact().phone; as phone) {
        <a class="contact-page__contact-link" [href]="phoneUrl(phone)">
          <i class="fa-solid fa-phone" aria-hidden="true"></i>
          <span>{{ phone }}</span>
        </a>
      }

      @for (location of contact().locations; track location.id) {
        <article class="contact-page__location">
          <h3 class="contact-page__location-title">
            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
            <span>{{ location.label }}</span>
          </h3>

          <ul class="contact-page__addresses">
            @for (address of location.addresses; track address.id) {
              <li>{{ address.address }}</li>
            }
          </ul>
        </article>
      }

      @if (!contact().whatsappUrl && !contact().phone && contact().locations.length === 0) {
        <p class="contact-page__empty">No hay datos de contacto disponibles.</p>
      }
    </div>

    @if (contact().mapLocations.length > 0) {
      <app-location-map
        class="contact-page__map"
        [locations]="contact().mapLocations"
        [markerColor]="markerColor()"
        mapStyle="minimal-light"
        ariaLabel="Mapa de sucursales y puntos de atención"
      />
    }
  </div>
</app-menu-content-section>
