function ForemanFooter() {
  const cols = [
    { h: 'Product', items: [['How it works', '#how'], ['Skills', '#skills'], ['Industries', '#industries'], ['Install', '#install']] },
    { h: 'Resources', items: [['README', 'https://github.com/fatihguner/foreman'], ['Architecture', 'https://github.com/fatihguner/foreman/blob/main/docs/architecture.md'], ['Vision', 'https://github.com/fatihguner/foreman/blob/main/VISION.md'], ['Changelog', 'https://github.com/fatihguner/foreman/blob/main/CHANGELOG.md']] },
    { h: 'Community', items: [['Contribute', 'https://github.com/fatihguner/foreman/blob/main/CONTRIBUTING.md'], ['Code of conduct', 'https://github.com/fatihguner/foreman/blob/main/CODE_OF_CONDUCT.md'], ['Security', 'https://github.com/fatihguner/foreman/blob/main/SECURITY.md'], ['Issues', 'https://github.com/fatihguner/foreman/issues']] },
    { h: 'Built by', items: [['Fatih Guner', 'https://x.com/fatihguner'], ['Komunite', 'https://komunite.com.tr'], ['Lokomotif AI', 'https://lokomotif.ai']] },
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--line)', background: 'var(--paper)', paddingTop: 64, paddingBottom: 32 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr repeat(4, 1fr)', gap: 40, marginBottom: 56 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{
                width: 22, height: 22, background: 'var(--ink)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', fontFamily: 'var(--mono)', fontWeight: 700, fontSize: 12,
              }}>F</span>
              <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: '-0.02em' }}>Foreman</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55, maxWidth: 280 }}>
              Open-source strategic advisor for entrepreneurs. MIT licensed. Free forever.
            </p>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 10 }}>
                {c.items.map((it, j) => (
                  <li key={j}>
                    <a href={it[1]} style={{ fontSize: 14, color: 'var(--ink-2)' }}>{it[0]}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 24, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
        }}>
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>
            MIT &copy; Fatih Guner, 2026
          </div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted-2)' }}>
            think clearer &middot; decide faster &middot; ship anyway
          </div>
        </div>
      </div>
    </footer>
  );
}
window.ForemanFooter = ForemanFooter;