// Generic long-form content page shell — Changelog, Roadmap, Docs, Security,
// About, Brand Kit, etc. Same sidebar-TOC + markdown-body engine as
// legal-shell.jsx (parseLegal/LegalBody/legalInline, reused as-is here),
// minus the Effective/Last-updated/entity badges that only make sense for
// actual legal documents.

const ContentPage = ({ title, kicker, source, active, sibling, cta }) => {
  const { blocks, toc } = parseLegal(source);
  return (
    <div style={{ background: '#FFF4E8', minHeight: '100vh' }}>
      <InfernoNav active={active}/>
      <section className="sec-pad" style={{ background: '#1A0D08', color: '#FFF4E8', padding: '72px 48px 64px', borderBottom: '2px solid #1A0D08' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FF7A1A' }}>{kicker}</div>
          <h1 style={{ fontSize: 'clamp(32px, 6vw, 64px)', fontWeight: 900, letterSpacing: '-0.035em', lineHeight: 1, margin: '18px 0 0' }}>{title}</h1>
        </div>
      </section>
      <div className="legal-grid sec-pad" style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 48px 88px', display: 'grid', gridTemplateColumns: toc.length ? '236px 1fr' : '1fr', gap: 56, alignItems: 'start' }}>
        {toc.length > 0 && (
          <aside className="legal-aside" style={{ position: 'sticky', top: 24 }}>
            <div className="legal-toc" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#A88770', marginBottom: 14 }}>Contents</div>
            <nav className="legal-toc" style={{ display: 'flex', flexDirection: 'column', gap: 2, borderLeft: '2px solid rgba(26,13,8,0.14)' }}>
              {toc.map(t => (
                <a key={t.id} href={`#${t.id}`} style={{ fontSize: 13, lineHeight: 1.4, color: '#5C3D28', textDecoration: 'none', padding: '6px 0 6px 14px', marginLeft: -2, borderLeft: '2px solid transparent' }}
                  onMouseEnter={e => { e.currentTarget.style.color = '#E5421A'; e.currentTarget.style.borderLeftColor = '#E5421A'; }}
                  onMouseLeave={e => { e.currentTarget.style.color = '#5C3D28'; e.currentTarget.style.borderLeftColor = 'transparent'; }}>{t.v}</a>
              ))}
            </nav>
            {sibling && (
              <a href={sibling[1]} style={{ display: 'block', marginTop: 28, fontSize: 13, fontWeight: 600, color: '#1A0D08', textDecoration: 'none', border: '2px solid #1A0D08', borderRadius: 12, padding: '10px 14px', boxShadow: '3px 3px 0 #1A0D08' }}>{sibling[0]} →</a>
            )}
          </aside>
        )}
        <main style={{ maxWidth: 760 }}>
          <LegalBody blocks={blocks}/>
          {cta !== false && (
            <div style={{ marginTop: 48, background: '#1A0D08', color: '#FFF4E8', border: '2px solid #1A0D08', borderRadius: 24, padding: '28px 30px', boxShadow: '6px 6px 0 #E5421A' }}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em' }}>{(cta && cta.text) || 'Questions?'}</div>
                <a href={(cta && cta.href) || 'mailto:help@fireyouragency.net'} style={{ background: '#FFF4E8', color: '#1A0D08', fontWeight: 700, fontSize: 14, textDecoration: 'none', borderRadius: 999, padding: '11px 20px', whiteSpace: 'nowrap' }}>{(cta && cta.label) || 'Email us →'}</a>
              </div>
            </div>
          )}
        </main>
      </div>
      <InfernoFooter/>
    </div>
  );
};

window.ContentPage = ContentPage;