<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">Portfolio</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">
          Full-stack development, thoughtful interfaces, and tailored digital products for companies, associations, and private clients.
        </p>
      </div>

      <div class="hero-actions">
        <div class="hero-contact-block">
          <p class="hero-contact-title">Contact me</p>

          <div id="contact-links" class="contact-area hero-contact-area">
            <a [href]="contactSafeMail" aria-label="Send mail">
              <fa-icon class="fab" [icon]="faEnvelope" size="lg"></fa-icon>
            </a>

            <a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number">
              <fa-icon class="fab" [icon]="faPhone" size="lg"></fa-icon>
            </a>

            <a href="https://discord.com/users/860206216893693973" aria-label="Discord profile">
              <fa-icon class="fab" [icon]="faDiscord" size="lg"></fa-icon>
            </a>

            <a href="https://github.com/fraujulian" aria-label="GitHub profile">
              <fa-icon class="fab" [icon]="faGithub" size="lg"></fa-icon>
            </a>

            <a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile">
              <fa-icon class="fab" [icon]="faLinkedin" size="lg"></fa-icon>
            </a>
          </div>
        </div>

        <div class="hero-action-links">
          <button class="action-link" type="button" (click)="scrollToProjectsSection()">View projects</button>
          <button class="action-link" type="button" (click)="scrollToAboutSection()">About me</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]="'Show next highlight image'"
            [title]="portraitHighlights.length > 1 ? 'Show next image' : 'Single image'"
          >
            <div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching">
              <img
                class="hero-feature-image"
                [src]="currentPortraitHighlight.image"
                width="560"
                height="420"
                [alt]="global.firstname + ' highlight'"
              />
              @if (currentPortraitHighlightIndex === 0) {
                <span class="portrait-click-hint">Click me!</span>
              }
              <span class="portrait-caption">{{ currentPortraitHighlight.text }}</span>
            </div>
          </button>
        </div>
      }
    </div>
  </section>

  <section
    id="about"
    class="story-section panel about-scroll-anim-enabled"
    [class.about-scroll-in-view]="isAboutSectionInView"
    [class.about-scroll-anim-ready]="isAboutSectionAnimationReady"
  >
    <div class="section-heading">
      <p class="eyebrow">About me</p>
    </div>

    <div class="story-grid">
      <div class="story-copy">
        <p>
          My name is {{ global.firstname }}, many people also call me Julie. I'm {{ age }} years old and come from Austria, where I spend a
          lot of time traveling by train between projects, meetings, and clients.
        </p>
        <p>
          I work across modern web technologies and practical business software. My focus is not on noise or unnecessary complexity, but on
          systems that are stable, clear, and actually useful in day-to-day work.
        </p>
      </div>

      <div class="story-detail">
        <button class="detail-toggle" type="button" (click)="toggleBio()">
          <span>{{ isLongBioShown ? 'Hide extended profile' : 'Read extended profile' }}</span>
          <fa-icon [icon]="isLongBioShown ? faArrowDown : faArrowRight"></fa-icon>
        </button>

        @if (isLongBioMounted) {
          <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown" [class.detail-panel-leave]="!isLongBioShown">
            <p>
              My biggest hobby apart from software development is scuba diving. Floating in deep water and only thinking about the here and
              now always brings me back to a calmer pace.
            </p>
            <p>
              I currently work mainly for the Viennese company SobIT GmbH and also take on freelance projects for companies, associations,
              and private clients. The common thread is always the same: practical software, well delivered.
            </p>
            <button class="inline-link inline-link-button" type="button" (click)="scrollToContactLinks()">Get in touch</button>
          </div>
        }
      </div>
    </div>
  </section>

  <section id="projects" class="projects-section">
    <div class="section-heading section-heading-centered">
      <p class="eyebrow">current Jobs & Projects</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]="'Open project ' + project.title"
          [attr.data-project-index]="i"
        >
          @if (project.icon) {
            <img
              class="project-icon"
              [class.project-icon-circle]="project.CircleIcon !== false"
              [src]="project.icon"
              [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" aria-label="Project languages">
                @for (language of project.languages; 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>
