@if (bootstrap()) {
  <section class="brand-overview" aria-labelledby="brand-overview-title">
    <div class="brand-overview__summary">
      <div class="brand-overview__ring" [style.background]="ringBackground()">
        <span>{{ completionPercent() }}%</span>
      </div>
      <div class="brand-overview__summary-text">
        <h2 id="brand-overview-title">{{ 'builder.brandOverviewTitle' | translate }}</h2>
        <p>{{ 'builder.brandOverviewSubtitle' | translate }}</p>
        @if (nextStepKey(); as key) {
          <p class="brand-overview__next-step">
            <app-icon name="arrowRight" [size]="16" />
            {{ 'builder.overviewNextStepLabel' | translate }}: {{ key | translate }}
          </p>
        } @else {
          <p class="brand-overview__next-step brand-overview__next-step--done">
            <app-icon name="checkCircle" [size]="16" />
            {{ 'builder.brandOverviewComplete' | translate }}
          </p>
        }
        @if (formattedLastSaved(); as saved) {
          <p class="brand-overview__last-saved">{{ 'builder.brandLastModified' | translate }}: {{ saved }}</p>
        }
      </div>
    </div>

    <ul class="brand-overview__checklist">
      @for (item of healthItems(); track item.labelKey) {
        <li [class.brand-overview__check--ok]="item.ok">
          <app-icon [name]="item.ok ? 'checkCircle' : 'circle'" [size]="16" />
          {{ item.labelKey | translate }}
        </li>
      }
    </ul>

    <div class="brand-overview__row">
      <div class="brand-overview__card">
        <h3>{{ 'builder.brandColorsPreviewTitle' | translate }}</h3>
        <div class="brand-overview__swatches">
          @for (swatch of paletteSwatches(); track swatch.key) {
            <div class="brand-overview__swatch">
              <span class="brand-overview__swatch-color" [style.background]="swatch.value"></span>
              <span class="brand-overview__swatch-label">{{ swatch.labelKey | translate }}</span>
            </div>
          }
        </div>
        @if (!textContrastPasses()) {
          <p class="brand-overview__contrast-warning" role="status">
            <app-icon name="warning" [size]="16" />
            {{ 'builder.brandContrastWarning' | translate }}
          </p>
        }
      </div>

      <div class="brand-overview__card">
        <h3>{{ 'builder.brandTypographyPreviewTitle' | translate }}</h3>
        @if (typography(); as type) {
          <div class="brand-overview__type-sample" [style.font-family]="type.headingFontFamily || type.primaryFontFamily">
            <p class="brand-overview__type-heading">{{ 'builder.brandTypeSampleHeading' | translate }}</p>
            <p class="brand-overview__type-body" [style.font-family]="type.primaryFontFamily" [style.font-size.px]="type.baseFontSize">
              {{ 'builder.brandTypeSampleBody' | translate }}
            </p>
          </div>
        }
      </div>

      <div class="brand-overview__card">
        <h3>{{ 'builder.brandSocialPreviewTitle' | translate }}</h3>
        @if (branding()?.socialImageUrl; as image) {
          <div class="brand-overview__social-card">
            <img [src]="image" alt="" class="brand-overview__social-image" />
            <div class="brand-overview__social-text">
              <p class="brand-overview__social-title">{{ socialTitle() || ('builder.brandOverviewTitle' | translate) }}</p>
              @if (socialDescription(); as desc) {
                <p class="brand-overview__social-desc">{{ desc }}</p>
              }
            </div>
          </div>
        } @else {
          <p class="brand-overview__social-empty">{{ 'builder.brandSocialEmpty' | translate }}</p>
        }
      </div>
    </div>
  </section>
}