/* LegalPage.jsx — renderiza um documento jurídico (LGPD) a partir de LegalData.jsx */
const LegalPage = ({ slug, onNav }) => {
  const doc = (window.LEGAL_DOCS || {})[slug];

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  if (!doc) {
    return (
      <section className="legal-wrap">
        <Container>
          <p style={{ color: 'var(--ar-text-muted)' }}>Documento não encontrado.</p>
        </Container>
      </section>
    );
  }

  return (
    <section className="legal-wrap" style={{ background: 'linear-gradient(180deg, #05070D, var(--ar-bg-section))' }}>
      <Container>
        <Reveal>
          <div className="legal-head">
            <p className="legal-eyebrow">{doc.eyebrow}</p>
            <h1 className="legal-title">{doc.title}</h1>
            <p className="legal-updated">Última atualização: {window.LEGAL_UPDATED}</p>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <article className="legal-doc" dangerouslySetInnerHTML={{ __html: doc.html }} />
        </Reveal>
        <Reveal delay={180}>
          <div style={{ maxWidth: 820, margin: '0 auto' }}>
            <a className="legal-back" href="/" onClick={(e) => { e.preventDefault(); onNav && onNav('top'); }}>
              <i data-lucide="arrow-left" style={{ width: 16, height: 16 }}></i>
              Voltar ao início
            </a>
          </div>
        </Reveal>
      </Container>
    </section>
  );
};

window.LegalPage = LegalPage;