// Shared prose layout + components for content-heavy pages.

// Long-form prose layout: narrow column, generous spacing, semantic styles.
function Prose({ children, maxWidth = 760 }) {
  return (
    <div style={{ maxWidth, fontSize: 17, lineHeight: 1.7, color: '#0D1B2A' }} className="prose-body">
 {children}
 </div>);

}

// Page section with a stuck-on aside (left meta column, right body).
function ArticleSection({ eyebrow, title, kicker, accent = 'teal', children, background = '#fff', narrow = false }) {
  return (
    <section style={{ background, padding: '72px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1fr 1.8fr', gap: 48 }} className="stack-mobile">
 <div>
 {eyebrow && <div className="eyebrow" style={{ color: accent === 'coral' ? '#8E3B5E' : '#0D1B2A' }}>{eyebrow}</div>}
 {title && <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 16px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>{title}</h2>}
 {kicker && <p style={{ fontSize: 15, color: '#6B6659', lineHeight: 1.65, margin: 0 }}>{kicker}</p>}
 <hr className={accent === 'coral' ? 'rule-coral' : 'rule-teal'} style={{ marginTop: 18 }} />
 </div>
 <div>{children}</div>
 </div>
 </div>
 </section>);

}

// Headed prose: a simple section with title above and body below.
function ProseSection({ eyebrow, title, accent = 'teal', children, background = '#fff' }) {
  return (
    <section style={{ background, padding: '64px 0' }}>
 <div className="container">
 {(eyebrow || title) &&
        <div style={{ maxWidth: 800, marginBottom: 32 }}>
 {eyebrow && <div className="eyebrow" style={{ color: accent === 'coral' ? '#8E3B5E' : '#0D1B2A' }}>{eyebrow}</div>}
 {title && <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 0', lineHeight: 1.15, letterSpacing: '-0.01em' }}>{title}</h2>}
 </div>
        }
 <Prose>{children}</Prose>
 </div>
 </section>);

}

// Definition list / key term card (used for glossary-style content).
function TermCard({ term, definition, accent = 'teal' }) {
  return (
    <div style={{ background: '#fff', border: '1px solid #D5CFBF', padding: '20px 24px', borderLeft: `4px solid ${accent === 'coral' ? '#8E3B5E' : '#0D1B2A'}` }}>
 <div style={{ fontWeight: 700, fontSize: 17, color: '#0D1B2A', marginBottom: 8 }}>{term}</div>
 <div style={{ fontSize: 15, color: '#6B6659', lineHeight: 1.6 }}>{definition}</div>
 </div>);

}

// "Important" inline safety/clinical callout, coral accent on warm tint.
function SafetyCallout({ label = 'Important', children }) {
  return (
    <div style={{
      background: '#E8E3DA', borderLeft: '4px solid #8E3B5E',
      padding: '20px 24px', display: 'flex', gap: 14, alignItems: 'flex-start',
      borderRadius: 0, maxWidth: 800
    }}>
 <div style={{ flexShrink: 0, color: '#8E3B5E', marginTop: 1 }}>
 <i data-lucide="alert-triangle" style={{ width: 22, height: 22 }} />
 </div>
 <div>
 <div className="eyebrow" style={{ color: '#8E3B5E', marginBottom: 6 }}>{label}</div>
 <div style={{ fontSize: 16, lineHeight: 1.6, color: '#0D1B2A' }}>{children}</div>
 </div>
 </div>);

}

// Related-pages sidebar block at the bottom of a page.
function RelatedPages({ items, navigate, title = 'Related pages' }) {
  return (
    <section style={{ background: '#F7F4F0', padding: '56px 0' }}>
 <div className="container">
 <div className="eyebrow" style={{ marginBottom: 20 }}>{title}</div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="stack-mobile-2">
 {items.map((it, i) =>
          <a key={i} href={hrefFor(it.to)} onClick={(e) => {e.preventDefault();navigate(it.to);}}
          className="card-hover"
          style={{
            background: '#fff', border: '1px solid #D5CFBF',
            padding: '18px 20px', textDecoration: 'none', color: '#0D1B2A',
            display: 'flex', flexDirection: 'column', gap: 6
          }}>
 <span style={{ fontWeight: 700, fontSize: 15 }}>{it.label}</span>
 <span style={{ fontSize: 13, color: '#0D1B2A', marginTop: 2 }}>Read</span>
 </a>
          )}
 </div>
 </div>
 </section>);

}

// Resource link list (used on guide pages for external + downloadable resources)
function ResourceList({ title, items }) {
  return (
    <div>
 {title && <h3 style={{ fontSize: 20, fontWeight: 700, color: '#0D1B2A', margin: '0 0 16px' }}>{title}</h3>}
 <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
 {items.map((it, i) =>
        <li key={i}>
 <a href={it.url || '#'} target={it.url ? '_blank' : undefined} rel={it.url ? 'noopener' : undefined}
          style={{ display: 'flex', gap: 12, padding: '14px 18px', border: '1px solid #D5CFBF', background: '#fff', textDecoration: 'none', color: '#0D1B2A', alignItems: 'flex-start' }}>
 <i data-lucide={it.icon || 'external-link'} style={{ width: 18, height: 18, color: '#0D1B2A', flexShrink: 0, marginTop: 3 }} />
 <div style={{ flex: 1 }}>
 <div style={{ fontWeight: 700, fontSize: 15 }}>{it.label}</div>
 {it.body && <div style={{ fontSize: 13, color: '#6B6659', marginTop: 2 }}>{it.body}</div>}
 {it.url && <div className="ledger-mono" style={{ fontSize: 11, color: '#0D1B2A', marginTop: 4, letterSpacing: '0.04em' }}>{it.url.replace(/^https?:\/\//, '')}</div>}
 </div>
 </a>
 </li>
        )}
 </ul>
 </div>);

}

// Pull quote, full-width editorial treatment
function PullQuote({ children, attribution }) {
  return (
    <section style={{ background: '#1E3A6E', color: '#fff', padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
 <NetworkMotif opacity={0.18} stroke="#E8E3DA" />
 <div className="container" style={{ position: 'relative', maxWidth: 960 }}>
 <div style={{ fontSize: 'clamp(24px, 3vw, 36px)', fontWeight: 500, lineHeight: 1.35, letterSpacing: '-0.01em' }}>
 {children}
 </div>
 {attribution && <div style={{ marginTop: 22, fontSize: 14, color: 'rgba(255,255,255,0.75)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em' }}> {attribution}</div>}
 </div>
 </section>);

}

Object.assign(window, { Prose, ArticleSection, ProseSection, TermCard, SafetyCallout, RelatedPages, ResourceList, PullQuote });