// ============================================================
// Tribeca Lisboa — LEGAL page app (Privacy / Cookies)
// Resolves ?doc=privacy|cookies, stays on the equivalent page
// when language changes. Reuses SiteHeader + RFooter (main site).
// ============================================================
function LegalInner() {
  const lang = React.useContext(LangContext);
  const [menu, setMenu] = React.useState(false);
  const key = getParam('id') === 'cookies' ? 'cookies' : 'privacy';
  const doc = LEGAL[key];
  return (
    <div className="lg-page">
      <SiteHeader onMenu={() => setMenu(true)} />
      <header className="lg-head">
        <div className="r-wrap">
          <div className="lg-eyebrow">{tt(lang, 'Legal', 'Legal')}</div>
          <h1 className="lg-title">{tt(lang, doc.titleEn, doc.titlePt)}</h1>
          <div className="lg-updated">{tt(lang, doc.updatedEn, doc.updatedPt)}</div>
          <p className="lg-intro">{tt(lang, doc.introEn, doc.introPt)}</p>
        </div>
      </header>
      <main className="lg-body">
        <div className="r-wrap">
          <article className="lg-doc">
            {doc.body.map((b, i) => {
              if (b.t === 'h2') return <h2 key={i}>{tt(lang, b.en, b.pt)}</h2>;
              if (b.t === 'ul') return <ul key={i}>{tt(lang, b.en, b.pt).map((li, j) => <li key={j}>{li}</li>)}</ul>;
              return <p key={i}>{tt(lang, b.en, b.pt)}</p>;
            })}
          </article>
        </div>
      </main>
      <RFooter />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function Legal() {
  const [lang] = useLang();
  return (
    <LangContext.Provider value={lang}>
      <LegalInner />
    </LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Legal />);