// ============================================
// LEGAL — algemene voorwaarden (en eventuele andere juridische pagina's)
// ============================================
// `docKey` bepaalt welk juridisch document we tonen: 'terms', etc.
// De inhoud komt uit content.legal[docKey].
// ============================================

function LegalPage({ navigate, docKey = 'terms' }) {
  const { Reveal, Icon } = window.LM_UI;
  const doc = window.LM_DATA?.LEGAL?.[docKey] || {};

  const renderBody = (body) => {
    if (!body) return null;
    // Split op dubbele newline → paragrafen. Lijnen met "## " worden h3.
    const blocks = String(body).split(/\n\s*\n/);
    return blocks.map((block, i) => {
      const trimmed = block.trim();
      if (trimmed.startsWith('## ')) {
        return <h3 key={i} className="display" style={{
          fontSize: 'clamp(20px, 2.4vw, 26px)',
          margin: '40px 0 16px',
          textTransform: 'none',
          letterSpacing: '-0.01em',
        }}>{trimmed.slice(3)}</h3>;
      }
      if (trimmed.startsWith('# ')) {
        return <h2 key={i} className="display" style={{
          fontSize: 'clamp(24px, 3vw, 34px)',
          margin: '48px 0 18px',
          textTransform: 'none',
          letterSpacing: '-0.01em',
        }}>{trimmed.slice(2)}</h2>;
      }
      return (
        <p key={i} style={{
          fontSize: 16,
          lineHeight: 1.7,
          color: 'var(--ink-700)',
          margin: '0 0 18px',
          whiteSpace: 'pre-wrap',
        }}>{trimmed}</p>
      );
    });
  };

  return (
    <div>
      <section className="section" style={{ paddingBottom: 32 }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <span className="stripe-accent"></span>
              <span className="eyebrow">Juridisch</span>
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 64px)', margin: '0 0 16px' }}>
              {doc.title || 'Algemene voorwaarden'}
            </h1>
            {doc.intro && (
              <p style={{ fontSize: 17, color: 'var(--ink-500)', lineHeight: 1.65, margin: '0 0 8px', maxWidth: 720 }}>
                {doc.intro}
              </p>
            )}
            {doc.lastUpdated && (
              <p className="mono" style={{ fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.1em', textTransform: 'uppercase', margin: 0 }}>
                Laatst bijgewerkt: {doc.lastUpdated}
              </p>
            )}
          </Reveal>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <Reveal>
            <div className="card" style={{ padding: '40px 48px' }}>
              {renderBody(doc.body)}
              {!doc.body && (
                <p style={{ color: 'var(--ink-500)' }}>
                  Deze pagina is nog niet ingevuld. Beheerders kunnen de tekst aanpassen via het controlepaneel → Juridisch.
                </p>
              )}
            </div>

            <div style={{ marginTop: 24, textAlign: 'center' }}>
              <button className="btn btn-ghost" onClick={() => navigate('contact')}>
                Vragen? Neem contact op <Icon.ArrowRight />
              </button>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

window.LM_PAGES = window.LM_PAGES || {};
window.LM_PAGES.Legal = LegalPage;