function Footer() {
	const year = new Date().getFullYear();
	return (
		<footer style={{ borderTop: '1px solid var(--divider)', padding: '32px 0', background: 'var(--bg)' }}>
			<div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
				<div className="mono-mini" style={{ color: 'var(--fg-mute)' }}>
					© Koelet3D · {year} · Made with patience
				</div>
				<div style={{ display: 'flex', gap: 28 }}>
					{window.SOCIALS.map(s => (
						<a key={s.href} href={s.href} target="_blank" rel="noopener noreferrer"
							className="footer-link"
							style={{ fontSize: 13.5, color: 'var(--fg)', borderBottom: '1px solid transparent', transition: 'color .2s ease, border-color .2s ease' }}
						>
							{s.label} <span aria-hidden="true" style={{ marginLeft: 4, fontSize: 11 }}>↗</span>
						</a>
					))}
				</div>
			</div>
			<style>{`
				.footer-link:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
			`}</style>
		</footer>
	);
}

window.Footer = Footer;