import type { Metadata } from 'next'
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('whyus', locale)
  return pageMeta(locale, '/whyus', p.seo?.title, p.seo?.description)
}

/** «ليه تختارنا؟»: the learning journey card by card, the figures, who it is for, and a closing call. */
export default async function WhyUsPage({ params }: Props) {
  const { locale } = await params
  const [{ settings: s, courses }, p] = await Promise.all([loadSite(locale), loadPage('whyus', locale)])
  const cards = p.cards || []
  const ctaHref = p.ctaHref ? (p.ctaHref.startsWith('/') ? localHref(locale, p.ctaHref) : p.ctaHref) : ''

  return (
    <Shell locale={locale} path="/whyus" settings={s} courses={courses} config={publicConfig()}>
      <div className="container">
        <header className="tk-why-hero">
          {p.kicker ? <span className="tk-why-kicker">{p.kicker}</span> : null}
          <h1>{p.h1}</h1>
          {p.lead ? <p>{p.lead}</p> : null}
          {(p.steps || []).length ? (
            <ol className="tk-why-steps">
              {(p.steps || []).map((x) => <li key={x.id || x.label}>{x.label}</li>)}
            </ol>
          ) : null}
        </header>

        {cards.length ? (
          <section className="section">
            {p.cardsTitle ? <h2>{p.cardsTitle}</h2> : null}
            <div className="tk-why-cards">
              {cards.map((x, i) => (
                <article
                  className={`feature tk-why-card${cards.length % 2 && i === cards.length - 1 ? ' wide' : ''}`}
                  key={x.id || x.title}
                >
                  <span className="tk-why-n num">{i + 1}</span>
                  <h3>{x.title}</h3>
                  {x.line ? <p className="tk-why-line">{x.line}</p> : null}
                  {x.text ? <p>{x.text}</p> : null}
                </article>
              ))}
            </div>
          </section>
        ) : null}

        {(p.figures || []).length ? (
          <section className="tk-why-figures">
            {(p.figures || []).map((x) => (
              <div className="feature" key={x.id || x.n}>
                <b>{x.n}</b>
                {x.label ? <span>{x.label}</span> : null}
              </div>
            ))}
          </section>
        ) : null}

        {p.student?.title || p.teacher?.title ? (
          <section className="section">
            {p.audienceTitle ? <h2>{p.audienceTitle}</h2> : null}
            <div className="tk-why-aud">
              {p.student?.title ? (
                <div className="panel now">
                  {p.student.tag ? <span className="tk-why-tag">{p.student.tag}</span> : null}
                  <h3>{p.student.title}</h3>
                  {p.student.text ? <p>{p.student.text}</p> : null}
                </div>
              ) : null}
              {p.teacher?.title ? (
                <div className="panel next">
                  {p.teacher.tag ? <span className="tk-why-tag">{p.teacher.tag}</span> : null}
                  <h3>{p.teacher.title}</h3>
                  {p.teacher.text ? <p>{p.teacher.text}</p> : null}
                  {(p.teacher.points || []).length ? (
                    <ul>
                      {(p.teacher.points || []).map((x) => <li key={x.id || x.text}>{x.text}</li>)}
                    </ul>
                  ) : null}
                </div>
              ) : null}
            </div>
          </section>
        ) : null}

        {(p.quotes || []).length ? (
          <section className="section">
            {p.quotesTitle ? <h2>{p.quotesTitle}</h2> : null}
            <div className="tk-why-quotes">
              {(p.quotes || []).map((x) => <q key={x.id || x.text}>{x.text}</q>)}
            </div>
          </section>
        ) : null}

        {p.ctaTitle ? (
          <div className="section">
            <div className="cta">
              <div>
                <h2>{p.ctaTitle}</h2>
                {p.ctaLead ? <p>{p.ctaLead}</p> : null}
              </div>
              {ctaHref && p.ctaLabel ? <a className="btn" href={ctaHref}>{p.ctaLabel}</a> : null}
            </div>
          </div>
        ) : null}
      </div>
    </Shell>
  )
}