function SiteFooter() {
  const R = window.ROUTES;
  const socialIcons = [
    { href: R.linkedin, label: 'LinkedIn', icon: <SocialIcon name="linkedin" /> },
    { href: R.youtube, label: 'YouTube', icon: <SocialIcon name="youtube" /> },
    { href: R.podcast, label: 'Podcast', icon: <SocialIcon name="podcast" /> },
    { href: R.newsletterFollow, label: 'Newsletter', icon: <SocialIcon name="mail" /> },
  ];
  return (
    <footer className="site-footer" style={{ background: '#fff', borderTop: '1px solid var(--border-default)', padding: '60px 0 40px' }}>
      <div className="container">

        {/* Social-Strip */}
        <div className="footer-social" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, marginBottom: 48 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.02em' }}>
            Folge auf deiner Plattform
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            {socialIcons.map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} style={{ color: 'var(--fg-3)', display: 'inline-flex', transition: 'color 160ms var(--ease-out)' }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ap-blue)'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-3)'}>
                {s.icon}
              </a>
            ))}
          </div>
        </div>

        {/* Footer-Links */}
        <div className="footer-links" style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: '12px 28px', fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)' }}>
          <a href={R.jobs} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Jobs</a>
          <a href={R.presse} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Presse</a>
          <a href={R.ueberMich} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Über mich</a>
          <a href={R.impressum} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Impressum</a>
          <a href={R.datenschutz} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Datenschutz</a>
        </div>

      </div>
    </footer>
  );
}

function SocialIcon({ name }) {
  const props = { width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'mail') return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>);
  if (name === 'linkedin') return (<svg {...props}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M8 10v7" /><circle cx="8" cy="7.2" r="0.9" fill="currentColor" stroke="none" /><path d="M12 17v-4.5c0-1.4 1-2.5 2.4-2.5s2.6 1 2.6 2.5V17" /></svg>);
  if (name === 'podcast') return (<svg {...props}><path d="M5 13a7 7 0 0 1 14 0" /><rect x="4" y="13" width="4" height="7" rx="1.5" /><rect x="16" y="13" width="4" height="7" rx="1.5" /></svg>);
  if (name === 'youtube') return (<svg {...props}><rect x="2.5" y="5" width="19" height="14" rx="3" /><path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none" /></svg>);
  return null;
}

window.SiteFooter = SiteFooter;