@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" />
      @if (section.id === 'sequence') {
        <app-process-steps [steps]="steps()" [labelledBy]="sequenceHeadingId()" />
      }
      @if (section.id === 'scope' && deliveredOfferings().length > 0) {
        <section class="stack offerings-group" [attr.aria-labelledby]="deliveredHeadingId()">
          <h3 [id]="deliveredHeadingId()">{{ copy.deliveredOfferingsHeading }}</h3>
          <ul class="stack offerings">
            @for (offering of deliveredOfferings(); track offering.id) {
              <li class="glass-surface" [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>
      }
      @if (section.id === 'offer-boundary' && offerOfferings().length > 0) {
        <section class="stack offerings-group" [attr.aria-labelledby]="offerHeadingId()">
          <h3 [id]="offerHeadingId()">{{ copy.offerOfferingsHeading }}</h3>
          <ul class="stack offerings">
            @for (offering of offerOfferings(); track offering.id) {
              <li class="glass-surface" [attr.data-offering-status]="offering.status">
                <h4>{{ offering.title }}</h4>
                <p>{{ offering.body }}</p>
              </li>
            }
          </ul>
        </section>
      }
    }
    <section class="stack" [attr.aria-labelledby]="'reference-' + copy.routeId">
      <h2 [id]="'reference-' + copy.routeId">{{ copy.sequence.referenceHeadline }}</h2>
      <p>{{ copy.sequence.referenceNote }}</p>
      <app-case-card [caseStudy]="referenceCase()" />
    </section>
    <app-content-section [section]="copy.sequence.inquiry" />
    <app-cta-row [ctas]="copy.ctas" />
  </div>
}