@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 === 'profile') {
        <ul class="stack">
          @for (line of copy.profile; track $index) {
            <li>{{ line }}</li>
          }
        </ul>
        <app-metric-list [metrics]="copy.metrics" [labelledBy]="'section-profile'" />
      }
      @if (section.id === 'featured-cases') {
        <div class="stack">
          @for (caseStudy of featuredCases(); track caseStudy.id) {
            <app-case-card [caseStudy]="caseStudy" />
          }
        </div>
      }
    }
    <section class="stack" [attr.aria-labelledby]="'pitch-timeline'">
      <h2 id="pitch-timeline">{{ copy.timelineHeading }}</h2>
      <ol class="stack">
        @for (entry of copy.timeline; track entry.id) {
          <li>
            <p>
              <strong>{{ entry.period }}</strong>
              · {{ entry.role }}
            </p>
            <p>{{ entry.body }}</p>
          </li>
        }
      </ol>
    </section>
    <section class="stack" [attr.aria-labelledby]="'pitch-stack'">
      <h2 id="pitch-stack">{{ copy.stackHeading }}</h2>
      <ul class="stack">
        @for (group of copy.coreStack; track group.id) {
          <li>
            <p>
              <strong>{{ group.title }}</strong>
              @if (group.body) {
                — {{ group.body }}
              }
            </p>
          </li>
        }
      </ul>
    </section>
    <app-cta-row [ctas]="copy.ctas" />
  </div>
}