// Shared shell for the legal pages (terms, privacy, cookies, affiliate).
// Expects { title, eyebrow, updatedAt, sections } to be exposed on window before rendering.

function LegalShell({ title, eyebrow, updatedAt, sections }) {
  return (
    <div style={{ background: TBL.cream, fontFamily: SANS, color: TBL.ink, minHeight: '100vh' }}>
      {/* Nav */}
      <div className="ds-nav" style={{
        position: 'sticky', top: 0, zIndex: 100, background: 'rgba(251,238,224,0.85)',
        backdropFilter: 'blur(12px)', borderBottom: `1px solid ${TBL.line}`,
        padding: '16px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <a href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
          <LogoLockup/>
        </a>
        <div className="ds-nav-links" style={{ display: 'flex', gap: 24, fontSize: 14, color: TBL.ink, alignItems: 'center' }}>
          <a href="/" style={{ color: 'inherit', textDecoration: 'none' }}>← Back to The Bach Lists</a>
        </div>
      </div>

      {/* Content */}
      <div style={{ maxWidth: 780, margin: '0 auto', padding: '80px 40px 60px' }}>
        <div className="ds-legal-hero">
          <Eyebrow style={{ marginBottom: 14 }}>{eyebrow || 'Legal'}</Eyebrow>
          <h1 style={{ fontFamily: SERIF, fontSize: 64, lineHeight: 1, letterSpacing: -2, margin: 0, marginBottom: 20 }}>{title}</h1>
          <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 1.5, color: TBL.mute, marginBottom: 40 }}>LAST UPDATED · {updatedAt}</div>
        </div>
        {sections.map((s, i) => (
          <section key={i} style={{ marginBottom: 36 }}>
            {s.heading && (
              <h2 style={{ fontFamily: SERIF, fontSize: 28, fontStyle: 'italic', color: TBL.ink, letterSpacing: -0.6, marginBottom: 14 }}>{s.heading}</h2>
            )}
            {s.body.map((para, j) => (
              <p key={j} style={{ fontSize: 15, lineHeight: 1.7, color: TBL.subtle, marginBottom: 14 }} dangerouslySetInnerHTML={{ __html: para }}/>
            ))}
          </section>
        ))}

        <div style={{ borderTop: `1px solid ${TBL.line}`, paddingTop: 24, marginTop: 40, fontSize: 13, color: TBL.mute }}>
          Questions about this policy? Email <a href="mailto:hello@thebachlists.com" style={{ color: TBL.jam, textDecoration: 'none' }}>hello@thebachlists.com</a>
        </div>
      </div>

      {/* Minimal footer */}
      <div style={{ background: TBL.ink, color: TBL.cream, padding: '32px 40px', textAlign: 'center', fontSize: 12 }}>
        <div style={{ opacity: 0.6 }}>© 2026 The Bach Lists ·
          <a href="/terms" style={{ color: 'inherit', textDecoration: 'none', margin: '0 10px' }}>Terms</a>·
          <a href="/privacy" style={{ color: 'inherit', textDecoration: 'none', margin: '0 10px' }}>Privacy</a>·
          <a href="/cookies" style={{ color: 'inherit', textDecoration: 'none', margin: '0 10px' }}>Cookies</a>·
          <a href="/affiliate-disclosure" style={{ color: 'inherit', textDecoration: 'none', margin: '0 10px' }}>Affiliate disclosure</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LegalShell });