/* global React, Logo, useLocale */
// Jullia — site footer. Kit-local: the real logo mark, the by-introduction note,
// and columns trimmed to the site's IA. Quiet and sparse, no sitemap sprawl.

function SiteFooter({ onNavigate }) {
  const { t } = useLocale();

  const columns = [
    { heading: t('footer.domains'), items: [{ label: t('nav.carAudio'), key: 'CarAudio' }, { label: t('nav.homeAudio'), key: 'HomeAudio' }] },
    { heading: t('footer.atelier'), items: [{ label: t('nav.home'), key: 'Home' }, { label: t('nav.philosophy'), key: 'Philosophy' }] },
    { heading: t('footer.contact'), items: [{ label: t('nav.contacts'), key: 'Contacts' }, { label: t('footer.byIntroduction'), key: null }, { label: t('footer.krakow'), key: null }] },
  ];

  return (
    <footer style={{
      borderTop: '1px solid var(--hairline)',
      padding: 'var(--viewport-pad-block) var(--margin-page) var(--space-7)',
      display: 'flex', flexDirection: 'column', gap: 'var(--space-9)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-9)', flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 340, display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <Logo height={56} />
          <p style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'var(--text-lg)',
            lineHeight: 1.3, color: 'var(--text-secondary)', margin: 0, letterSpacing: '-0.01em',
          }}>{t('footer.note')}</p>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-9)', flexWrap: 'wrap' }}>
          {columns.map((c) => (
            <div key={c.heading} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)',
                letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase',
                color: 'var(--text-tertiary)',
              }}>{c.heading}</span>
              {c.items.map((it) => (
                <a
                  key={it.label}
                  href="#"
                  onClick={(e) => { e.preventDefault(); if (it.key && onNavigate) onNavigate(it.key); }}
                  style={{
                    fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)',
                    color: 'var(--text-secondary)', textDecoration: 'none',
                    cursor: it.key ? 'pointer' : 'default',
                  }}
                >{it.label}</a>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--hairline-faint)', paddingTop: 'var(--space-5)' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: '0.08em', color: 'var(--text-tertiary)' }}>{t('footer.copyright')}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: '0.08em', color: 'var(--text-tertiary)' }}>{t('footer.tagline')}</span>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;