import { h } from '../../components/h.js';
import { PageHeader } from '../../components/PageHeader.js';
import { tokens } from '@sti-ufpe/tokens';

const DIRETORIAS = Object.entries(tokens.color.diretoria);

export const diretoriasPage = {
  label: 'Diretorias',
  render(root) {
    root.append(
      PageHeader({
        eyebrow: 'Components', title: 'Diretorias STI',
        lede: 'Cada diretoria da STI UFPE possui uma cor identificadora oficial. Use o token semântico em vez do hex direto.',
        status: 'beta',
      }),

      h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 'var(--space-3)' } },
        ...DIRETORIAS.map(([k, v]) => h('div', {
          style: { border: '1px solid var(--color-border-default)', borderRadius: '8px', overflow: 'hidden', background: 'var(--color-surface-default)' }
        },
          h('div', { style: { background: v, height: '100px' } }),
          h('div', { style: { padding: 'var(--space-2)' } },
            h('strong', { style: { display: 'block', textTransform: 'capitalize' } }, k),
            h('code', { style: { fontSize: 'var(--font-size-xs)' } }, v),
            h('div', { style: { fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', marginTop: '4px' } },
              `color.diretoria.${k}`),
          )
        ))
      ),

      h('div', { class: 'callout' },
        h('p', {}, 'A atribuição cor → diretoria específica (DAA, DPL, DGS, etc.) é definida pela coordenação da STI. Solicite mapping atual via MR no ',
          h('a', { href: 'https://gitlab.ufpe.br/thiago.prazeres/design-system-sti-ufpe', target: '_blank' }, 'GitLab'), '.')),
    );
  },
};
