/* Footer — ink panel, three columns, 22 px brand bar pinned to the bottom. */

function Footer() {
  const cols = [
    {
      head: "Services",
      links: [
        ["Managed IT Support",      "services.html"],
        ["Cybersecurity",           "service-detail.html"],
        ["Microsoft 365 & Cloud",   "service-detail.html"],
        ["Cyber Essentials Plus",   "service-detail.html"],
        ["VoIP & telephony",        "service-detail.html"],
      ],
    },
    {
      head: "Sectors",
      links: [
        ["IT Support for Solicitors",     "sector-solicitors.html"],
        ["IT Support for Accountants",    "sector-accountants.html"],
        ["IT Support for Property Services", "sector-property.html"],
        ["IT Support for Manufacturers",  "sector-manufacturers.html"],
      ],
    },
    {
      head: "Locations",
      links: [
        ["IT Support Nottingham",  "location-nottingham.html"],
        ["IT Support Derby",       "location-derby.html"],
        ["IT Support London",      "location-london.html"],
        ["About Reformed IT",      "about.html"],
        ["News & Knowledge",       "blog.html"],
      ],
    },
  ];

  return (
    <footer
      style={{
        position: "relative",
        background: "var(--ri-ink)",
        color: "var(--fg-inverse)",
        padding: "80px 0 64px",
      }}
    >
      <Container>
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48,
        }} className="ri-footer-grid">
          <div>
            <a href="index.html" style={{ display: "inline-block", border: 0 }}>
              <img
                src="assets/logos/logo_white_colour.png"
                alt="Reformed IT"
                style={{ height: 32, display: "block" }}
              />
            </a>
            <p style={{
              marginTop: 22, fontSize: 14, lineHeight: 1.6,
              color: "rgba(245,245,247,0.62)", maxWidth: 320,
            }}>
              Managed IT &amp; Cybersecurity for ambitious businesses across the
              East Midlands and London.
            </p>
            <div style={{
              marginTop: 28, fontSize: 11, letterSpacing: "0.16em",
              textTransform: "uppercase", color: "rgba(245,245,247,0.4)",
            }}>
              Nottingham · East Midlands · London
            </div>
            <div style={{
              marginTop: 12, display: "flex", gap: 16, alignItems: "center",
              fontSize: 14, color: "rgba(245,245,247,0.8)",
            }}>
              <a href="mailto:hello@reformed-it.co.uk" style={{
                color: "inherit", border: 0, textDecoration: "none",
                display: "inline-flex", alignItems: "center", gap: 8,
              }}>
                <Icon name="mail" size={16} /> hello@reformed-it.co.uk
              </a>
            </div>
            <div style={{
              marginTop: 6, fontSize: 14, color: "rgba(245,245,247,0.8)",
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              <Icon name="phone" size={16} /> 01158 244 824
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.head}>
              <h4 style={{
                fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase",
                fontWeight: 600, color: "var(--ri-pink)",
                margin: "0 0 18px",
              }}>{c.head}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0,
                           display: "flex", flexDirection: "column", gap: 12 }}>
                {c.links.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} style={{
                      color: "rgba(245,245,247,0.78)",
                      fontSize: 14, textDecoration: "none", border: 0,
                      transition: "color 120ms",
                    }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
                    onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(245,245,247,0.78)")}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 56, paddingTop: 26,
          borderTop: "1px solid rgba(245,245,247,0.10)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap",
          gap: 12, fontSize: 12, color: "rgba(245,245,247,0.45)",
        }}>
          <span>© 2026 Reformed IT Ltd · Registered in England &amp; Wales.</span>
          <span style={{ display: "flex", gap: 22 }}>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: "inherit", border: 0, textDecoration: "none" }}>Privacy</a>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: "inherit", border: 0, textDecoration: "none" }}>Cookies</a>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: "inherit", border: 0, textDecoration: "none" }}>Status</a>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: "inherit", border: 0, textDecoration: "none" }}>Cyber Essentials</a>
          </span>
        </div>
      </Container>

      {/* The 22 px brand bar signs the page */}
      <BrandBar height={22} style={{ position: "absolute", left: 0, right: 0, bottom: 0 }} />

      <style>{`
        @media (max-width: 880px) {
          .ri-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 540px) {
          .ri-footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });