/*
 * Renders the Privacy Notice (/#privacy) and Terms of Use (/#terms) from
 * window.SYNTH_LEGAL (legalContent.js) in the FAQ page's visual language:
 * same page padding, 760px measure, mono eyebrow, display H1, rule-separated
 * sections, 16.5/1.7 body at a 640px measure, mono footnote.
 *
 * Unlike the FAQ these sections are NOT collapsible — legal text should be
 * readable and searchable on the page, not hidden behind a disclosure.
 */
function LegalInline({ text, onNav = () => {} }) {
  // **bold** | *italic* | [label](href). Links to /#page use the SPA router;
  // anything else (mailto:, https:) is a normal anchor.
  const parts = String(text).split(/(\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g);
  const link = { color: 'var(--syn-orange-700)', textDecoration: 'underline', textUnderlineOffset: 3, cursor: 'pointer' };
  return (
    <React.Fragment>
      {parts.map((t, i) => {
        if (!t) return null;
        if (t.startsWith('**') && t.endsWith('**')) {
          return <strong key={i} style={{ fontWeight: 600, color: 'var(--syn-navy)' }}>{t.slice(2, -2)}</strong>;
        }
        if (t.startsWith('*') && t.endsWith('*')) {
          return <em key={i}>{t.slice(1, -1)}</em>;
        }
        const m = t.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
        if (m) {
          const [, label, href] = m;
          if (href.startsWith('/#')) {
            return <a key={i} onClick={() => onNav(href.slice(2))} style={link}>{label}</a>;
          }
          return <a key={i} href={href} style={link}>{label}</a>;
        }
        return <React.Fragment key={i}>{t}</React.Fragment>;
      })}
    </React.Fragment>
  );
}

function LegalPage({ doc = 'privacy', onNav = () => {} }) {
  const d = (window.SYNTH_LEGAL || {})[doc];
  const { isPhone } = window.useIsMobile();
  if (!d) return <main style={{ padding: 88 }}>Not found.</main>;

  const body = {
    fontFamily: 'var(--syn-font-body)', fontSize: 16.5, lineHeight: 1.7,
    color: 'var(--syn-fg-muted)', margin: '0 0 16px', maxWidth: 640,
  };

  return (
    <main style={{ padding: isPhone ? '56px 20px 80px' : '88px 48px 112px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--syn-fg-subtle)', fontWeight: 500, marginBottom: 20,
        }}>{d.eyebrow}</div>

        <h1 style={{
          fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 34 : 56, fontWeight: 600,
          letterSpacing: '-0.035em', lineHeight: 1.04, color: 'var(--syn-navy)', margin: '0 0 18px',
        }}>{d.title}</h1>

        <div style={{
          fontFamily: 'var(--syn-font-mono)', fontSize: 12, lineHeight: 1.6, letterSpacing: '0.02em',
          color: 'var(--syn-fg-subtle)', margin: '0 0 40px',
        }}>{d.updated}</div>

        {d.intro ? <p style={{ ...body, margin: '0 0 48px' }}><LegalInline text={d.intro} onNav={onNav} /></p> : null}

        <div style={{ borderTop: '1px solid var(--syn-rule)' }}>
          {d.sections.map((s, i) => (
            <section key={i} style={{
              borderBottom: '1px solid var(--syn-rule)',
              padding: isPhone ? '24px 2px 4px' : '30px 4px 8px',
            }}>
              <h2 style={{
                fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 18 : 23, fontWeight: 600,
                letterSpacing: '-0.015em', color: 'var(--syn-navy)', margin: '0 0 14px',
              }}>{s.h}</h2>
              {(s.p || []).map((t, j) => (
                <p key={'p' + j} style={body}><LegalInline text={t} onNav={onNav} /></p>
              ))}
              {s.ul ? (
                <ul style={{ ...body, paddingLeft: 22, margin: '0 0 16px' }}>
                  {s.ul.map((t, j) => (
                    <li key={'l' + j} style={{ marginBottom: 8 }}><LegalInline text={t} onNav={onNav} /></li>
                  ))}
                </ul>
              ) : null}
            </section>
          ))}
        </div>

        {d.footnote ? (
          <p style={{
            fontFamily: 'var(--syn-font-mono)', fontSize: 12, lineHeight: 1.6, letterSpacing: '0.02em',
            color: 'var(--syn-fg-subtle)', margin: '40px 0 0',
          }}>{d.footnote}</p>
        ) : null}
      </div>
    </main>
  );
}
window.LegalInline = LegalInline;
window.LegalPage = LegalPage;