/* global React */
function Footer() {
  const wrap = { padding: '48px 0 32px', borderTop: '1px solid var(--border)', background: 'var(--cream)' };
  const top = {
    display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '64px', alignItems: 'center',
    paddingBottom: '32px', borderBottom: '1px solid var(--border)',
  };
  const logo = {
    fontFamily: 'var(--font-sans)', fontSize: '20px', fontWeight: 500,
    letterSpacing: '-0.03em', color: 'var(--ink)',
  };
  const dot = { color: 'var(--graphite)' };

  const linkRow = { display: 'flex', gap: '24px', justifySelf: 'center', flexWrap: 'wrap' };
  const link = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-700)', textDecoration: 'none',
    borderBottom: 'none',
  };

  const tag = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.06em',
    textTransform: 'uppercase', color: 'var(--warm-500)',
  };

  const bottom = {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingTop: '24px',
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.06em', color: 'var(--warm-500)',
  };

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <footer style={wrap}>
      <div className="container">
        <div style={top}>
          <a href="#top" style={{ ...logo, display: 'inline-flex', alignItems: 'center', gap: '14px' }} onClick={scrollTo('top')}>
            <img src="assets/mark.svg" alt="" width="28" height="28" style={{ display: 'block' }} />
            <span>Moore<span style={dot}>.</span></span>
          </a>
          <div style={linkRow}>
            <a style={link} href="#fazemos" onClick={scrollTo('fazemos')}>O que fazemos</a>
            <a style={link} href="#processo" onClick={scrollTo('processo')}>Processo</a>
            <a style={link} href="#time" onClick={scrollTo('time')}>Time</a>
            <a style={link} href="#contato" onClick={scrollTo('contato')}>Contato</a>
          </div>
          <span style={tag}>São Paulo · BR</span>
        </div>
        <div style={bottom}>
          <span>© 2026 Moore AI · Transformação</span>
          <span>Feito em São Paulo</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;