// Home, mounted at `/` (default locale) and mirrored at `/de` by
// src/pages/[locale]/index.tsx. `renderMode = 'static'` pre-renders one
// HTML file per locale at build time.
//
// `meta` is a FUNCTION of `{ locale }` — that's what makes each variant's
// <title> / <description> localised in the pre-rendered HTML. A plain
// `meta` object would leave the head English on /de. `locale` is driven
// by params.locale on the [locale] route, defaultLocale on the bare path.

import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T, useT, useLocale } from '@voltro/i18n'
import { getCatalog } from '../lib/locale'

export const renderMode = 'static' as const

export const meta = ({ locale }: { locale: string }): PageMeta => {
  const c = getCatalog(locale)
  return {
    title: c['meta.home.title'],
    description: c['meta.home.description'],
  }
}

export default function Index(): ReactNode {
  const locale = useLocale()
  // Imperative form for an attribute-ish string; <T> for JSX.
  const greeting = useT('home.title', { name: 'Voltro' })
  return (
    <article>
      <h1>{greeting}</h1>
      <p className="muted">
        <T id="home.tagline" />
      </p>
      <p>
        <T id="home.body" />
      </p>
      <p>
        <T id="home.activeLocale" values={{ locale: locale.toUpperCase() }} />
      </p>
    </article>
  )
}