// Legal page shell — shared by privacy.html and terms.html

const legalInline = (text, key) => {
  // **bold**, [text](url) links, and email/url autolink, verbatim otherwise.
  // Bold content is re-run through the same span parser (not pushed raw) so
  // a bolded link — **[Templates Library](templates.html)** — still
  // resolves to a real <a>, not literal bracket/paren text.
  const nodes = [];
  let i = 0, n = 0;
  // Splits a plain (non-bold) span into autolinked email / [INSERT] /
  // [text](url) / plain-text nodes. Returns an array — never pushes to the
  // outer `nodes` directly — so callers (top-level text or bold content)
  // can both use it identically.
  const parseSpan = (s) => {
    const spanNodes = [];
    const parts = s.split(/(\[INSERT[^\]]*\]|help@fireyouragency\.net|\[[^\]]+\]\([^)]+\))/g);
    parts.forEach(p => {
      if (!p) return;
      const linkMatch = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(p);
      if (p === 'help@fireyouragency.net') {
        spanNodes.push(<a key={`${key}-${n++}`} href="mailto:help@fireyouragency.net" style={{ color: '#E5421A', fontWeight: 600, textDecoration: 'none', borderBottom: '1px solid rgba(229,66,26,0.4)' }}>{p}</a>);
      } else if (p.startsWith('[INSERT')) {
        spanNodes.push(<mark key={`${key}-${n++}`} style={{ background: '#FFB800', color: '#1A0D08', fontFamily: "'JetBrains Mono', monospace", fontSize: '0.85em', fontWeight: 600, padding: '1px 5px', borderRadius: 4 }}>{p}</mark>);
      } else if (linkMatch) {
        spanNodes.push(<a key={`${key}-${n++}`} href={linkMatch[2]} style={{ color: '#E5421A', fontWeight: 600, textDecoration: 'none', borderBottom: '1px solid rgba(229,66,26,0.4)' }}>{linkMatch[1]}</a>);
      } else {
        spanNodes.push(<React.Fragment key={`${key}-${n++}`}>{p}</React.Fragment>);
      }
    });
    return spanNodes;
  };
  const push = (s) => nodes.push(...parseSpan(s));
  const re = /\*\*([^*]+)\*\*/g;
  let m;
  while ((m = re.exec(text)) !== null) {
    if (m.index > i) push(text.slice(i, m.index));
    nodes.push(<strong key={`${key}-b${n++}`} style={{ fontWeight: 700, color: '#1A0D08' }}>{parseSpan(m[1])}</strong>);
    i = m.index + m[0].length;
  }
  if (i < text.length) push(text.slice(i));
  return nodes;
};

const slugify = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');

// Parse the markdown source into blocks; also returns the h2 list for the TOC
const parseLegal = (src) => {
  const lines = src.replace(/^\n+/, '').split('\n');
  const blocks = [], toc = [];
  let para = [], list = [];
  const flushPara = () => { if (para.length) { blocks.push({ t: 'p', v: para.join('\n') }); para = []; } };
  const flushList = () => { if (list.length) { blocks.push({ t: 'ul', v: list.slice() }); list = []; } };
  const flush = () => { flushPara(); flushList(); };
  lines.forEach(raw => {
    const line = raw.trim();
    if (!line) { flush(); return; }
    if (line.startsWith('### ')) { flush(); blocks.push({ t: 'h3', v: line.slice(4) }); return; }
    if (line.startsWith('## ')) {
      flush();
      const v = line.slice(3), id = slugify(v);
      toc.push({ v, id });
      blocks.push({ t: 'h2', v, id });
      return;
    }
    if (line.startsWith('# ')) { flush(); return; } // page title comes from props
    if (line.startsWith('- ')) { flushPara(); list.push(line.slice(2)); return; }
    flushList();
    para.push(line);
  });
  flush();
  return { blocks, toc };
};

const LegalBody = ({ blocks }) => (
  <div style={{ fontSize: 16, lineHeight: 1.7, color: '#5C3D28' }}>
    {blocks.map((b, i) => {
      if (b.t === 'h2') return (
        <h2 key={i} id={b.id} style={{ fontSize: 24, fontWeight: 800, color: '#1A0D08', letterSpacing: '-0.02em', margin: '56px 0 16px', paddingTop: 28, borderTop: '2px solid #1A0D08', scrollMarginTop: 24 }}>{legalInline(b.v, i)}</h2>
      );
      if (b.t === 'h3') return (
        <h3 key={i} style={{ fontSize: 17, fontWeight: 700, color: '#1A0D08', margin: '32px 0 10px' }}>{legalInline(b.v, i)}</h3>
      );
      if (b.t === 'ul') return (
        <ul key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8, margin: '16px 0', paddingLeft: 22 }}>
          {b.v.map((li, j) => <li key={j} style={{ textWrap: 'pretty' }}>{legalInline(li, `${i}-${j}`)}</li>)}
        </ul>
      );
      const allCaps = b.v === b.v.toUpperCase() && b.v.length > 60;
      return (
        <p key={i} style={{
          margin: '0 0 16px', textWrap: 'pretty', whiteSpace: 'pre-line',
          ...(allCaps ? {
            background: '#FFF9F0', border: '2px solid #1A0D08', borderRadius: 16,
            padding: '20px 22px', fontSize: 13.5, lineHeight: 1.65, letterSpacing: '0.01em',
            fontWeight: 500, color: '#1A0D08', boxShadow: '4px 4px 0 #1A0D08', margin: '20px 0 24px',
          } : {}),
        }}>{legalInline(b.v, i)}</p>
      );
    })}
  </div>
);

const LegalPage = ({ title, kicker, source, active, sibling }) => {
  const { blocks, toc } = parseLegal(source);
  return (
    <div style={{ background: '#FFF4E8', minHeight: '100vh' }}>
      <InfernoNav active={active}/>
      <section className="sec-pad" style={{ background: '#1A0D08', color: '#FFF4E8', padding: '72px 48px 64px', borderBottom: '2px solid #1A0D08' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FF7A1A' }}>{kicker}</div>
          <h1 style={{ fontSize: 'clamp(32px, 6vw, 64px)', fontWeight: 900, letterSpacing: '-0.035em', lineHeight: 1, margin: '18px 0 0' }}>{title}</h1>
          <div style={{ marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
            {[['Effective', '[INSERT DATE]'], ['Last updated', '[INSERT DATE]']].map(([l, v]) => (
              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 8, border: '1px solid #3D2818', borderRadius: 999, padding: '7px 14px', fontSize: 12.5, color: '#A88770' }}>
                <span>{l}</span>
                <mark style={{ background: '#FFB800', color: '#1A0D08', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, padding: '1px 5px', borderRadius: 4 }}>{v}</mark>
              </div>
            ))}
            <div style={{ fontSize: 12.5, color: '#A88770' }}>Famcom Labs, Inc. · Delaware</div>
          </div>
        </div>
      </section>
      <div className="legal-grid sec-pad" style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 48px 88px', display: 'grid', gridTemplateColumns: '236px 1fr', gap: 56, alignItems: 'start' }}>
        <aside className="legal-aside" style={{ position: 'sticky', top: 24 }}>
          <div className="legal-toc" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#A88770', marginBottom: 14 }}>Contents</div>
          <nav className="legal-toc" style={{ display: 'flex', flexDirection: 'column', gap: 2, borderLeft: '2px solid rgba(26,13,8,0.14)' }}>
            {toc.map(t => (
              <a key={t.id} href={`#${t.id}`} style={{ fontSize: 13, lineHeight: 1.4, color: '#5C3D28', textDecoration: 'none', padding: '6px 0 6px 14px', marginLeft: -2, borderLeft: '2px solid transparent' }}
                onMouseEnter={e => { e.currentTarget.style.color = '#E5421A'; e.currentTarget.style.borderLeftColor = '#E5421A'; }}
                onMouseLeave={e => { e.currentTarget.style.color = '#5C3D28'; e.currentTarget.style.borderLeftColor = 'transparent'; }}>{t.v}</a>
            ))}
          </nav>
          <a href={sibling[1]} style={{ display: 'block', marginTop: 28, fontSize: 13, fontWeight: 600, color: '#1A0D08', textDecoration: 'none', border: '2px solid #1A0D08', borderRadius: 12, padding: '10px 14px', boxShadow: '3px 3px 0 #1A0D08' }}>{sibling[0]} →</a>
        </aside>
        <main style={{ maxWidth: 760 }}>
          <LegalBody blocks={blocks}/>
          <div style={{ marginTop: 48, background: '#1A0D08', color: '#FFF4E8', border: '2px solid #1A0D08', borderRadius: 24, padding: '28px 30px', boxShadow: '6px 6px 0 #E5421A' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em' }}>Questions about this {kicker.toLowerCase()}?</div>
              <a href="mailto:help@fireyouragency.net" style={{ background: '#FFF4E8', color: '#1A0D08', fontWeight: 700, fontSize: 14, textDecoration: 'none', borderRadius: 999, padding: '11px 20px', whiteSpace: 'nowrap' }}>Email us →</a>
            </div>
          </div>
        </main>
      </div>
      <InfernoFooter/>
    </div>
  );
};

Object.assign(window, { LegalPage, LegalBody, parseLegal, legalInline });