// Footer.jsx — generous, quiet
function Footer({ onNavigate }) {
  const readLinks = [
    { label: 'Latest issue', route: 'issue' },
    { label: 'Archive', route: 'archive' },
    { label: 'About', route: 'about' },
    { label: 'Colophon', route: 'about' },
  ];
  return (
    <footer style={{
      margin: '128px auto 0',
      padding: '64px 40px 48px',
      borderTop: '1px solid var(--hairline)',
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr 1fr',
      gap: 48,
      maxWidth: 1180,
    }}>
      <div>
        <Mark size="sm" />
        <p style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--slate)', marginTop: 18, lineHeight: 1.55, maxWidth: 280 }}>
          A newsletter about the connection between points, by <em>Kelly Jia</em>. Every other Sunday.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--slate)', marginBottom: 6 }}>Read</div>
        {readLinks.map(({ label, route }) => (
          <a key={label} href="#" onClick={(e) => { e.preventDefault(); onNavigate && onNavigate(route); }} style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--hairline)', alignSelf: 'flex-start', paddingBottom: 1 }}>{label}</a>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--slate)', marginBottom: 6 }}>Follow</div>
        {['RSS', 'Email', 'Mastodon'].map(x => (
          <a key={x} href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--hairline)', alignSelf: 'flex-start', paddingBottom: 1 }}>{x}</a>
        ))}
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--slate)', marginTop: 24, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          © 2026 Kelly Jia
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;