// Footer.jsx — Felipe Fin Fanfa
function Footer({ onNavigate }) {
  const { lang } = React.useContext(window.LangContext);
  const t = window.ffT[lang].footer;

  return (
    <footer style={{
      background: 'rgba(1,4,10,0.82)',
      borderTop: '1px solid rgba(206,212,242,0.06)',
      padding: '48px 24px 36px',
      position: 'relative', overflow: 'hidden', zIndex: 1,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <img src="assets/logo-white-no-bg.svg" alt="" style={{ width: 22, height: 30, display: 'block' }} />
              <div style={{
                fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 20,
                color: '#CED4F2', letterSpacing: '-0.02em',
              }}>Felipe Fin Fanfa</div>
            </div>
            <div style={{ fontFamily: 'Geist, sans-serif', fontSize: 14, color: '#707AA9', maxWidth: 420, lineHeight: 1.5 }}>
              {t.tagline}
            </div>
          </div>

          <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
            {t.navItems.map(({ id, label }) => (
              <button key={id} onClick={() => onNavigate(id)} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: 'Geist, sans-serif', fontSize: 13, fontWeight: 500, color: '#707AA9',
                padding: 0, transition: 'color 180ms', textTransform: 'capitalize',
              }}
              onMouseEnter={e => e.target.style.color = '#CED4F2'}
              onMouseLeave={e => e.target.style.color = '#707AA9'}
              >{label}</button>
            ))}
          </div>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          paddingTop: 24, borderTop: '1px solid rgba(206,212,242,0.06)',
        }}>
          <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11, color: '#455084' }}>
            © 2026 Felipe Fin Fanfa — Florianópolis, BR
          </span>
          <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11, color: '#455084', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22C55E', boxShadow: '0 0 8px rgba(34,197,94,0.6)' }} />
            {t.available}
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });