// Footer.jsx — dark footer

function Footer() {
  return (
    <footer
      style={{
        background: "var(--ffit-bg-dark)",
        color: "var(--ffit-fg-on-dark)",
        padding: "64px 0 32px",
        marginTop: 0,
      }}
    >
      <div
        className="kit-container"
        style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: 48,
        }}
      >
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              marginBottom: 16,
            }}
          >
            <img
              src="../../assets/logo-mark.svg"
              width="40"
              height="40"
              alt=""
            />
            <div
              style={{
                fontFamily: "var(--ffit-font-display)",
                fontWeight: 700,
                fontSize: 22,
                color: "white",
                letterSpacing: "-0.02em",
              }}
            >
              FFIT
            </div>
          </div>
          <p
            style={{
              fontFamily: "var(--ffit-font-body)",
              fontSize: 14,
              lineHeight: 1.6,
              color: "var(--ffit-fg-on-dark-2)",
              margin: 0,
              maxWidth: 320,
            }}
          >
            Votre informatique, simplement. Dépannage, upgrades, sites et
            applications.
          </p>
        </div>
        {[
          {
            title: "Services",
            links: [
              "Dépannage matériel",
              "Windows 10 → 11",
              "Sites & SPA",
              "Conseil & montage",
            ],
          },
          {
            title: "Liens",
            links: ["À propos", "Tarifs", "Comment ça marche", "Contact"],
          },
          {
            title: "Contact",
            links: ["info@ffit.be", "ffit.be", "Province de Bruxelles"],
          },
        ].map((col, i) => (
          <div key={i}>
            <div
              style={{
                fontFamily: "var(--ffit-font-body)",
                fontSize: 12,
                fontWeight: 600,
                textTransform: "uppercase",
                letterSpacing: "0.08em",
                color: "var(--ffit-cyan-400)",
                marginBottom: 16,
              }}
            >
              {col.title}
            </div>
            <ul
              style={{
                margin: 0,
                padding: 0,
                listStyle: "none",
                display: "flex",
                flexDirection: "column",
                gap: 10,
              }}
            >
              {col.links.map((l, j) => (
                <li
                  key={j}
                  style={{
                    fontFamily: "var(--ffit-font-body)",
                    fontSize: 14,
                    color: "var(--ffit-fg-on-dark-2)",
                  }}
                >
                  {l}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div
        className="kit-container"
        style={{
          marginTop: 48,
          paddingTop: 24,
          borderTop: "1px solid var(--ffit-border-on-dark)",
          display: "flex",
          justifyContent: "space-between",
          fontFamily: "var(--ffit-font-mono)",
          fontSize: 12,
          color: "var(--ffit-fg-on-dark-2)",
        }}
      >
        <span>© 2026 FFIT · Fiers Frédéric</span>
      </div>
    </footer>
  );
}

window.Footer = Footer;