var React = window.React;
var { Button } = window.NobleHealthDesignSystem_07bcfa;
var I = window.NobleIcons;

/* Renders a legal document from legal-content.js.
 * Layout only — all wording lives in that file so it can be edited without
 * touching any component code. */
function LegalPage({ slug, onNav }) {
  var doc = (window.NobleLegal || {})[slug];

  React.useEffect(() => {
    try { if (window.nhTrack) window.nhTrack('legal_view', { step: 'complete' }); } catch (e) {}
  }, [slug]);

  if (!doc) {
    return (
      <main style={{ background: 'var(--surface-page)', minHeight: 460, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-16) var(--space-8)' }}>
        <div style={{ textAlign: 'center' }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-3xl)', color: 'var(--navy-900)', margin: 0 }}>Page not found</h1>
          <p style={{ color: 'var(--text-muted)', margin: '12px 0 24px' }}>That document doesn't exist.</p>
          <Button onClick={() => onNav('home')}>Back to home</Button>
        </div>
      </main>
    );
  }

  var published = doc.status === 'published';

  return (
    <main style={{ background: 'var(--surface-page)' }}>
      <div className="nh-section" style={{ maxWidth: 'var(--container-md)', margin: '0 auto', padding: 'var(--space-16) var(--space-8) var(--space-20)' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-2xs)', fontWeight: 800, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--green-700)' }}>
          <span style={{ width: 20, height: 2, background: 'var(--green-500)', borderRadius: 2 }} />
          {doc.eyebrow}
        </div>

        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-4xl)', lineHeight: 1.08, color: 'var(--navy-900)', margin: '14px 0 0', textWrap: 'balance' }}>
          {doc.title}
        </h1>

        {doc.summary && (
          <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-muted)', lineHeight: 1.6, margin: '16px 0 0', maxWidth: '65ch' }}>
            {doc.summary}
          </p>
        )}

        {published && doc.updated && (
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-subtle)', margin: '12px 0 0' }}>
            Effective {doc.updated}
          </p>
        )}

        {published ? (
          <div style={{ marginTop: 'var(--space-12)' }}>
            {doc.sections.map((s) => (
              <section key={s.heading} style={{ marginBottom: 'var(--space-10)' }}>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-xl)', color: 'var(--navy-900)', margin: '0 0 12px' }}>
                  {s.heading}
                </h2>
                {s.body.map((p, i) => (
                  <p key={i} style={{ fontSize: 'var(--text-md)', lineHeight: 'var(--leading-normal)', color: 'var(--text-body)', margin: '0 0 14px', maxWidth: '65ch' }}>
                    {p}
                  </p>
                ))}
              </section>
            ))}
          </div>
        ) : (
          /* Draft: show a graceful holding message rather than placeholder text. */
          <div style={{ marginTop: 'var(--space-10)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-8)', maxWidth: '65ch' }}>
            <p style={{ fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>
              We're finalizing this document. If you need a copy in the meantime, send us a
              care request and a coordinator will get it to you.
            </p>
            <Button style={{ marginTop: 'var(--space-6)' }} onClick={() => onNav('request')} iconRight={<I.ArrowRight width={16} height={16} />}>
              Request care
            </Button>
          </div>
        )}
      </div>
    </main>
  );
}
window.LegalPage = LegalPage;