Portfolio/src/app/features/services/services.html

@if (page(); as copy) {
  <div class="content-container stack page">
    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />

    @for (section of copy.sections; track section.id) {
      <app-content-section [section]="section" />
    }

    <app-systems-map
      [heading]="copy.systemsMap.heading"
      [intro]="copy.systemsMap.intro"
      [headingLevel]="2"
    />

    <section class="stack service-areas" [attr.aria-labelledby]="'service-areas-heading'">
      <h2 id="service-areas-heading">{{ copy.sectionsHeading }}</h2>

      @for (section of copy.serviceSections; track section.id) {
        <article class="service-section stack" [attr.aria-labelledby]="section.id">
          <header class="service-section-header stack">
            <h2 [id]="section.id">{{ section.title }}</h2>
            <p class="service-section-lead">{{ section.lead }}</p>
          </header>

          <section
            class="stack service-part"
            [id]="section.situation.id"
            [attr.aria-labelledby]="section.situation.id + '-heading'"
          >
            <h3 [id]="section.situation.id + '-heading'">{{ section.situation.headline }}</h3>
            @for (paragraph of section.situation.body ?? []; track $index) {
              <p>{{ paragraph }}</p>
            }
          </section>

          <section
            class="stack service-part"
            [id]="section.diagnosis.id"
            [attr.aria-labelledby]="section.diagnosis.id + '-heading'"
          >
            <h3 [id]="section.diagnosis.id + '-heading'">{{ section.diagnosis.headline }}</h3>
            @for (paragraph of section.diagnosis.body ?? []; track $index) {
              <p>{{ paragraph }}</p>
            }
          </section>

          <section
            class="stack service-part"
            [id]="section.implementation.id"
            [attr.aria-labelledby]="section.implementation.id + '-heading'"
          >
            <h3 [id]="section.implementation.id + '-heading'">
              {{ section.implementation.headline }}
            </h3>
            @for (paragraph of section.implementation.body ?? []; track $index) {
              <p>{{ paragraph }}</p>
            }
          </section>

          <section
            class="stack service-part"
            [id]="section.operation.id"
            [attr.aria-labelledby]="section.operation.id + '-heading'"
          >
            <h3 [id]="section.operation.id + '-heading'">{{ section.operation.headline }}</h3>
            @for (paragraph of section.operation.body ?? []; track $index) {
              <p>{{ paragraph }}</p>
            }
          </section>

          <section
            class="stack offerings-group"
            [attr.aria-labelledby]="deliveredHeadingId(section.id)"
          >
            <h3 [id]="deliveredHeadingId(section.id)">{{ copy.deliveredOfferingsHeading }}</h3>
            <ul class="stack offerings">
              @for (offering of deliveredOfferings(section); track offering.id) {
                <li [attr.data-offering-status]="offering.status">
                  <h4>{{ offering.title }}</h4>
                  <p>{{ offering.body }}</p>
                  @if (caseBackedNote(offering); as note) {
                    <p class="case-backed">{{ note }}</p>
                  }
                </li>
              }
            </ul>
          </section>

          <section
            class="stack offerings-group"
            [attr.aria-labelledby]="offerHeadingId(section.id)"
          >
            <h3 [id]="offerHeadingId(section.id)">{{ copy.offerOfferingsHeading }}</h3>
            <ul class="stack offerings">
              @for (offering of offerOfferings(section); track offering.id) {
                <li [attr.data-offering-status]="offering.status">
                  <h4>{{ offering.title }}</h4>
                  <p>{{ offering.body }}</p>
                </li>
              }
            </ul>
          </section>

          <section
            class="stack service-part"
            [id]="section.evidence.id"
            [attr.aria-labelledby]="section.evidence.id + '-heading'"
          >
            <h3 [id]="section.evidence.id + '-heading'">{{ section.evidence.heading }}</h3>
            <p>{{ section.evidence.note }}</p>
            <div class="evidence-cases stack">
              @for (study of evidenceCases(section); track study.id) {
                <app-case-card [caseStudy]="study" [idPrefix]="'evidence-' + section.id" />
              }
            </div>
          </section>

          <section
            class="stack service-part"
            [id]="section.inquiry.id"
            [attr.aria-labelledby]="section.inquiry.id + '-heading'"
          >
            <h3 [id]="section.inquiry.id + '-heading'">{{ section.inquiry.headline }}</h3>
            @for (paragraph of section.inquiry.body ?? []; track $index) {
              <p>{{ paragraph }}</p>
            }
            <app-cta-row [ctas]="copy.ctas.slice(-2)" />
          </section>
        </article>
      }
    </section>
  </div>
}