<div class="hero-banner-container">
  <div class="hero-banner position-relative rounded">
    @if (desktopImageUrl) {
      <picture class="hero-media" aria-hidden="true">
        @if (mobileImageUrl) {
          <source media="(max-width: 767.98px)" [srcset]="mobileImageUrl" />
        }
        <img [src]="desktopImageUrl" alt="" />
      </picture>
    }

    @if (heroConfig) {
      <div
        class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center"
      >
        <div class="hero-text-box">
          @if (heroConfig.title_html) {
            <div class="hero-title" [innerHTML]="heroConfig.title_html"></div>
          }
          @if (heroConfig.description_html) {
            <div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
          }
          @if (heroConfig.button_text) {
            <a
              [href]="heroConfig.button_href || '#'"
              class="hero-action text-decoration-none mt-3 d-inline-block"
            >
              <app-button variant="primary">
                {{ heroConfig.button_text }}
              </app-button>
            </a>
          }
        </div>
      </div>
    }
  </div>

  @if (eventConfig) {
    <div class="event-card-container w-100 d-flex justify-content-center">
      <div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
        @if (eventConfig.title) {
          <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
        }

        <div
          class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
        >
          @if (eventConfig.dates && eventConfig.dates.length > 0) {
            <div class="d-flex align-items-center gap-2">
              <i class="fa-regular fa-calendar event-icon"></i>
              <span class="event-info-text">{{ formattedDates }}</span>
            </div>
          }
          @if (eventConfig.location) {
            <div class="d-flex align-items-center gap-2">
              <i class="fa-solid fa-location-dot event-icon"></i>
              <span class="event-info-text">{{ eventConfig.location }}</span>
            </div>
          }
        </div>

        @if (eventConfig.dates && eventConfig.dates.length > 0) {
          <button
            type="button"
            class="event-schedule-toggle"
            [attr.aria-expanded]="schedulesExpanded"
            aria-controls="event-schedules"
            (click)="toggleSchedules()"
          >
            <i
              class="fa-solid"
              [class.fa-chevron-down]="!schedulesExpanded"
              [class.fa-chevron-up]="schedulesExpanded"
              aria-hidden="true"
            ></i>
            <span>{{ schedulesExpanded ? 'Ocultar horarios' : 'Ver horarios' }}</span>
          </button>

          @if (schedulesExpanded) {
            <div id="event-schedules" class="event-schedules">
              <table class="table table-striped table-borderless mb-0">
                <tbody>
                  @for (eventDate of eventConfig.dates; track eventDate.id ?? eventDate.date) {
                    <tr>
                      <td>
                        <span class="event-schedule-value">
                          <i class="fa-regular fa-calendar" aria-hidden="true"></i>
                          <span>{{ formatScheduleDate(eventDate.date) }}</span>
                        </span>
                      </td>
                      <td>
                        <span class="event-schedule-value">
                          <i class="fa-regular fa-clock" aria-hidden="true"></i>
                          <span>
                            {{ formatScheduleTime(eventDate.start_time) }} -
                            {{ formatScheduleTime(eventDate.end_time) }}
                          </span>
                        </span>
                      </td>
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          }
        }
      </div>
    </div>
  }
</div>
