<main class="home-page">
  <section class="hero">
    <div class="container hero-grid ui-content-grid ui-content-grid--spacious">
      <div class="hero-copy">
        <p class="eyebrow ui-eyebrow">{{ "HOME.HERO_EYEBROW" | translate }}</p>
        <h1
          class="hero-title ui-hero-display"
          [innerHTML]="'HOME.HERO_TITLE' | translate"
        ></h1>
        <p class="hero-lead ui-copy-lead">
          {{ "HOME.HERO_LEAD" | translate }}
        </p>
        <p class="hero-subtitle ui-copy-subtitle">
          {{ "HOME.HERO_SUBTITLE" | translate }}
        </p>
        <div class="hero-actions ui-inline-actions ui-inline-actions--wide">
          <app-button variant="primary" routerLink="/calculator/basic">{{
            "HOME.BTN_CALCULATE" | translate
          }}</app-button>
          <app-button variant="outline" routerLink="/shop">{{
            "HOME.BTN_SHOP" | translate
          }}</app-button>
          <app-button variant="text" routerLink="/contact">{{
            "HOME.BTN_CONTACT" | translate
          }}</app-button>
        </div>
      </div>
    </div>
  </section>

  <section class="section capabilities ui-section-block">
    <div class="capabilities-bg"></div>
    <div class="container">
      <div class="section-head ui-section-head">
        <h2 class="section-title ui-section-display-title">
          {{ "HOME.SEC_CAP_TITLE" | translate }}
        </h2>
        <p class="section-subtitle ui-section-display-subtitle">
          {{ "HOME.SEC_CAP_SUBTITLE" | translate }}
        </p>
      </div>
      <div class="cap-cards">
        <app-card
          *ngFor="let card of capabilityCards(); trackBy: trackCapability"
        >
          <div class="card-image-placeholder ui-bleed-media">
            @if (card.image; as image) {
              <picture>
                @if (image.source.avifUrl) {
                  <source [srcset]="image.source.avifUrl" type="image/avif" />
                }
                @if (image.source.webpUrl) {
                  <source [srcset]="image.source.webpUrl" type="image/webp" />
                }
                <img
                  [src]="image.source.fallbackUrl"
                  [attr.alt]="image.altText || (card.titleKey | translate)"
                  width="640"
                  height="400"
                />
              </picture>
            } @else {
              <div class="card-image-fallback ui-bleed-media__fallback">
                <span>{{ card.titleKey | translate }}</span>
              </div>
            }
          </div>
          <h3>{{ card.titleKey | translate }}</h3>
          <p class="text-muted ui-text-muted">{{ card.textKey | translate }}</p>
        </app-card>
      </div>
    </div>
  </section>

  <section class="section calculator ui-section-block">
    <div
      class="container calculator-grid ui-content-grid ui-content-grid--start ui-content-grid--split"
    >
      <div class="calculator-copy">
        <h2 class="section-title ui-section-display-title">
          {{ "HOME.SEC_CALC_TITLE" | translate }}
        </h2>
        <p class="section-subtitle ui-section-display-subtitle">
          {{ "HOME.SEC_CALC_SUBTITLE" | translate }}
        </p>
        <ul class="calculator-list">
          <li>{{ "HOME.SEC_CALC_LIST_1" | translate }}</li>
        </ul>
      </div>
      <app-card class="quote-card">
        <div class="quote-header ui-row ui-row--between">
          <div>
            <p class="quote-eyebrow ui-eyebrow ui-eyebrow--compact">
              {{ "HOME.CARD_CALC_EYEBROW" | translate }}
            </p>
            <h3 class="quote-title">
              {{ "HOME.CARD_CALC_TITLE" | translate }}
            </h3>
          </div>
          <span class="quote-tag ui-pill ui-pill--accent">{{
            "HOME.CARD_CALC_TAG" | translate
          }}</span>
        </div>
        <ul class="quote-steps ui-feature-list ui-feature-list--bullets">
          <li>{{ "HOME.CARD_CALC_STEP_1" | translate }}</li>
          <li>{{ "HOME.CARD_CALC_STEP_2" | translate }}</li>
          <li>{{ "HOME.CARD_CALC_STEP_3" | translate }}</li>
        </ul>
        <div class="quote-actions ui-actions ui-actions--stack">
          <app-button
            variant="primary"
            [fullWidth]="true"
            routerLink="/calculator/basic"
            >{{ "HOME.BTN_OPEN_CALC" | translate }}</app-button
          >
          <app-button
            variant="outline"
            [fullWidth]="true"
            routerLink="/contact"
            >{{ "HOME.BTN_CONTACT" | translate }}</app-button
          >
        </div>
      </app-card>
    </div>
  </section>

  <section class="section shop ui-section-block">
    <div
      class="container split ui-content-grid ui-content-grid--start ui-content-grid--split"
    >
      <div class="shop-copy">
        <h2 class="section-title ui-section-display-title">
          {{ "HOME.SEC_SHOP_TITLE" | translate }}
        </h2>
        <p>
          {{ "HOME.SEC_SHOP_TEXT" | translate }}
        </p>
        <ul class="shop-list">
          <li>{{ "HOME.SEC_SHOP_LIST_1" | translate }}</li>
          <li>{{ "HOME.SEC_SHOP_LIST_2" | translate }}</li>
          <li>{{ "HOME.SEC_SHOP_LIST_3" | translate }}</li>
        </ul>
        <div class="shop-actions ui-inline-actions">
          <app-button variant="primary" routerLink="/shop">{{
            "HOME.BTN_DISCOVER" | translate
          }}</app-button>
          <app-button variant="outline" routerLink="/contact">{{
            "HOME.BTN_REQ_SOLUTION" | translate
          }}</app-button>
        </div>
      </div>
      <div
        class="shop-gallery ui-gallery-strip"
        tabindex="0"
        [attr.aria-label]="'HOME.SHOP_GALLERY_ARIA' | translate"
      >
        <figure
          class="shop-gallery-item ui-gallery-card"
          *ngFor="let image of shopGalleryImages(); trackBy: trackMediaAsset"
        >
          <picture>
            <source
              *ngIf="image.source.avifUrl"
              [srcset]="image.source.avifUrl"
              type="image/avif"
            />
            <source
              *ngIf="image.source.webpUrl"
              [srcset]="image.source.webpUrl"
              type="image/webp"
            />
            <img
              [src]="image.source.fallbackUrl"
              [attr.alt]="image.altText || ('HOME.SEC_SHOP_TITLE' | translate)"
            />
          </picture>
        </figure>
      </div>
      <div class="shop-cards">
        <app-card>
          <h3>{{ "HOME.CARD_SHOP_1_TITLE" | translate }}</h3>
          <p class="text-muted ui-text-muted">
            {{ "HOME.CARD_SHOP_1_TEXT" | translate }}
          </p>
        </app-card>
        <app-card>
          <h3>{{ "HOME.CARD_SHOP_2_TITLE" | translate }}</h3>
          <p class="text-muted ui-text-muted">
            {{ "HOME.CARD_SHOP_2_TEXT" | translate }}
          </p>
        </app-card>
        <app-card>
          <h3>{{ "HOME.CARD_SHOP_3_TITLE" | translate }}</h3>
          <p class="text-muted ui-text-muted">
            {{ "HOME.CARD_SHOP_3_TEXT" | translate }}
          </p>
        </app-card>
      </div>
    </div>
  </section>

  <section class="section about ui-section-block">
    <div
      class="container about-grid ui-content-grid ui-content-grid--start ui-content-grid--split"
    >
      <div class="about-copy">
        <h2 class="section-title ui-section-display-title">
          {{ "HOME.SEC_ABOUT_TITLE" | translate }}
        </h2>
        <p>
          {{ "HOME.SEC_ABOUT_TEXT" | translate }}
        </p>
        <div class="about-actions ui-inline-actions">
          <app-button variant="primary" routerLink="/about">{{
            "HOME.SEC_ABOUT_TITLE" | translate
          }}</app-button>
          <app-button variant="outline" routerLink="/contact">{{
            "HOME.BTN_CONTACT" | translate
          }}</app-button>
        </div>
      </div>
      <div class="about-media">
        <div class="about-feature-image ui-media-frame ui-media-frame--wide">
          @if (currentFounderImage(); as image) {
            <picture>
              @if (image.source.avifUrl) {
                <source [srcset]="image.source.avifUrl" type="image/avif" />
              }
              @if (image.source.webpUrl) {
                <source [srcset]="image.source.webpUrl" type="image/webp" />
              }
              <img
                class="about-feature-photo"
                [src]="image.source.fallbackUrl"
                [attr.alt]="
                  image.altText || ('HOME.SEC_ABOUT_TITLE' | translate)
                "
                width="1200"
                height="900"
              />
            </picture>
          }
          @if (founderImages().length > 1) {
            <button
              type="button"
              class="founder-nav founder-nav-prev ui-nav-button"
              (click)="prevFounderImage()"
              [attr.aria-label]="'HOME.FOUNDER_PREV_ARIA' | translate"
            >
              ‹
            </button>
            <button
              type="button"
              class="founder-nav founder-nav-next ui-nav-button"
              (click)="nextFounderImage()"
              [attr.aria-label]="'HOME.FOUNDER_NEXT_ARIA' | translate"
            >
              ›
            </button>
          }
        </div>
      </div>
    </div>
  </section>
</main>
