function Footer() {
  return (
    <footer style={{
      background: 'var(--s4-paper)', borderTop: '1px solid var(--s4-rule)',
      padding: '48px 40px 56px',
    }}>
      <div style={{
        maxWidth: 1160, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        gap: 40, flexWrap: 'wrap',
      }}>
        <div>
          <a href="index.html" style={{ display: 'inline-block' }}>
            <img src="../../assets/step4-logo.png" alt="Step 4 Consulting" style={{ height: 40 }} />
          </a>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: 'var(--fg-3)', marginTop: 20,
            textTransform: 'uppercase', letterSpacing: '0.1em',
          }}>
            www.step4consulting.com
          </div>
        </div>
        <div style={{ display: 'flex', gap: 48 }}>
          <FooterCol title="Practice" links={[
            { label: 'Approach',    href: 'approach.html' },
            { label: 'Framework',   href: 'framework.html' },
            { label: 'Engagements', href: 'approach.html#engagements' },
          ]} />
          <FooterCol title="Writing" links={[
            { label: 'White Paper',            href: 'white-paper.html' },
            { label: 'Process Culture (book)', href: 'about.html#book' },
            { label: 'Essays',                 href: 'white-paper.html' },
          ]} />
          <FooterCol title="Contact" links={[
            { label: 'Book an assessment', href: 'contact.html' },
            { label: 'Email Sam',          href: 'mailto:sam@step4consulting.com' },
            { label: 'LinkedIn',           href: '#' },
          ]} />
        </div>
      </div>
      <div style={{
        maxWidth: 1160, margin: '56px auto 0',
        paddingTop: 24, borderTop: '1px solid var(--s4-rule)',
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>© 2026 Step 4 Consulting</span>
        <span>Built on clean inputs.</span>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
        marginBottom: 14,
      }}>{title}</div>
      {links.map(l => (
        <a key={l.label} href={l.href} style={{
          display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14,
          color: 'var(--fg-1)', textDecoration: 'none', padding: '4px 0',
        }}
        onMouseEnter={e => e.currentTarget.style.color = 'var(--s4-amber)'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-1)'}>{l.label}</a>
      ))}
    </div>
  );
}

window.Footer = Footer;