function SiteFooter({ onNav }) {
  return (
    <footer style={{ background: 'var(--brand-ink)', color: 'var(--warm-300)', padding: 'clamp(48px, 8vw, 64px) clamp(20px, 5vw, 40px) 40px' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '40px' }}>
        <div style={{ maxWidth: '320px', minWidth: '240px' }}>
          <img src="../../assets/logo-zelger-transparent.png" alt="Zelger Osteopathie" style={{ height: '44px', filter: 'brightness(0) invert(1)', marginBottom: '18px' }} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', lineHeight: 1.7, margin: 0, color: 'var(--warm-400)' }}>
            Ganzheitliche osteopathische Behandlung in ruhigem, entspanntem Ambiente.
          </p>
        </div>
        <div style={{ display: 'flex', gap: '64px', flexWrap: 'wrap' }}>
          <div>
            <h4 style={fh}>Praxis</h4>
            {[['osteopathie', 'Osteopathie'], ['schwerpunkte', 'Schwerpunkte'], ['ueber', 'Über mich']].map(([id, l]) => (
              <a key={id} href="#" onClick={(e) => { e.preventDefault(); onNav && onNav(id); }} style={fl}>{l}</a>
            ))}
          </div>
          <div>
            <h4 style={fh}>Kontakt</h4>
            <span style={fl}>Silvia Zelger</span>
            <span style={fl}>praxis@zelger-osteopathie.de</span>
            <span style={fl}>Termin nach Vereinbarung</span>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 'var(--container)', margin: '40px auto 0', paddingTop: '24px', borderTop: '1px solid var(--warm-800)', fontFamily: 'var(--font-display)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--warm-500)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px' }}>
        <span>© 2026 Zelger Osteopathie</span>
        <span style={{ display: 'flex', gap: '20px' }}><a href="#" style={{ color: 'var(--warm-400)', textDecoration: 'none' }}>Impressum</a><a href="#" style={{ color: 'var(--warm-400)', textDecoration: 'none' }}>Datenschutz</a></span>
      </div>
    </footer>
  );
}
const fh = { fontFamily: 'var(--font-display)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--brand-orange-soft)', margin: '0 0 14px' };
const fl = { display: 'block', fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--warm-300)', textDecoration: 'none', marginBottom: '10px' };