/* global React, ReactDOM, INK, PULSE, Reveal, FinalSection */
// Legal document shell — renders a pre-converted policy document (window.SOZEE_LEGAL_DOC)
// in the Sozee editorial prose style, with a sticky section index on desktop.
const { useState: lgS, useEffect: lgE, useRef: lgR } = React;

const LEGAL_INDEX = [
  ['Terms of Service', '/terms-of-service'],
  ['Privacy Policy', '/privacy-policy'],
  ['Acceptable Use', '/acceptable-use'],
  ['Refund & Cancellation', '/refund-policy'],
  ['2257 Compliance', '/2257-compliance'],
  ['Anti-Trafficking', '/anti-trafficking'],
  ['Complaints & Removal', '/complaints-removal'],
];

const LegalTOC = ({ html }) => {
  const [heads, setHeads] = lgS([]);
  const [active, setActive] = lgS('');
  lgE(() => {
    const els = Array.from(document.querySelectorAll('.legal-prose h2'));
    setHeads(els.map(e => [e.id, e.textContent]));
    let raf = 0;
    const calc = () => {
      raf = 0; let cur = els.length ? els[0].id : '';
      for (const e of els) if (e.getBoundingClientRect().top <= 150) cur = e.id;
      setActive(cur);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(calc); };
    window.addEventListener('scroll', onScroll, { passive: true });
    calc();
    return () => window.removeEventListener('scroll', onScroll);
  }, [html]);
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: Math.max(0, el.getBoundingClientRect().top + window.scrollY - 100), behavior: 'smooth' });
  };
  return (
    <aside style={{ position: 'sticky', top: 108, alignSelf: 'start', display: 'flex', flexDirection: 'column', gap: 28 }}>
      <div>
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--brand-purple-700)', marginBottom: 12 }}>On this page</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {heads.map(([id, label]) => {
            const on = active === id;
            return (
              <span key={id} onClick={() => go(id)} style={{ display: 'flex', gap: 10, cursor: 'pointer', padding: '6px 0', fontSize: 12.5, lineHeight: 1.4,
                fontWeight: on ? 700 : 500, color: on ? INK : 'var(--text-tertiary)', transition: 'color 0.2s cubic-bezier(0.2,0.8,0.2,1)' }}>
                <span style={{ width: 2, alignSelf: 'stretch', borderRadius: 2, background: on ? PULSE : 'rgba(28,27,27,0.12)', flexShrink: 0 }} />
                {label}
              </span>);
          })}
        </div>
      </div>
      <div>
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--brand-purple-700)', marginBottom: 12 }}>All policies</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {LEGAL_INDEX.map(([t, href]) => {
            const here = window.location.pathname.endsWith(encodeURI(href)) || decodeURI(window.location.pathname).endsWith(href);
            return <a key={t} href={href} style={{ padding: '6px 0', fontSize: 12.5, fontWeight: here ? 700 : 500, color: here ? INK : 'var(--text-tertiary)' }}>{t}</a>;
          })}
        </div>
      </div>
    </aside>
  );
};

const LegalPage = () => {
  const doc = window.SOZEE_LEGAL_DOC || { title: 'Policy', meta: [], html: '' };
  const [narrow, setNarrow] = lgS(window.innerWidth < 900);
  lgE(() => {
    const on = () => setNarrow(window.innerWidth < 900);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return (
    <div style={{ fontFamily: 'var(--font-sans)', background: '#FCF8F8' }}>
      <div data-screen-label="Legal — document" style={{ maxWidth: 1140, margin: '0 auto', padding: narrow ? '104px 22px 60px' : '132px 56px 80px' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 16 }}>
            <a href="/" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>Sozee</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.3)' }}>/</span>
            <span style={{ borderRadius: 9999, padding: '4px 11px', fontSize: 10.5, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)' }}>Legal</span>
          </div>
          <h1 style={{ font: `800 ${narrow ? 32 : 46}px/1.06 var(--font-sans)`, letterSpacing: '-0.032em', color: INK, margin: '0 0 14px', textWrap: 'balance' }}>{doc.title}</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', paddingBottom: 26, borderBottom: '1px solid rgba(28,27,27,0.1)', marginBottom: narrow ? 26 : 40 }}>
            {doc.meta.map((m, i) => (
              <React.Fragment key={m}>
                {i ? <span style={{ width: 1, height: 13, background: 'rgba(28,27,27,0.14)' }} /> : null}
                <span style={{ fontSize: 12.5, color: 'var(--text-tertiary)' }}>{m}</span>
              </React.Fragment>))}
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : 'minmax(0,1fr) 232px', gap: narrow ? 0 : 56, alignItems: 'start' }}>
          <div className="legal-prose" dangerouslySetInnerHTML={{ __html: doc.html }} />
          {!narrow && <LegalTOC html={doc.html} />}
        </div>
      </div>
      <FinalSection />
      {narrow
        ? <window.SozeeNavMobile revealAfter="always" siteHref="/" />
        : <window.SozeeNav revealAfter="always" logoHref="/" siteHref="/" />}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<LegalPage />);