<section class="journey-page" [attr.dir]="i18n.dir()" [attr.data-journey-id]="journey.id">
  <div class="journey-layout">
    <article class="journey-card surface-card">
      <div class="surface-card__body">
        <div class="journey-stage">
          <div class="journey-head">
            <div>
              <h4>{{ t(currentStepDefinition.title) }}</h4>
            </div>
            <div class="journey-head__status">
              <span class="section-pill">{{ currentStep + 1 }} / {{ visibleJourneySteps.length }}</span>
            </div>
          </div>

          <article class="demo-guide-card surface-card" *ngIf="isDemoMode">
            <div class="surface-card__body demo-guide-card__body">
              <div class="demo-guide-card__head">
                <div>
                  <span class="eyebrow">{{ t('Interactive demo guide') }}</span>
                  <h5>{{ t(currentStepDefinition.subtitle) }}</h5>
                  <p>{{ t(currentStepDefinition.description) }}</p>
                </div>
                <a [routerLink]="[demoCenterRoute]" class="demo-guide-card__link">{{ t('Back to demo center') }}</a>
              </div>

              <div class="demo-guide-grid">
                <article class="summary-card" *ngFor="let card of demoGuideCards">
                  <span class="meta-label">{{ t(card.label) }}</span>
                  <strong>{{ t(card.value) }}</strong>
                </article>
              </div>

              <div class="demo-guide-notes">
                <article class="demo-guide-note" *ngIf="demoGuideFields.length">
                  <span class="meta-label">{{ t('What to complete in this step') }}</span>
                  <ul>
                    <li *ngFor="let field of demoGuideFields">{{ t(field) }}</li>
                  </ul>
                </article>

                <article class="demo-guide-note" *ngIf="demoGuideCheckpoints.length">
                  <span class="meta-label">{{ t('What success looks like') }}</span>
                  <ul>
                    <li *ngFor="let checkpoint of demoGuideCheckpoints">{{ t(checkpoint) }}</li>
                  </ul>
                </article>

                <article class="demo-guide-note" *ngIf="demoGuideLinkedApis.length">
                  <span class="meta-label">{{ t('Connected services') }}</span>
                  <ul>
                    <li *ngFor="let linkedApi of demoGuideLinkedApis">{{ linkedApi }}</li>
                  </ul>
                </article>
              </div>
            </div>
          </article>

          <div class="stage-summary-grid">
            <article class="summary-card" *ngFor="let metric of stageSummaryMetrics">
              <span class="meta-label">{{ t(metric.label) }}</span>
              <strong>{{ t(metric.value) }}</strong>
            </article>
          </div>

          <app-journey-step-form
            [fields]="currentStepFields"
            [formValues]="formValues"
            [selectedFileNames]="selectedFileNames"
            (fileSelected)="onFileSelected($event.key, $event.event)">
          </app-journey-step-form>

          <app-journey-step-actions
            [stepActions]="stepActions"
            [loading]="loading"
            (refreshRequested)="refreshCurrentStep()"
            (actionRequested)="runAction($event)">
          </app-journey-step-actions>
        </div>
      </div>
    </article>
  </div>
</section>
