@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'" />
        <div appReveal class="home-reveal">
          <app-systems-map
            [heading]="copy.systemsMap.heading"
            [intro]="copy.systemsMap.intro"
            [headingLevel]="2"
          />
        </div>
      }
      @if (section.id === 'featured-cases') {
        <div appReveal class="home-reveal stack">
          @for (caseStudy of featuredCases(); track caseStudy.id) {
            <app-case-card [caseStudy]="caseStudy" />
          }
        </div>
      }
    }
    @for (audience of copy.audiences; track audience.id) {
      <section class="stack" [id]="audience.id" [attr.aria-labelledby]="'audience-' + audience.id">
        <h2 [id]="'audience-' + audience.id">{{ audience.headline }}</h2>
        <p>{{ audience.body }}</p>
        <ul>
          @for (bullet of audience.bullets; track $index) {
            <li>{{ bullet }}</li>
          }
        </ul>
        <app-cta-row [ctas]="audience.ctas" />
      </section>
    }
  </div>
}