/* global React */

const COLS = [
  { h: "Services", links: [
    ["Architecture review", "/#services"],
    ["Agent build", "/#services"],
    ["Workflow integration", "/#services"],
    ["Operate & evaluate", "/#services"],
  ]},
  { h: "Company", links: [
    ["Process", "/#process"],
    ["Case studies", "/case-studies"],
    ["About", "/about"],
    ["Contact", "/contact"],
  ]},
  { h: "Elsewhere", links: [
    ["GitHub", "https://github.com/zianansar"],
    ["LinkedIn", "https://linkedin.com/in/zian-ansar"],
    ["YouTube", "https://www.youtube.com/@DiscoPandaAI"],
    ["zian@ansartech.net", "mailto:zian@ansartech.net"],
  ]},
  { h: "Legal", links: [
    ["Privacy", "https://privacy.ansartech.net/privacy-policy"], ["Terms", "https://privacy.ansartech.net/terms-and-conditions"],
  ]},
];

function SiteFooter() {
  return (
    <footer className="st-footer">
      <div className="st-footer-inner">
        <div className="st-footer-brand">
          <div className="st-footer-brand-row">
            <img src="assets/logo-mark.png" alt="AnsarTech" />
            <div>
              <div className="st-footer-brand-name">AnsarTech</div>
              <div className="st-footer-brand-sub">AI Automation Architecture</div>
            </div>
          </div>
          <p className="st-footer-tagline">
            We architect the automation layer your business is already paying for in <span style={{ color: 'var(--at-red)' }}>salaries.</span>
          </p>
        </div>

        <div className="st-footer-cols">
          {COLS.map((col) => (
            <div key={col.h}>
              <div className="st-footer-h">{col.h}</div>
              {col.links.map(([label, href]) => {
                const ext = href.startsWith('http');
                return (
                  <a key={label} href={href} data-cursor-label="link"
                     {...(ext ? { target: "_blank", rel: "noopener" } : {})}>
                    {label}
                  </a>
                );
              })}
            </div>
          ))}
        </div>
      </div>

      <div className="st-footer-base">
        <span className="st-footer-status">
          <span className="dot"></span>
          All systems nominal · ansartech.net
        </span>
        <span>© 2026 AnsarTech — Built by hand</span>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;