// Shared renderer for legal pages (Privacy Policy, Terms of Service, DPA).
// Dark, readable, on-brand. Content is passed as a structured data model so the
// markdown source of truth in vantuz-platform/.planning/legal stays easy to mirror.

function legalInline(text) {
  // minimal **bold** support inside paragraphs / list items
  const parts = String(text).split(/\*\*/);
  return parts.map((p, i) =>
    i % 2 === 1
      ? <strong key={i} style={{ color: '#fff', fontWeight: 600 }}>{p}</strong>
      : <React.Fragment key={i}>{p}</React.Fragment>
  );
}

function LegalBlock({ block }) {
  if (typeof block === 'string') {
    return <p style={{ fontSize: 18.5, lineHeight: 1.72, color: 'var(--txt-2)', margin: '0 0 20px' }}>{legalInline(block)}</p>;
  }
  if (block.h3) {
    return <h3 style={{ fontFamily: "'Inter Tight', sans-serif", fontSize: 24, color: '#fff', fontWeight: 600, margin: '32px 0 14px', letterSpacing: '-.01em' }}>{block.h3}</h3>;
  }
  if (block.ul) {
    return (
      <ul style={{ margin: '0 0 20px', paddingLeft: 24, color: 'var(--txt-2)' }}>
        {block.ul.map((li, i) => (
          <li key={i} style={{ fontSize: 18.5, lineHeight: 1.72, marginBottom: 10 }}>{legalInline(li)}</li>
        ))}
      </ul>
    );
  }
  if (block.table) {
    return (
      <div style={{ overflowX: 'auto', margin: '0 0 22px' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 16, minWidth: 480 }}>
          <thead>
            <tr>
              {block.table.head.map((h, i) => (
                <th key={i} style={{ textAlign: 'left', padding: '12px 14px', borderBottom: '1px solid var(--ink-line)', color: 'var(--txt-4)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em', fontSize: 12 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {block.table.rows.map((r, ri) => (
              <tr key={ri}>
                {r.map((c, ci) => (
                  <td key={ci} style={{ padding: '12px 14px', borderBottom: '1px solid var(--ink-line)', color: 'var(--txt-2)', lineHeight: 1.55 }}>{legalInline(c)}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
  return null;
}

function LegalDoc({ eyebrow, title, effective, intro, sections, contact }) {
  return (
    <>
      <Nav current="" />

      <PageHero eyebrow={eyebrow} title={title} subtitle={effective} minHeight="44vh" />

      <section className="bg-ink" style={{ padding: '72px 0 110px', borderTop: '1px solid var(--ink-line)', position: 'relative' }}>
        <div className="wrap" style={{ position: 'relative' }}>
          <div style={{ maxWidth: 1000 }}>
            {(intro || []).map((b, i) => <LegalBlock key={'intro' + i} block={b} />)}

            {sections.map((s, si) => (
              <div key={si} style={{ marginTop: 40 }}>
                <h2 className="display" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', color: '#fff', fontWeight: 700, letterSpacing: '-.02em', margin: '0 0 18px', lineHeight: 1.1 }}>{s.h}</h2>
                {s.blocks.map((b, bi) => <LegalBlock key={bi} block={b} />)}
              </div>
            ))}

            {contact && (
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--txt-3)', marginTop: 52, paddingTop: 26, borderTop: '1px solid var(--ink-line)' }}>{legalInline(contact)}</p>
            )}
          </div>
        </div>
      </section>

      <FooterSection />
    </>
  );
}

window.LegalDoc = LegalDoc;