// Lexamin Legal — shared shell for Privacy / Cookie / Terms pages
const { useEffect: usEfLegal } = React;

const LEGAL_TWEAK_DEFAULTS = { logoDirection: "cipher", theme: "navy" };

const LegalPage = ({ tag, title, updated, current, sections }) => {
  const [t] = useTweaks(LEGAL_TWEAK_DEFAULTS);
  usEfLegal(() => { document.body.className = t.theme === "heritage" ? "theme-heritage" : ""; }, [t.theme]);
  const inverted = t.theme !== "heritage";
  return (
    <>
      <ScrollProgress />
      <CustomCursor />
      <NavBar logoDirection={t.logoDirection} inverted={inverted} current={current} />
      <main id="main">
        <header className="page-hero legal-hero">
          <div className="wrap">
            <div className="page-hero-grid">
              <div>
                <Reveal>
                  <div className="sec-tag">
                    <span className="bracket">[</span><ScrambleText text={tag} /><span className="bracket">/</span>
                    <span>Legal</span><span className="bracket">]</span>
                  </div>
                </Reveal>
                <Reveal delay={120}><h1 style={{ fontSize: "clamp(32px, 4vw, 48px)" }}>{title}</h1></Reveal>
                <Reveal delay={280}><p className="page-hero-lede" style={{ marginTop: 12 }}>Last updated: {updated}</p></Reveal>
              </div>
            </div>
          </div>
        </header>
        <section className="content-section">
          <div className="wrap">
            <div className="legal-prose">
              {sections.map((s, i) => (
                <Reveal key={s.h} delay={i * 60}>
                  <h2>{s.h}</h2>
                  {s.body.map((p, j) => <p key={j}>{p}</p>)}
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      </main>
      <FooterBar logoDirection={t.logoDirection} />
      <FloatingWhatsApp />
    </>
  );
};
Object.assign(window, { LegalPage });