import { Component } from '@angular/core';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { UnionsSection } from './unions.section';
import { RemoteDataSection } from './remote-data.section';
import { ParseSection } from './parse.section';
import { FormMachineSection } from './form-machine.section';
import { VragenlijstSection } from './vragenlijst.section';
import { PiiSection } from './pii.section';

/** Teaching showcase: each section pairs the impossible-state-permitting "before"
    with the "after" where the type system rules it out. Composition-only. */
@Component({
  selector: 'app-concepts-page',
  imports: [
    PageShellComponent,
    UnionsSection,
    RemoteDataSection,
    ParseSection,
    FormMachineSection,
    VragenlijstSection,
    PiiSection,
  ],
  template: `
    <app-page-shell heading="Onmogelijke toestanden onmogelijk maken" backLink="/dashboard">
      <p class="app-lead">
        Vijf functionele patronen die atomic design makkelijker maakt om te tonen — telkens "fout"
        (de oude vorm liet het toe) naast"goed" (het type maakt het onmogelijk).
      </p>
      <app-concepts-unions-section />
      <app-concepts-remote-data-section />
      <app-concepts-parse-section />
      <app-concepts-form-machine-section />
      <app-concepts-vragenlijst-section />
      <app-concepts-pii-section />
    </app-page-shell>
  `,
})
export class ConceptsPage {}