<section class="mx-auto max-w-3xl px-6 py-12">
  <h1
    class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100"
    i18n="@@page.home.title"
  >
    Welcome to APF Portal
  </h1>
  <p
    class="mt-4 text-base leading-relaxed text-gray-700 dark:text-gray-300"
    i18n="@@page.home.intro"
  >
    This is the placeholder home page for the APF Portal. Real content lands once the comms team and
    the accessibility review panel sign off on the copy.
  </p>

  <section
    aria-labelledby="system-status-heading"
    class="mt-10 rounded-md border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900"
  >
    <h2
      id="system-status-heading"
      class="text-base font-medium text-gray-900 dark:text-gray-100"
      i18n="@@page.home.status.title"
    >
      System status
    </h2>
    @if (isLoading()) {
    <p
      class="mt-2 text-sm text-gray-600 dark:text-gray-400"
      aria-live="polite"
      i18n="@@page.home.status.loading"
    >
      Checking the backend…
    </p>
    } @else if (health(); as h) {
    <dl class="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
      <dt class="text-gray-500 dark:text-gray-400" i18n="@@page.home.status.service">Service</dt>
      <dd class="font-medium text-gray-900 dark:text-gray-100">{{ h.service }}</dd>
      <dt class="text-gray-500 dark:text-gray-400" i18n="@@page.home.status.version">Version</dt>
      <dd class="font-medium text-gray-900 dark:text-gray-100">{{ h.version }}</dd>
      <dt class="text-gray-500 dark:text-gray-400" i18n="@@page.home.status.uptime">Uptime</dt>
      <dd class="font-medium text-gray-900 dark:text-gray-100">
        <ng-container i18n="@@page.home.status.uptimeValue">{{ h.uptimeSeconds }} s</ng-container>
      </dd>
      <dt class="text-gray-500 dark:text-gray-400" i18n="@@page.home.status.status">Status</dt>
      <dd class="font-medium text-green-700 dark:text-green-400">{{ h.status }}</dd>
    </dl>
    } @else if (isError()) {
    <p
      class="mt-2 text-sm text-amber-700 dark:text-amber-300"
      role="status"
      i18n="@@page.home.status.error"
    >
      Backend unreachable. The BFF dev server may not be running, or CORS is misconfigured.
    </p>
    }
  </section>
</section>
