<section class="about-section">
  <div class="container split-layout">
    <!-- Left Column: Content -->
    <div class="text-content">
      <p class="eyebrow">{{ "ABOUT.EYEBROW" | translate }}</p>
      <h1>{{ "ABOUT.TITLE" | translate }}</h1>
      <p class="subtitle">{{ "ABOUT.SUBTITLE" | translate }}</p>

      <div class="divider"></div>

      <p class="description">{{ "ABOUT.HOW_TEXT" | translate }}</p>
      <br />
      <h2 class="passions-title">{{ "ABOUT.PASSIONS_TITLE" | translate }}</h2>

      <div class="tags-container">
        @for (passion of passions; track passion.id) {
          <span class="tag" [class.is-active]="isPassionActive(passion.id)">
            {{ passion.labelKey | translate }}
          </span>
        }
      </div>
    </div>

    <!-- Right Column: Visuals -->
    <div class="visual-content">
      <div
        class="photo-card card-1"
        tabindex="0"
        role="button"
        [attr.aria-pressed]="isMemberSelected('joe')"
        [class.is-active]="isMemberActive('joe')"
        [class.is-selected]="isMemberSelected('joe')"
        (mouseenter)="setHoveredMember('joe')"
        (mouseleave)="setHoveredMember(null)"
        (focus)="setHoveredMember('joe')"
        (blur)="setHoveredMember(null)"
        (click)="toggleSelectedMember('joe')"
        (keydown.enter)="toggleSelectedMember('joe')"
        (keydown.space)="toggleSelectedMember('joe'); $event.preventDefault()"
      >
        <div class="placeholder-img">
          @if (joeImage(); 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 || ('ABOUT.MEMBER_JOE_ALT' | translate)
                "
              />
            </picture>
          }
        </div>
        <div class="member-info">
          <span class="member-name">{{
            "ABOUT.MEMBER_JOE_NAME" | translate
          }}</span>
          <span class="member-role">{{
            "ABOUT.MEMBER_JOE_ROLE" | translate
          }}</span>
        </div>
      </div>
      <div
        class="photo-card card-2"
        tabindex="0"
        role="button"
        [attr.aria-pressed]="isMemberSelected('matteo')"
        [class.is-active]="isMemberActive('matteo')"
        [class.is-selected]="isMemberSelected('matteo')"
        (mouseenter)="setHoveredMember('matteo')"
        (mouseleave)="setHoveredMember(null)"
        (focus)="setHoveredMember('matteo')"
        (blur)="setHoveredMember(null)"
        (click)="toggleSelectedMember('matteo')"
        (keydown.enter)="toggleSelectedMember('matteo')"
        (keydown.space)="
          toggleSelectedMember('matteo'); $event.preventDefault()
        "
      >
        <div class="placeholder-img">
          @if (matteoImage(); 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 || ('ABOUT.MEMBER_MATTEO_ALT' | translate)
                "
              />
            </picture>
          }
        </div>
        <div class="member-info">
          <span class="member-name">{{
            "ABOUT.MEMBER_MATTEO_NAME" | translate
          }}</span>
          <span class="member-role">{{
            "ABOUT.MEMBER_MATTEO_ROLE" | translate
          }}</span>
        </div>
      </div>
    </div>
  </div>
</section>

<app-locations></app-locations>
