function Footer() {
  const { colors, mono, caps, links } = window.GFX_TOKENS;

  const cols = [
    {
      h: 'Plugins',
      items: [
        { l: 'GrimVehicle',   href: '/plugins/grimvehicle/' },
        { l: 'Documentation', href: links.docs, external: true },
      ],
    },
    {
      h: 'Studio',
      items: [
        { l: 'Games',         href: '/games/' },
        { l: 'Contact',       href: '/contact/' },
      ],
    },
    {
      h: 'Connect',
      items: [
        { l: 'Discord',       href: links.discord, external: true },
        { l: 'Contact sales', href: links.sales,   external: true },
        { l: 'X / Twitter',   href: links.twitter, external: true },
        { l: 'YouTube',       href: links.youtube, external: true },
      ],
    },
  ];

  return (
    <footer style={{ background: colors.ink, borderTop: `1px solid ${colors.lineSoft}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '64px 32px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48, marginBottom: 56,
        }}>
          <div>
            <a href="./" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <img src="assets/favicon.png" alt="" width={32} height={32} />
              <div style={{ ...caps, fontSize: 14 }}>Grimfox Games</div>
            </a>
            <div style={{ ...mono, color: colors.dim, lineHeight: 1.8, fontSize: 10 }}>
              INDEPENDENT STUDIO · UNREAL ENGINE TOOLS<br />
              EST. 2016
            </div>
          </div>
          {cols.map(({ h, items }) => (
            <div key={h}>
              <div style={{ ...caps, fontSize: 10, color: colors.ember, marginBottom: 16 }}>{h}</div>
              {items.map((it) => (
                <div key={it.l} style={{ padding: '6px 0' }}>
                  <a href={it.href}
                     target={it.external ? '_blank' : undefined}
                     rel={it.external ? 'noreferrer' : undefined}
                     style={{ fontSize: 13, color: colors.dim, textDecoration: 'none' }}>{it.l}</a>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          paddingTop: 24, borderTop: `1px solid ${colors.lineSoft}`,
          ...mono, fontSize: 10,
        }}>
          <span>© {new Date().getFullYear()} GRIMFOX GAMES INC.</span>
          <span>FORGED IN UNREAL</span>
        </div>
      </div>
    </footer>
  );
}

window.GFX_COMPONENTS = window.GFX_COMPONENTS || {};
window.GFX_COMPONENTS.Footer = Footer;