<main class="page-shell home-page">
  <section class="hero-section panel">
    <div class="hero-copy">
      <div class="hero-copy-main">
        <p id="portfolio-eyebrow" class="eyebrow">{{ content().home.portfolioEyebrow }}</p>
        <h1>
          <span class="hero-name-part" [attr.data-name]="global.firstname">{{ global.firstname }}</span>
          <span class="hero-name-part" [attr.data-name]="global.lastname">{{ global.lastname }}</span>
        </h1>
        <p class="hero-intro">{{ content().home.heroIntro }}</p>
      </div>

      <div class="hero-actions">
        <div class="hero-contact-block">
          <p class="hero-contact-title">{{ content().home.contactTitle }}</p>
          <div id="contact-links" class="contact-area hero-contact-area">
            <a [href]="contactMailHref" aria-label="Send mail"><app-icon [icon]="envelopeIcon" size="lg"></app-icon></a>
            <a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number"
              ><app-icon [icon]="phoneIcon" size="lg"></app-icon
            ></a>
            <a href="https://discord.com/users/860206216893693973" aria-label="Discord profile"
              ><app-icon [icon]="discordIcon" size="lg"></app-icon
            ></a>
            <a href="https://github.com/fraujulian" aria-label="GitHub profile"><app-icon [icon]="githubIcon" size="lg"></app-icon></a>
            <a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile"
              ><app-icon [icon]="linkedinIcon" size="lg"></app-icon
            ></a>
          </div>
        </div>

        <div class="hero-action-links">
          <button class="action-link" type="button" (click)="scrollToProjectsSection()">{{ content().home.viewProjects }}</button>
          <button class="action-link" type="button" (click)="scrollToAboutSection()">{{ content().home.aboutMe }}</button>
        </div>
      </div>

      <div class="hero-meta">
        <div>
          <span class="meta-label">{{ currentBioEntry.label }}</span
          ><strong>{{ currentBioEntry.value }}</strong>
        </div>
      </div>
    </div>

    <div class="hero-visual">
      @if (currentPortraitHighlight) {
        <div class="portrait-highlight">
          <button
            type="button"
            class="portrait-highlight-button"
            (click)="showNextPortraitHighlight()"
            [attr.aria-label]="content().home.nextHighlightAriaLabel"
            [title]="portraitHighlights.length > 1 ? content().home.nextHighlightTitle : content().home.singleHighlightTitle"
          >
            <div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching">
              <img
                class="hero-feature-image"
                [src]="currentPortraitHighlight.image"
                [attr.srcset]="currentPortraitHighlight.imageSrcset"
                [attr.sizes]="currentPortraitHighlight.imageSizes"
                [width]="currentPortraitHighlight.imageWidth"
                [height]="currentPortraitHighlight.imageHeight"
                fetchpriority="high"
                decoding="async"
                [alt]="currentPortraitHighlight.text + ' ' + content().home.portraitAltSuffix"
              />
              @if (currentPortraitHighlightIndex === 0) {
                <span class="portrait-click-hint">{{ content().home.clickHint }}</span>
              }
              <span class="portrait-caption">{{ currentPortraitHighlight.text }}</span>
            </div>
          </button>
        </div>
      }
    </div>
  </section>

  <section class="panel openpgp-section">
    <div class="openpgp-copy">
      <p class="eyebrow">{{ content().home.openPgpTitle }}</p>
      <p class="openpgp-description">{{ content().home.openPgpDescription }}</p>
    </div>
    <div class="openpgp-actions">
      <a class="action-link openpgp-download-link" [href]="openPgpKey.assetPath" download="julian-lechner-public.asc">
        {{ content().home.openPgpDownload }}
      </a>
      <p class="openpgp-fingerprint">
        <span>{{ content().home.openPgpFingerprintLabel }}</span>
        <strong>{{ openPgpKey.formattedFingerprint }}</strong>
      </p>
    </div>
  </section>

  <section id="about" class="story-section panel about-scroll-anim-enabled">
    <div class="section-heading">
      <p class="eyebrow">{{ content().home.aboutEyebrow }}</p>
    </div>
    <div class="story-grid">
      <div class="story-copy">
        <p>{{ interpolate(content().home.aboutParagraphs[0]) }}</p>
        <p>{{ content().home.aboutParagraphs[1] }}</p>
        <p>{{ content().home.aboutParagraphs[2] }}</p>
      </div>
      <div class="story-detail">
        <button class="detail-toggle" type="button" (click)="toggleBio()">
          <span>{{ isLongBioShown ? content().home.detailToggleClose : content().home.detailToggleOpen }}</span
          ><app-icon [icon]="isLongBioShown ? arrowDownIcon : arrowRightIcon"></app-icon>
        </button>
        @if (isLongBioMounted) {
          <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown" [class.detail-panel-leave]="!isLongBioShown">
            <p>{{ content().home.detailParagraphs[0] }}</p>
            <p>{{ content().home.detailParagraphs[1] }}</p>
            <p>{{ content().home.detailParagraphs[2] }}</p>
            <button class="inline-link inline-link-button" type="button" (click)="scrollToContactLinks()">
              {{ content().home.getInTouch }}
            </button>
          </div>
        }
      </div>
    </div>
  </section>

  <section id="projects" class="projects-section">
    <div class="section-heading section-heading-centered">
      <p class="eyebrow">{{ content().home.projectsEyebrow }}</p>
    </div>
    <div class="project-list">
      @for (project of projects; track project.link + '-' + $index; let i = $index) {
        <a
          class="panel project-entry"
          [class.project-entry-reverse]="i % 2 === 1"
          [class.project-entry-from-right]="i % 2 === 0"
          [class.project-entry-from-left]="i % 2 === 1"
          [href]="project.link"
          [attr.aria-label]="content().home.openProjectPrefix + ' ' + project.title"
          [attr.data-project-index]="i"
        >
          @if (project.icon) {
            <img
              class="project-icon"
              [class.project-icon-circle]="project.circleIcon !== false"
              [ngSrc]="project.icon"
              [attr.srcset]="project.iconSrcset ?? null"
              [attr.sizes]="project.iconSizes ?? null"
              [width]="project.iconWidth ?? 216"
              [height]="project.iconHeight ?? 216"
              disableOptimizedSrcset
              [alt]="project.title + ' icon'"
            />
          }
          <div class="project-copy">
            <div class="project-header">
              <div class="project-title-wrap">
                <span class="project-link">{{ project.title }}</span>
              </div>
              <div class="project-languages" [attr.aria-label]="content().home.projectLanguagesAriaLabel">
                @for (language of project.skills; track language + '-' + $index) {
                  <span class="project-language-chip">{{ language }}</span>
                }
              </div>
            </div>
            <p class="project-description">{{ project.description }}</p>
          </div>
        </a>
      }
    </div>
  </section>
</main>

<app-footer ngSkipHydration></app-footer>
