// components/GlossarioPage.jsx — AI glossary
const GLOSSARIO_KEYS = [
  'agente', 'byok', 'rag', 'embedding', 'prompt',
  'context_window', 'fine_tuning', 'stripe_connect',
  'white_label', 'memoria', 'observabilidade', 'churn',
];

const GlossarioPage = () => {
  const items = GLOSSARIO_KEYS.map(k => ({
    key: k,
    term: t('glossario.terms.' + k + '.term'),
    def: t('glossario.terms.' + k + '.def'),
  }));
  return (
    <div className="aff-page">
      <section className="aff-hero">
        <div className="container">
          <span className="t-eyebrow">{t('glossario.hero.eyebrow')}</span>
          <h1>{t('glossario.hero.title_a')} <em>{t('glossario.hero.title_em')}</em>{t('glossario.hero.title_b')}</h1>
          <p>{t('glossario.hero.sub')}</p>
        </div>
      </section>

      <section className="container" style={{paddingBottom: '64px'}}>
        <dl style={{display:'grid', gap:'24px', maxWidth:'820px'}}>
          {items.map((it, i) => (
            <div key={i} id={it.key.replace(/_/g, '-')} style={{padding:'24px', borderRadius:'12px', background:'rgba(255,255,255,0.02)', border:'1px solid rgba(255,255,255,0.06)'}}>
              <dt style={{fontSize:'18px', fontWeight:600, color:'var(--fg)', marginBottom:'8px'}}>{it.term}</dt>
              <dd style={{margin:0, color:'var(--muted)', lineHeight:1.6}}>{it.def}</dd>
            </div>
          ))}
        </dl>
      </section>
    </div>
  );
};