import type { Metadata } from 'next'
import { Shell } from '@/components/Shell'
import { pageMeta } from '@/lib/meta'
import { type Locale, loadPage, loadSite } from '@/lib/site'

type Props = { params: Promise<{ locale: Locale }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params
  const p = await loadPage('about', locale)
  return pageMeta(locale, '/about', p.seo?.title, p.seo?.description)
}

export default async function About({ params }: Props) {
  const { locale } = await params
  const [{ settings, courses }, p, h] = await Promise.all([loadSite(locale), loadPage('about', locale), loadPage('home', locale)])
  return (
    <Shell locale={locale} path="/about" settings={settings} courses={courses}>
      <main id="main" className="section">
        <div className="wrap">
          <h1>{p.h1}</h1>
          <p className="lead narrow">{p.lead}</p>
          <h2 style={{ marginTop: 'var(--tk-space-7)' }}>{p.peopleTitle}</h2>
          <div className="grid grid--2">
            {(h.people || []).map((x) => (
              <article key={x.id} className="card person">
                <h3>{x.name}</h3>
                <p className="muted">{x.text}</p>
              </article>
            ))}
          </div>
          <h2 style={{ marginTop: 'var(--tk-space-8)' }}>{p.principlesTitle}</h2>
          <ol className="rules">
            {(p.principles || []).map((r) => (
              <li key={r.id}>{r.text}</li>
            ))}
          </ol>
          <div className="grid grid--3" style={{ marginTop: 'var(--tk-space-7)' }}>
            {(p.sections || []).map((x) => (
              <article key={x.id} className="card">
                <h3 className="card-title">{x.title}</h3>
                <p className="muted">{x.text}</p>
              </article>
            ))}
          </div>
        </div>
      </main>
    </Shell>
  )
}