const { Alert, Card, CardContent, Icon } = window.BeyonddoDesignSystem_2c6c3a;

// Company-specific facts are left as [[placeholders]] rather than invented.
// They render as visibly unfilled chips so nobody mistakes a template for a
// finished legal document.
function withPlaceholders(text, keyPrefix) {
  return text.split(/(\[\[[^\]]+\]\])/g).map((part, i) => {
    if (!/^\[\[.*\]\]$/.test(part)) return part;
    return (
      <mark key={keyPrefix + i}
        style={{ display: 'inline', background: 'var(--amber-50)', color: 'var(--warning-strong)', fontFamily: 'var(--font-mono)', fontSize: '0.9em', padding: '1px 6px', borderRadius: 'var(--radius-xs)', border: '1px dashed var(--warning-strong)' }}>
        {part.slice(2, -2)}
      </mark>
    );
  });
}

function LegalScreen({ docKey, locale, t, onNavigate }) {
  const L = (window.LEGAL_STRINGS || {})[locale] || {};
  const doc = (L.docs || {})[docKey];
  if (!doc) return null;

  return (
    <main style={{ maxWidth: 'var(--container-prose, 46rem)', margin: '0 auto', padding: 'var(--space-12) clamp(1rem, 4vw, 5rem) var(--space-20)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginBottom: 'var(--space-8)' }}>
        <Eyebrow>{L.updated} {L.date}</Eyebrow>
        <h1 style={{ fontSize: 'var(--text-h1)', letterSpacing: '-0.02em' }}>{doc.title}</h1>
        <p style={{ fontSize: 'var(--text-body-lg)', color: 'var(--text-muted)', lineHeight: 'var(--leading-relaxed)' }}>{doc.sub}</p>
      </div>

      <div style={{ marginBottom: 'var(--space-10)' }}>
        <Alert tone="warning" title={L.noticeTitle}><span>{withPlaceholders(L.notice, 'n')}</span></Alert>
      </div>

      <Card>
        <CardContent style={{ padding: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
          {doc.sections.map(([heading, paragraphs], si) => (
            <section key={heading} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <h2 style={{ fontSize: 'var(--text-h3)', letterSpacing: '-0.015em' }}>
                <span className="bd-numeric" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginRight: 'var(--space-3)' }}>
                  {String(si + 1).padStart(2, '0')}
                </span>
                {heading}
              </h2>
              {paragraphs.map((p, pi) => (
                <p key={pi} style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', margin: 0 }}>
                  {withPlaceholders(p, si + '-' + pi + '-')}
                </p>
              ))}
            </section>
          ))}
        </CardContent>
      </Card>

      <div style={{ marginTop: 'var(--space-8)' }}>
        <a href="#/home" onClick={(e) => { e.preventDefault(); onNavigate('home'); window.scrollTo(0, 0); }}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 'var(--text-sm)' }}>
          <Icon name="arrow-left" size={14} /> Beyonddo
        </a>
      </div>
    </main>
  );
}

Object.assign(window, { LegalScreen });