// The `pages` table only has content_de/en/fr/pl columns — the live site's
// 'it' and 'de-CH' locales don't have their own translation yet, so they
// fall back to the German text until real Italian content is written.
function legalApiLang(lang) {
  return lang === 'pl' ? 'pl' : 'de';
}

function LegalPage({ t, slug }) {
  const [page, setPage] = React.useState(null);
  const [status, setStatus] = React.useState('loading');
  const apiLang = legalApiLang(window.CZ_GET_LANG());

  React.useEffect(() => {
    setStatus('loading');
    fetch(`/api/config-api.php/pages/${slug}/${apiLang}`)
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((data) => { setPage(data); setStatus('ok'); })
      .catch(() => setStatus('error'));
  }, [slug, apiLang]);

  const content = (page && page.content) || '';
  const hasPlaceholders = /\[[A-ZÀ-ÖØ-Ý]/.test(content);

  return (
    <section className="legal-page">
      <div className="container">
        {status === 'loading' && <p className="legal-loading">…</p>}
        {status === 'error' && <p>{t.legalNotFound}</p>}
        {status === 'ok' && (
          <>
            <h1>{page.title || slug}</h1>
            {hasPlaceholders && <div className="legal-incomplete-notice">{t.legalIncomplete}</div>}
            <div className="legal-content">
              {content.split(/\n\n+/).filter(Boolean).map((para, i) => <p key={i}>{para}</p>)}
            </div>
          </>
        )}
      </div>
    </section>
  );
}
Object.assign(window, { LegalPage });