/* global React */

function Footer() {
  const cols = [
    ["Product", ["Hoe het werkt", "Voor wie", "Prijzen", "Roadmap"]],
    ["Bedrijf", ["Over ons", "Blog", "Werken bij", "Contact"]],
    ["Resources", ["Helpcentrum", "Status", "API-docs", "Voor vakmannen"]],
    ["Juridisch", ["Privacy", "Voorwaarden", "Verwerkers­overeenkomst", "AVG"]],
  ];
  return (
    <footer style={{ background: "var(--color-black)", color: "#fff", padding: "72px 32px 32px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 40, paddingBottom: 48, borderBottom: "1px solid rgba(255,255,255,0.10)" }}>
          <div>
            <img src="assets/logo-wordmark.svg" height="24" alt="Pandbeer" style={{ filter: "invert(1)" }} />
            <p style={{ fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.6)", margin: "16px 0 0 0", maxWidth: 280 }}>
              Vastgoedbeheer dat je tijd teruggeeft.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 8, alignItems: "center", fontSize: 12, color: "rgba(255,255,255,0.5)" }}>
              <span style={{ display: "inline-flex", width: 14, height: 14, borderRadius: 999, background: "var(--color-pandbeer-green)" }} />
              Alle systemen draaien
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <h4 style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", margin: 0 }}>{h}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {items.map(i => (
                  <li key={i}><a href="#" style={{ fontSize: 14, color: "#fff", border: 0, opacity: 0.85, textDecoration: "none" }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, fontSize: 13, color: "rgba(255,255,255,0.5)", flexWrap: "wrap", gap: 12 }}>
          <span>© 2026 Pandbeer B.V. · KvK 89234561 · BTW NL864123456B01</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>Gemaakt in Leeuwarden <span style={{ fontSize: 14 }}>🇳🇱</span></span>
        </div>
      </div>
    </footer>
  );
}

window.PbFooter = Footer;