// Footer — inverted. Nav columns + verbatim legal.

function Footer() {
  const cols = [
    ['Hosting', [['Web hosting', 'services'], ['Business email', 'services'], ['Cloud storage', 'services'], ['GPU compute', 'hardware']]],
    ['Company', [['About', 'team'], ['Privacy', 'security'], ['Pricing', 'pricing'], ['Contact', 'contact']]],
    ['Legal', [['Terms', 'Terms.html'], ['Privacy policy', 'Privacy%20Policy.html'], ['Data processing (DPA)', 'Data%20Processing.html']]],
  ];
  const go = (id) => (e) => { e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 56, behavior: 'smooth' }); };

  return (
    <footer style={{ background: 'var(--inv-bg)', color: 'var(--inv-fg)', borderTop: '1px solid var(--inv-rule)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '72px 32px 40px', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <img src="site/assets/logo-mark-white.svg" style={{ height: 30 }} alt="" />
            <span style={{ fontSize: 15, letterSpacing: '0.08em', fontWeight: 700 }}>TENSORHOST</span>
          </div>
          <p style={{ marginTop: 18, fontSize: 13, color: 'var(--inv-fg-3)', maxWidth: '34ch', lineHeight: 1.7 }}>
            Private hosting: web, email, storage, and GPU compute on hardware we own and operate, in Canada.
          </p>
          <div style={{ marginTop: 18, fontSize: 12, color: 'var(--inv-fg-3)', display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <span style={{ color: 'var(--accent)', textShadow: '0 0 9px var(--accent-soft)' }}>●</span> Toronto · Tier 3 datacenter
          </div>
        </div>
        {cols.map(([title, items]) => (
          <div key={title}>
            <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--inv-fg-3)', marginBottom: 16 }}>{title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {items.map(([label, id]) => {
                const isPage = id.includes('.html');
                return (
                  <a key={label} href={isPage ? id : '#' + id} onClick={isPage ? undefined : go(id)} style={{ fontSize: 13.5, color: 'var(--inv-fg-2)', textDecoration: 'none' }}
                     onMouseOver={e => e.currentTarget.style.color = 'var(--inv-fg)'} onMouseOut={e => e.currentTarget.style.color = 'var(--inv-fg-2)'}>{label}</a>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div style={{ borderTop: '1px solid var(--inv-rule-2)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '24px 32px', display: 'flex', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', fontSize: 11.5, color: 'var(--inv-fg-3)', lineHeight: 1.7 }}>
          <div>
            GPU Server Hosts Limited, trading as TensorHost · Registered in England and Wales no. 16543032<br />
            Registered office: 203 West Street, Fareham, Hampshire, PO16 0EN · VAT 496497322
          </div>
          <div style={{ whiteSpace: 'nowrap', display: 'inline-flex', gap: 8, alignItems: 'center', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            <span style={{ color: 'var(--accent)', textShadow: '0 0 9px var(--accent-soft)' }}>●</span> All systems operational
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;