/* Nexpersona - Footer */

function Footer({ theme, onToggleTheme, lang, onLang }) {
  const { t } = window.useT();
  return (
    <footer className="footer" id="footer">
      <div className="shell">
        <div className="footer-mega serif" aria-hidden="true">
          Nex<span className="em">persona</span><span className="dot"></span>
        </div>

        <div className="footer-grid footer-grid-3">
          <div className="footer-col">
            <h4>{t('footer.studio.title')}</h4>
            <p>{t('footer.studio.body')}</p>
            <p style={{marginTop: 16, fontFamily: 'Geist Mono, monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)'}}>
              <a href="mailto:info@nexpersona.com" style={{color: 'inherit'}}>info@nexpersona.com</a>
            </p>
          </div>
          <div className="footer-col">
            <h4>{t('footer.site.title')}</h4>
            <a href="/#work">{t('nav.work')}</a>
            <a href="/#services">{t('nav.services')}</a>
            <a href="/#process">{t('nav.process')}</a>
            <a href="/#about">{t('nav.about')}</a>
            <a href="/#start">{t('footer.start')}</a>
          </div>
          <div className="footer-col">
            <h4>{t('footer.settings.title')}</h4>
            <div style={{display:'flex', flexWrap:'wrap', gap: 6, marginBottom: 12}}>
              {window.NX_LANGS.map(l => (
                <button
                  key={l.code}
                  onClick={() => onLang(l.code)}
                  style={{
                    border: '1px solid var(--border)',
                    background: lang === l.code ? 'var(--text)' : 'transparent',
                    color: lang === l.code ? 'var(--bg)' : 'var(--text-2)',
                    padding: '6px 10px',
                    borderRadius: 999,
                    fontFamily: 'Geist Mono, monospace',
                    fontSize: 11,
                    letterSpacing: '0.08em',
                    cursor: 'pointer',
                  }}
                >{l.code}</button>
              ))}
            </div>
            <button
              onClick={onToggleTheme}
              style={{
                border:'1px solid var(--border)',
                background:'transparent',
                color: 'var(--text-2)',
                padding: '6px 10px',
                borderRadius: 999,
                fontFamily: 'Geist Mono, monospace',
                fontSize: 11,
                letterSpacing: '0.08em',
                cursor: 'pointer',
                textTransform: 'uppercase',
              }}
            >
              {theme === 'dark' ? t('footer.theme.dark') : t('footer.theme.light')}
            </button>
          </div>
        </div>

        <div className="footer-bottom">
          <span>{t('footer.copyright')}</span>
          <span style={{display:'flex', gap: 24, flexWrap:'wrap'}}>
            <a href="/privacy" style={{color:'inherit'}}>{t('footer.privacy')}</a>
            <a href="/terms" style={{color:'inherit'}}>{t('footer.terms')}</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.NXFooter = Footer;