function Footer() {
  const cols = [
    { h: "Norix", links: [
      { label: "What we build", href: "#services" },
      { label: "How it works", href: "#how" },
      { label: "Results", href: "#results" },
      { label: "FAQ", href: "#faq" },
    ]},
    { h: "Company", links: [
      { label: "About", href: "#" },
      { label: "Book a call", href: "#cta" },
    ]},
    { h: "Contact", links: [
      { label: "support@norixai.co.uk", href: "mailto:support@norixai.co.uk" },
      { label: "WhatsApp", href: "#" },
      { label: "norixai.co.uk", href: "https://norixai.co.uk" },
    ]},
  ];
  return (
    <footer className="nx-footer">
      <div className="nx-footer__inner">
        <div className="nx-footer__brand">
          <div className="nx-footer__lockup">
            <svg viewBox="0 0 64 64" width="32" height="32">
              <rect width="64" height="64" rx="14" fill="#FBFAF7"/>
              <path d="M 17 16 L 25 16 L 25 36 L 39 16 L 47 16 L 47 48 L 39 48 L 39 28 L 25 48 L 17 48 Z" fill="#0A0E1A"/>
              <circle cx="50" cy="48" r="2.4" fill="#1FA9BB"/>
            </svg>
            <span className="nx-footer__word">Norix <em>AI</em></span>
          </div>
          <p className="nx-footer__tag">Done-for-you AI systems for UK construction sub-contractors.</p>
        </div>
        <div className="nx-footer__cols">
          {cols.map((c) => (
            <div key={c.h} className="nx-footer__col">
              <div className="nx-footer__h">{c.h}</div>
              {c.links.map((l) => <a key={l.label} href={l.href}>{l.label}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="nx-footer__bottom">
        <span>&copy; 2026 Norix AI</span>
        <span>UK-based &middot; GDPR compliant</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;