function SiteFooter({ onNav = () => {}, page = 'home' }) {
  const black = page === 'changing';
  const ink = black ? '#000000' : 'var(--syn-navy)';
  const sub = black ? '#6E6E6E' : 'var(--syn-fg-subtle)';
  const { isPhone } = window.useIsMobile();
  return (
    <footer style={{
      borderTop: '1px solid var(--syn-rule)',
      padding: isPhone ? '36px 20px 48px' : '48px 48px 64px',
      background: 'var(--syn-paper)',
    }}>
      <div style={{
        maxWidth: 1120, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <img src={black ? '../assets/synth-logo-mono-outline-black.svg' : '../assets/synth-logo-mono-outline.svg'} alt="Synth" style={{ display: 'block', height: 40, width: 40 }} />
          <span style={{ fontFamily: 'var(--syn-font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '0.04em', lineHeight: 1, fontVariationSettings: "'opsz' 72", color: ink, position: 'relative', top: 3 }}>SYNTH</span>
          <span style={{
            fontFamily: 'var(--syn-font-mono)', fontSize: 11, lineHeight: 1.4,
            color: sub, letterSpacing: '0.04em',
          }}>thesynth.ca · est. 2026</span>
        </div>
        <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--syn-font-mono)', fontSize: 11, lineHeight: 1.4, letterSpacing: '0.04em', color: ink, alignItems: 'center' }}>
          <span style={{ color: sub }}>© 2026 Synth · Toronto · Vancouver · <a href="mailto:will@thesynth.ca" style={{ color: ink, textDecoration: 'none' }}>will@thesynth.ca</a></span>
        </div>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;