function Footer() {
  const isHome = (typeof window !== 'undefined') && (
    window.location.pathname.endsWith('/') ||
    window.location.pathname.endsWith('/index.html') ||
    window.location.pathname === ''
  );
  const base = isHome ? '' : 'index.html';
  const link = (hash) => base + hash;

  const items = [
    { href: link('#problemy'),  label: 'Dla kogo' },
    { href: link('#pomagam'),   label: 'Jak pomagam' },
    { href: link('#portfolio'), label: 'Portfolio' },
    { href: link('#proces'),    label: 'Współpraca' },
    { href: link('#omnie'),     label: 'O mnie' },
    { href: link('#faq'),       label: 'FAQ' },
  ];

  return (
    <footer className="g-footer">
      <div className="g-footer-top">
        <a className="g-brand g-brand--footer" href={isHome ? '#' : 'index.html'}>
          <svg className="g-brand-logo" viewBox="0 0 36 36" width="30" height="30" aria-hidden="true">
            <rect width="36" height="36" rx="10" fill="var(--c-accent, #E07A4B)"></rect>
            <path d="M9 25.5 V11 L18 21 L27 11 V25.5" stroke="#fff" strokeWidth="2.6" fill="none" strokeLinejoin="round" strokeLinecap="round"></path>
          </svg>
          <span className="g-brand-footer-name">Maciej Matera</span>
        </a>
        <nav className="g-footer-nav" aria-label="Nawigacja w stopce">
          {items.map((it) => (
            <a key={it.label} href={it.href}>{it.label}</a>
          ))}
        </nav>
      </div>
      <div className="g-footer-bottom">
        <span>© 2026 Maciej Matera</span>
        <a href={link('#kontakt')}>kontakt@maciejmatera.pl</a>
        <span className="g-footer-legal">
          <a href="/beauty/polityka-prywatnosci/">Polityka prywatności</a>
        </span>
      </div>
    </footer>
  );
}

window.Footer = Footer;
