/* global React */

// Footer columns. Each entry has:
//   label  — the visible link text
//   target — where it goes when clicked
//            "cygnik"  → external https://cygnik.tech (new tab)
//            "contact" → internal SPA route /contact (handled by __navigate)
const CYGNIK_URL = "https://cygnik.tech";

const FOOTER = [
  { h: "Product", links: [
    { label: "Dispatch",          target: "cygnik" },
    { label: "Invoicing",         target: "cygnik" },
    { label: "Driver Settlement", target: "cygnik" },
    { label: "Tracking",          target: "cygnik" },
    { label: "Customer Portal",   target: "cygnik" },
    { label: "ELD / HOS",         target: "cygnik" },
    { label: "BI / Analytics",    target: "cygnik" },
    { label: "AI Copilot",        target: "cygnik" },
  ]},
  { h: "Solutions", links: [
    { label: "Carriers",              target: "cygnik" },
    { label: "Brokers",               target: "cygnik" },
    { label: "3PLs",                  target: "cygnik" },
    { label: "Shippers",              target: "cygnik" },
    { label: "Owner-operators",       target: "cygnik" },
    { label: "50-truck fleets",       target: "cygnik" },
    { label: "Cross-border carriers", target: "cygnik" },
    { label: "Dispatchers",           target: "cygnik" },
  ]},
  { h: "Canadian", links: [
    { label: "WhatsApp dispatch",      target: "cygnik" },
    { label: "Canadian corridor",      target: "cygnik" },
    { label: "Cross-border (ACE/ACI)", target: "cygnik" },
    { label: "IFTA",                   target: "cygnik" },
    { label: "HOS Canada",             target: "cygnik" },
    { label: "CBSA CARM",              target: "cygnik" },
    { label: "Driver app",             target: "cygnik" },
  ]},
  { h: "Compare", links: [
    { label: "vs Axon",          target: "cygnik" },
    { label: "vs TransPlus",     target: "cygnik" },
    { label: "vs Truckbase",     target: "cygnik" },
    { label: "vs Tailwind",      target: "cygnik" },
    { label: "vs Avaal Express", target: "cygnik" },
    { label: "vs Rose Rocket",   target: "cygnik" },
    { label: "vs Aiksphere",     target: "cygnik" },
    { label: "vs ITS Dispatch",  target: "cygnik" },
  ]},
  { h: "Company", links: [
    { label: "About",       target: "cygnik" },
    { label: "Customers",   target: "cygnik" },
    { label: "Careers",     target: "cygnik" },
    { label: "Blog",        target: "cygnik" },
    { label: "Contact",     target: "contact" },
    { label: "Book a demo", target: "contact" },
  ]},
];

// Inline SVG icons (avoid extra file fetches)
const IconLinkedIn = () => (
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <path fill="currentColor" d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.65-1.85 3.4-1.85 3.63 0 4.3 2.39 4.3 5.5v6.24zM5.34 7.43a2.06 2.06 0 110-4.12 2.06 2.06 0 010 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.78C.8 0 0 .78 0 1.74v20.51C0 23.21.8 24 1.78 24h20.44c.98 0 1.78-.79 1.78-1.75V1.74C24 .78 23.2 0 22.22 0z"/>
  </svg>
);
const IconFacebook = () => (
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.66 9.13 8.44 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46H15.2c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99C18.34 21.13 22 16.99 22 12z"/>
  </svg>
);
const IconX = () => (
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817-5.97 6.817H1.677l7.73-8.835L1.254 2.25h6.823l4.713 6.231 5.454-6.231zm-1.161 17.52h1.834L7.084 4.126H5.117l11.966 15.644z"/>
  </svg>
);

const socialBoxStyle = { color: "var(--muted)", display: "inline-flex", width: 36, height: 36, alignItems: "center", justifyContent: "center", border: "1px solid var(--line)", borderRadius: 10, transition: "color .15s ease, border-color .15s ease" };

function Footer() {
  const onContact = (e) => {
    e.preventDefault();
    window.__navigate && window.__navigate("contact");
  };

  const renderLink = (l, j) => {
    if (l.target === "contact") {
      return <li key={j}><a href="/contact" onClick={onContact}>{l.label}</a></li>;
    }
    // nofollow on the bulk of links so we don't bleed Lanexa's PageRank to cygnik.tech
    return (
      <li key={j}>
        <a href={CYGNIK_URL} target="_blank" rel="noopener noreferrer nofollow">{l.label}</a>
      </li>
    );
  };

  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <Logo />
          <p style={{ marginTop: "1rem", color: "var(--muted)", fontSize: "0.92rem", maxWidth: "30ch" }}>
            The TMS built for Canadian carriers. Dispatch, documents and driver comms — live across Canada–US, in the chat your drivers already use.
          </p>
          <div style={{ marginTop: "1.5rem", fontFamily: "var(--mono)", fontSize: "0.68rem", letterSpacing: "0.1em", color: "var(--muted)", lineHeight: 1.7 }}>
            <div style={{ textTransform: "uppercase" }}>Suite 400 – 1940 Eglinton Ave E</div>
            <div style={{ textTransform: "uppercase" }}>Scarborough, ON M1L 4R1 · <span className="maple" /></div>
            <div style={{ marginTop: "0.6rem" }}><a href="tel:+18887771672" style={{ color: "var(--paper)", textDecoration: "none" }}>Ph: (888) 777-1672</a></div>
            <div><a href="mailto:info@cygnik.com" style={{ color: "var(--paper)", textDecoration: "none" }}>info@cygnik.com</a></div>
          </div>

          {/* Social — opens in new tabs, official Lanexa accounts */}
          <div style={{ display: "flex", gap: "0.7rem", marginTop: "1.5rem", alignItems: "center" }}>
            <a href="https://www.linkedin.com/company/lanexa-tms/" target="_blank" rel="noopener noreferrer" aria-label="Lanexa on LinkedIn" style={socialBoxStyle}>
              <IconLinkedIn />
            </a>
            <a href="https://x.com/LanexaTMS" target="_blank" rel="noopener noreferrer" aria-label="Lanexa on X" style={socialBoxStyle}>
              <IconX />
            </a>
            <a href="https://www.facebook.com/people/Lanexa-TMS/61572127191422/" target="_blank" rel="noopener noreferrer" aria-label="Lanexa on Facebook" style={socialBoxStyle}>
              <IconFacebook />
            </a>
          </div>
        </div>

        {FOOTER.map((col, i) => (
          <div key={i} className="footer__col">
            <h4>{col.h}</h4>
            <ul>{col.links.map(renderLink)}</ul>
          </div>
        ))}
      </div>

      <div className="footer__bot">
        <div>
          <div>© 2026 Lanexa Technologies Inc. · All rights reserved</div>
          <div style={{ marginTop: "0.4rem", color: "var(--muted)", fontSize: "0.78rem", letterSpacing: "0.04em" }}>
            Designed and developed by{" "}
            <a href={CYGNIK_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--blue-2)", textDecoration: "none", borderBottom: "1px dotted var(--blue-2)" }}>Cygnik Tech</a>
            {" "}— visit{" "}
            <a href={CYGNIK_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--blue-2)", textDecoration: "none" }}>cygnik.tech</a>.
          </div>
        </div>
        <div style={{ display: "flex", gap: "1.5rem", alignItems: "center", flexWrap: "wrap" }}>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }} onClick={(e) => e.preventDefault()}>Privacy</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }} onClick={(e) => e.preventDefault()}>Terms</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }} onClick={(e) => e.preventDefault()}>Security</a>
          <span>Canada</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });