/* Usovo legal pages — shared header, footer, and typography for Terms/Privacy/Refunds/Open-source. */
const DS = window.UsovoDesignSystem_db7cfc || {};
const { PillButton } = DS;

const LegalStyles = {
  page: { width: 1440, margin: '0 auto', background: '#FCFAF7' },
  container: { maxWidth: 760, margin: '0 auto', padding: '0 40px' },
  eyebrow: { fontSize: 12, letterSpacing: '0.02em', textTransform: 'uppercase', opacity: 0.45, margin: '0 0 12px' },
  h1: { fontSize: 56, lineHeight: 1.02, fontWeight: 500, letterSpacing: '-0.03em', margin: '0 0 12px' },
  meta: { fontSize: 15, opacity: 0.5, margin: '0 0 64px' },
  h2: { fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', margin: '56px 0 16px' },
  h3: { fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em', margin: '28px 0 10px' },
  p: { fontSize: 17, lineHeight: 1.65, opacity: 0.7, margin: '0 0 16px' },
  ul: { fontSize: 17, lineHeight: 1.65, opacity: 0.7, margin: '0 0 16px', paddingLeft: 22 },
  li: { margin: '0 0 8px' },
  table: { width: '100%', borderCollapse: 'collapse', fontSize: 15, lineHeight: 1.5, margin: '16px 0 24px' },
  th: { textAlign: 'left', padding: '10px 12px', borderBottom: '1px solid #E2E2E2', fontWeight: 500, opacity: 0.6, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.02em' },
  td: { textAlign: 'left', padding: '10px 12px', borderBottom: '1px solid #E2E2E2', opacity: 0.75, verticalAlign: 'top' },
  hr: { border: 'none', borderTop: '1px solid #E2E2E2', margin: '48px 0' },
};

function LegalHeader({ eyebrow, title, effective }) {
  return (
    <header style={{ padding: '32px 40px 0' }}>
      <nav className="usovo-nav" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 64 }}>
        <a href="/" style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>usovo</a>
        <PillButton variant="outline" href="/">Back to usovo.in</PillButton>
      </nav>
      <div className="usovo-legal-container" style={LegalStyles.container}>
        <p style={LegalStyles.eyebrow}>{eyebrow}</p>
        <h1 className="usovo-legal-h1" style={LegalStyles.h1}>{title}</h1>
        <p style={LegalStyles.meta}>Effective {effective}</p>
      </div>
    </header>
  );
}

function LegalFooter() {
  const linkStyle = { display: 'block', color: 'rgba(252,250,247,0.6)' };
  return (
    <footer className="usovo-footer" style={{ background: '#161A0A', color: 'rgba(252,250,247,0.6)', position: 'relative', overflow: 'hidden', borderRadius: 32, margin: '96px 16px 16px' }}>
      <div className="usovo-footer-inner" style={{ padding: '48px 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
          <p style={{ fontSize: 15, margin: 0 }}>usovo — from <em>habere et usu</em>: to own and to use. © 2026</p>
          <div style={{ display: 'flex', gap: 24, fontSize: 15 }}>
            <a href="/terms" style={linkStyle}>Terms</a>
            <a href="/privacy" style={linkStyle}>Privacy</a>
            <a href="/refunds" style={linkStyle}>Refunds</a>
            <a href="/open-source" style={linkStyle}>Licenses</a>
          </div>
        </div>
      </div>
    </footer>
  );
}