@if ((underwriters()).length >= 2) {
  <div class="underwriters-section">
    <p class="underwriters-label">{{ config().callsign }} is brought to you with the generosity of our underwriters.</p>
    <div
      class="underwriters-carousel"
      (mouseenter)="pauseCarousel()"
      (mouseleave)="resumeCarousel()"
    >
    <div class="carousel-track" [class.paused]="carouselPaused">
      @for (uw of underwriters(); track uw.id + '-set1') {
        <button
          type="button"
          class="carousel-slide"
          (click)="openTakeover(uw)"
          [attr.aria-label]="'View ' + uw.name"
        >
          @if (uw.logo_url) {
            <img [src]="resolveImageUrl(uw.logo_url)" [alt]="uw.name + ' logo'" class="carousel-logo">
          } @else {
            <span class="carousel-badge">{{ uw.name.charAt(0) }}</span>
          }
        </button>
      }
      @for (uw of underwriters(); track uw.id + '-set2') {
        <button
          type="button"
          class="carousel-slide"
          (click)="openTakeover(uw)"
          [attr.aria-label]="'View ' + uw.name"
        >
          @if (uw.logo_url) {
            <img [src]="resolveImageUrl(uw.logo_url)" [alt]="uw.name + ' logo'" class="carousel-logo">
          } @else {
            <span class="carousel-badge">{{ uw.name.charAt(0) }}</span>
          }
        </button>
      }
      @for (uw of underwriters(); track uw.id + '-set3') {
        <button
          type="button"
          class="carousel-slide"
          (click)="openTakeover(uw)"
          [attr.aria-label]="'View ' + uw.name"
        >
          @if (uw.logo_url) {
            <img [src]="resolveImageUrl(uw.logo_url)" [alt]="uw.name + ' logo'" class="carousel-logo">
          } @else {
            <span class="carousel-badge">{{ uw.name.charAt(0) }}</span>
          }
        </button>
      }
    </div>
  </div>
</div>
}

<!-- Takeover overlay -->
@if (selectedUnderwriter()) {
  @let uw = selectedUnderwriter()!;
  <div class="takeover-overlay" (click)="closeTakeover()">
    <div class="takeover-dialog" (click)="$event.stopPropagation()">
      <button type="button" class="takeover-close" (click)="closeTakeover()" aria-label="Close">&times;</button>
      <div class="takeover-content">
        @if (uw.logo_url) {
          <img [src]="resolveImageUrl(uw.logo_url)" [alt]="uw.name + ' logo'" class="takeover-logo">
        }
        <h2 class="takeover-name">{{ uw.name }}</h2>
        <p class="takeover-description">{{ uw.description }}</p>
        @if (uw.website_url) {
          <a [href]="uw.website_url" target="_blank" rel="noopener noreferrer" class="btn btn-hero-primary takeover-visit">Visit Website</a>
        }
      </div>
    </div>
  </div>
}