// components/LegalPage.jsx — static legal content renderer
// UI scaffolding (breadcrumb, ToC head, "last updated" label) is translated.
// The legal body itself stays in PT (the documents are tied to BR law); when
// the active language isn't PT, a small notice tells the visitor.
const LegalPage = () => {
  const doc = window.LEGAL_DOC;
  const lang = (typeof window !== 'undefined' && window.MAI_LANG) || 'pt';
  return (
    <main className="legal-page">
      <section className="legal-hero">
        <div className="container">
          <nav className="post-breadcrumb">
            <a href="../index.html">{t('legal.hero_breadcrumb_home')}</a>
            <span className="sep">/</span>
            <span>{t('legal.hero_breadcrumb_legal')}</span>
          </nav>
          <span className="t-eyebrow">{doc.kicker}</span>
          <h1 className="legal-title">{doc.title}</h1>
          <p className="legal-updated mono">{t('legal.updated_label')} {doc.updated}</p>
        </div>
      </section>

      {lang !== 'pt' && (
        <section>
          <div className="container">
            <p className="legal-pt-only-notice mono" style={{margin:'0 0 12px', padding:'12px 16px', border:'1px solid rgba(255,255,255,0.1)', borderRadius:'8px', color:'rgba(255,255,255,0.6)', fontSize:'12px', letterSpacing:'0.05em'}}>
              {t('legal.body_pt_only')}
            </p>
          </div>
        </section>
      )}

      <section className="legal-body">
        <div className="container legal-layout">
          <aside className="legal-toc">
            <div className="legal-toc-head">{t('legal.toc_head')}</div>
            <ol>
              {doc.sections.map((s, i) => (
                <li key={s.id}>
                  <a href={"#" + s.id}>
                    <span className="num">{String(i + 1).padStart(2, "0")}</span>
                    <span>{s.label}</span>
                  </a>
                </li>
              ))}
            </ol>
          </aside>
          <article className="legal-content" dangerouslySetInnerHTML={{ __html: doc.bodyHtml }} />
        </div>
      </section>
    </main>
  );
};