import { useLang } from '../context/LangContext'
import { usePageTitle } from '../lib/usePageTitle'
import { linkify } from '../lib/glossary'
import Shot from '../components/Shot'
import { ButtonLink, CtaBand, H2, PageHeader, Section, Split, Status } from '../components/ui'

export default function Nis2() {
  const { t } = useLang()
  const n = t.nis2
  usePageTitle(t.meta.nis2)

  return (
    <>
      <PageHeader eyebrow={n.eyebrow} title={n.title} lead={linkify(n.lead)} />

      <Section className="pt-0 md:pt-0">
        <H2>{n.tableTitle}</H2>
        <dl className="mt-10">
          {n.requirements.map((r) => (
            <div
              key={r.article}
              className="grid gap-x-8 gap-y-2 border-t border-line py-5 md:grid-cols-[6rem_16rem_1fr_8rem]"
            >
              <dt className="font-mono text-sm text-accent">Art. 21 {r.article}</dt>
              <dt className="text-h3 text-ink">{r.label}</dt>
              <dd className="text-ink-soft">{linkify(r.body)}</dd>
              <dd className="md:text-right">
                <Status coverage={r.coverage} label={n.coverage[r.coverage]} />
              </dd>
            </div>
          ))}
        </dl>
      </Section>

      <Section band>
        <Split aside={<H2>{n.evidenceTitle}</H2>}>
          <ul>
            {n.evidence.map((e) => (
              <li key={e} className="border-t border-line py-4 text-ink-soft first:border-t-0 first:pt-0">
                {linkify(e)}
              </li>
            ))}
          </ul>
        </Split>
        <div className="mt-14">
          <Shot name="audit-log" alt={t.shots.auditLog} caption={n.auditCaption} />
        </div>
      </Section>

      <CtaBand
        title={t.personas.cta.title}
        body={t.personas.cta.body}
        action={<ButtonLink to="/pricing">{t.personas.cta.button}</ButtonLink>}
      />
    </>
  )
}