/* Bilermen - Privacy Policy / legal page (bilingual EN + RU).
   Content lives in window.SITE_DATA.LEGAL and is editable in the admin "Legal" section.
   Paragraphs in each section body are separated by a blank line; {email} is replaced
   with the contact email. Linked from the footer. */

function PrivacyScreen({ navigate }) {
  const lang = window.SITE_LANG || 'en';
  const c = (window.SITE_DATA.CONTACTS && window.SITE_DATA.CONTACTS[0]) || {};
  const email = c.email || 'info@bilermen-partners.com';
  const D = window.SITE_DATA.LEGAL || {};
  const pick = (k) => (lang === 'ru' ? (D[k + '_ru'] || D[k]) : D[k]) || '';
  const fill = (s) => String(s || '').replace(/\{email\}/g, email);

  const updated = pick('updated');
  const updatedLabel = pick('updatedLabel') || (lang === 'ru' ? 'Обновлено:' : 'Last updated:');
  const title = pick('title') || (lang === 'ru' ? 'Политика конфиденциальности' : 'Privacy Policy');
  const intro = fill(pick('intro'));
  const sections = (D.sections || []).map((s) => ({
    h: lang === 'ru' ? (s.h_ru || s.h) : s.h,
    paras: fill(lang === 'ru' ? (s.body_ru || s.body) : s.body).split(/\n\n+/),
  }));
  const termsTitle = pick('termsTitle');
  const termsBody = fill(pick('termsBody'));
  const crumb = lang === 'ru' ? '← На главную' : '← Home';

  const h2Style = { fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 22, lineHeight: 1.25, color: 'var(--color-ink)', margin: '0 0 12px' };

  return (
    <>
      <section className="subhero" data-screen-label="Privacy Policy">
        <div className="container">
          <FadeIn>
            <a className="crumb" onClick={() => navigate('/')}>{crumb}</a>
            <h1 className="display-lg" style={{ maxWidth: 820 }}>{title}</h1>
          </FadeIn>
        </div>
      </section>
      <section>
        <div className="container">
          <article className="article-body">
            <FadeIn>
              <div style={{ font: '600 13px/1.4 var(--font-sans)', letterSpacing: '0.5px', color: 'var(--color-muted)', marginBottom: 28 }}>
                {updatedLabel} {updated}
              </div>
              {intro && <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--color-ink)', marginBottom: 36 }}>{intro}</p>}
              {sections.map((s, i) => (
                <div key={i} style={{ marginBottom: 28 }}>
                  <h2 style={h2Style}>{s.h}</h2>
                  {s.paras.map((p, j) => <p key={j} style={{ marginBottom: 10 }}>{p}</p>)}
                </div>
              ))}
              {termsTitle && (
                <div style={{ marginTop: 48, paddingTop: 28, borderTop: '1px solid var(--color-hairline)' }}>
                  <h2 style={h2Style}>{termsTitle}</h2>
                  <p>{termsBody}</p>
                </div>
              )}
            </FadeIn>
          </article>
        </div>
      </section>
      <CtaDark navigate={navigate} />
    </>
  );
}

window.PrivacyScreen = PrivacyScreen;