import type { Metadata } from 'next'
import { Icon } from '@/components/icons'
import { Shell } from '@/components/Shell'
import { publicConfig } from '@/lib/config'
import { pageMeta } from '@/lib/meta'
import { type Locale, loadPage, loadSite, localHref } 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: s, courses }, p, h] = await Promise.all([
    loadSite(locale),
    loadPage('about', locale),
    loadPage('home', locale),
  ])
  const cfg = publicConfig()

  return (
    <Shell locale={locale} path="/about" settings={s} courses={courses} config={cfg}>
      <div className="container pagehead">
        <h1>{p.h1}</h1>
        <p>{p.lead}</p>
      </div>

      <section className="container">
        {(p.sections || []).length ? (
          <div className="two-col">
            {(p.sections || []).map((x, i) => (
              <div className="panel" key={x.id || x.title}>
                {i === 0 ? <span className="eyebrow">{s.brandName}</span> : <div className="feature-icon"><Icon name="target" /></div>}
                <h2>{x.title}</h2>
                <p>{x.text}</p>
              </div>
            ))}
          </div>
        ) : null}

        {(p.principles || []).length ? (
          <div className="section">
            <div className="section-head">
              <div><h2>{p.principlesTitle}</h2></div>
            </div>
            <div className="panel">
              <ol>
                {(p.principles || []).map((r) => (
                  <li key={r.id}>{r.text}</li>
                ))}
              </ol>
            </div>
          </div>
        ) : null}

        {(h.people || []).length ? (
          <div className="section">
            <div className="section-head">
              <div><h2>{p.peopleTitle}</h2></div>
            </div>
            <div className="grid">
              {(h.people || []).map((x) => (
                <div className="feature" key={x.id || x.name}>
                  <h3>{x.name}</h3>
                  <p>{x.text}</p>
                </div>
              ))}
            </div>
          </div>
        ) : null}

        <div className="section">
          <div className="panel">
            <h2>{h.ctaTitle}</h2>
            <p>{h.ctaLead}</p>
            <a className="btn" href={localHref(locale, '/courses')}>
              {h.browseCta || s.cta?.all}
              <Icon name="arrow" />
            </a>
          </div>
        </div>
      </section>
    </Shell>
  )
}