/* ===== Legal document page (Terms of Use / Privacy Policy) — real content. ===== */
const { useState, useEffect } = React;
const { SiteFooter } = window;

function LegalPage({ t, doc, onTerms, onPrivacy, onNav }){ // doc: "terms" | "privacy"
  const secs = window.LEGAL[doc][window.__lang || "ru"];
  const ids = secs.map((_,i)=>doc+"-s"+i);
  const [active,setActive] = useState(0);
  const label = doc==="terms" ? t("terms") : t("privacy");

  useEffect(()=>{
    window.scrollTo(0,0);
    setActive(0);
    const obs = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{ if(e.isIntersecting) setActive(Number(e.target.dataset.idx)); });
    },{ rootMargin:"-40% 0px -55% 0px", threshold:0 });
    ids.forEach((id,i)=>{ const el=document.getElementById(id); if(el){ el.dataset.idx=i; obs.observe(el); } });
    return ()=>obs.disconnect();
  },[doc, window.__lang]);

  const jump = (i)=>{ const el=document.getElementById(ids[i]); if(el) window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-84,behavior:"smooth"}); };

  return (
    <React.Fragment>
      <section className="terms-hero">
        <div className="wrap">
          <span className="kicker">{label}</span>
          <h1 className="display" style={{fontSize:"clamp(34px,5vw,58px)"}}>{label}</h1>
        </div>
      </section>
      <div className="wrap">
        <div className="terms-layout">
          <aside className="toc">
            <h5>{t("t_toc")}</h5>
            <div className="toc-links">
              {secs.map((s,i)=>(
                <a key={i} href="#" className={active===i?"active":""}
                  onClick={e=>{e.preventDefault(); jump(i);}}>{s.h}</a>
              ))}
            </div>
          </aside>
          <div className="terms-body">
            {secs.map((s,i)=>(
              <section key={i} id={ids[i]}>
                <h3>{s.h}</h3>
                {s.p.map((par,j)=><p key={j}>{par}</p>)}
              </section>
            ))}
          </div>
        </div>
      </div>
      <SiteFooter t={t} onTerms={onTerms} onPrivacy={onPrivacy} onNav={onNav} />
    </React.Fragment>
  );
}
Object.assign(window, { LegalPage });