/* ============================================================
   SAYRU — legal.jsx  (shared legal/policy page body)
   Reads window.LEGAL[docKey] and renders TR/EN/AZ via i18n lang.
   ============================================================ */
function LegalPage({ docKey }) {
  const { lang } = useT();
  const [, tick] = React.useState(0);
  React.useEffect(() => {
    const h = () => tick(t => t + 1);
    window.addEventListener('sayru-live-update', h);
    return () => window.removeEventListener('sayru-live-update', h);
  }, []);
  const doc = (window.LEGAL && window.LEGAL[docKey]) || {};
  const c = doc[lang] || doc.tr || { title: '', sections: [] };
  const crumbHome = { tr: 'Anasayfa', en: 'Home', az: 'Ana səhifə' }[lang] || 'Anasayfa';

  return (
    <main className="portal">
      <section className="legal-hero dark">
        <div className="cc-grid portal-hero__grid"></div>
        <div className="hero__glow hero__glow--1"></div>
        <div className="wrap legal-hero__in">
          <nav className="crumb crumb--light">
            <a href="index.html">{crumbHome}</a>
            <span className="crumb__sep">/</span>
            <span className="crumb__cur">{c.title}</span>
          </nav>
          <h1 className="legal-hero__title">{c.title}</h1>
          {c.updated && <div className="legal-hero__updated mono">{c.updated}</div>}
        </div>
      </section>

      <section className="section">
        <div className="wrap legal-body">
          <article className="legal-doc">
            {c.intro && <p className="legal-intro">{c.intro}</p>}
            {(c.sections || []).map((s, n) => (
              <div className="legal-sec" key={n}>
                <h2 className="legal-sec__h"><span className="legal-sec__n mono">{String(n + 1).padStart(2, '0')}</span> {s.h}</h2>
                <p className="legal-sec__p">{s.p}</p>
              </div>
            ))}
            <div className="legal-note mono">
              {{ tr: 'Bu metin bilgilendirme amaçlıdır ve şirketimizin uyum sorumlusu tarafından gözden geçirilerek yayımlanır.',
                 en: 'This text is for information purposes and is published after review by our compliance owner.',
                 az: 'Bu mətn məlumat xarakterlidir və uyğunluq məsuliyyətlimiz tərəfindən nəzərdən keçirilərək yayımlanır.' }[lang]}
            </div>
          </article>

          <aside className="legal-aside">
            <div className="legal-aside__card">
              <div className="legal-aside__h">{ { tr: 'Belgeler', en: 'Documents', az: 'Sənədlər' }[lang] }</div>
              <a href="gizlilik-politikasi.html" className={docKey === 'privacy' ? 'on' : ''}>{ { tr: 'Gizlilik Politikası', en: 'Privacy Policy', az: 'Məxfilik Siyasəti' }[lang] }</a>
              <a href="bilgi-guvenligi-politikasi.html" className={docKey === 'infosec' ? 'on' : ''}>{ { tr: 'Bilgi Güvenliği Politikası', en: 'Information Security Policy', az: 'İnformasiya Təhlükəsizliyi' }[lang] }</a>
              <a href="kvkk.html" className={docKey === 'kvkk' ? 'on' : ''}>{ { tr: 'Kişisel Verilerin Korunması', en: 'Protection of Personal Data', az: 'Şəxsi Məlumatların Qorunması' }[lang] }</a>
            </div>
            <div className="legal-aside__card legal-aside__contact">
              <div className="legal-aside__h">{ { tr: 'İletişim', en: 'Contact', az: 'Əlaqə' }[lang] }</div>
              <a href={'mailto:' + contactInfo().email}><Icon name="mail" size={15} /> {contactInfo().email}</a>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}
window.LegalPage = LegalPage;