/* global React */
function Footer() {
  const cols = [
    ['Services', ['Data engineering', 'AI & ML', 'Platforms', 'Advisory']],
    ['Company', ['About', 'Work', 'Careers', 'Contact']],
    ['Resources', ['Field notes', 'Architecture guides', 'Security', 'Status']],
  ];
  return (
    <footer className="footer sec-dark">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="nav-brand">
              <img src="assets/fracto-mark-white.png" alt="Fracto" className="nav-mark" />
              <span className="nav-wm">Fracto Services</span>
            </a>
            <p>We connect scattered data into systems that think. Pipelines, models, and platforms — end to end.</p>
            <div className="footer-social">
              {[
                ['in', 'https://www.linkedin.com/company/fracto-services-limited'],
              ].map(([s, href]) => (
                <a
                  key={s}
                  href={href}
                  className="soc"
                  target={href.startsWith('http') ? '_blank' : undefined}
                  rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
                  aria-label={s === 'in' ? 'Fracto Services on LinkedIn' : s}
                >{s}</a>
              ))}
            </div>
          </div>
          <div className="footer-cols">
            {cols.map(([h, links]) => (
              <div key={h}>
                <span className="footer-h">{h}</span>
                {links.map(l => <a key={l} href="#top" className="footer-link">{l}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Fracto Services. All rights reserved.</span>
          <span className="footer-legal"><a href="privacy.html">Privacy</a><a href="terms.html">Terms</a><a href="security.html">Security</a></span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;