Portfolio/src/app/features/services/service-page-view/service-page-view.ts

import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
import {
  type ProcessStepCopy,
  type ServicePageId,
  type ServiceSequenceCopy,
} from '../../../core/content/content.contracts';
import { ContentService } from '../../../core/content/content.service';
import { CaseCard } from '../../../shared/case-card/case-card';
import { ContentSection } from '../../../shared/content-section/content-section';
import { CtaRow } from '../../../shared/cta-row/cta-row';
import { PageHero } from '../../../shared/page-hero/page-hero';
import { ProcessSteps } from '../../../shared/process-steps/process-steps';

function sequenceSteps(sequence: ServiceSequenceCopy): readonly ProcessStepCopy[] {
  return [sequence.situation, sequence.diagnosis, sequence.implementation, sequence.operation].map(
    (section) => ({
      id: section.id,
      title: section.headline,
      body: (section.body ?? []).join(' '),
    }),
  );
}

@Component({
  selector: 'app-service-page-view',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [PageHero, ContentSection, ProcessSteps, CaseCard, CtaRow],
  templateUrl: './service-page-view.html',
  styleUrl: './service-page-view.scss',
})
export class ServicePageView {
  readonly routeId = input.required<ServicePageId>();

  private readonly content = inject(ContentService);

  protected readonly page = computed(() => this.content.service(this.routeId())());
  protected readonly steps = computed(() => sequenceSteps(this.page().sequence));
  protected readonly referenceCase = computed(() =>
    this.content.caseStudy(this.page().sequence.referenceCaseId)(),
  );
  protected readonly sequenceHeadingId = computed(() => {
    const section = this.page().sections.find((item) => item.id === 'sequence');
    return section ? `section-${section.id}` : null;
  });
}