// Footer.jsx
function Footer() {
  const { T } = useLang();
  const F = T.footer;
  return (
    <footer style={{ background: "var(--ink-2)", color: "var(--paper)", padding: "54px 0 30px",
      borderTop: "1px solid var(--border-dark)" }}>
      <div className="container nm-foot-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 36 }}>
        <div>
          <img src={IMG.logoCream} alt="No Mad Plant Co." style={{ height: 64, width: 64, objectFit: "contain" }} />
          <p style={{ font: "var(--t-small)", color: "var(--fg-on-dark-2)", marginTop: 14, maxWidth: 260 }}>
            {F.tagline}
          </p>
        </div>
        {F.cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11, letterSpacing: ".14em",
              textTransform: "uppercase", color: "var(--lime)", marginBottom: 14 }}>{h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {items.map(([label, href]) => (
                <a key={label} href={href} style={{ fontSize: 14, color: "var(--fg-on-dark)", opacity: .82 }}
                  onMouseEnter={(e)=>e.currentTarget.style.opacity=1}
                  onMouseLeave={(e)=>e.currentTarget.style.opacity=.82}>{label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
        marginTop: 40, paddingTop: 20, borderTop: "1px solid var(--border-dark)", flexWrap: "wrap", gap: 10 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--fg-on-dark-2)" }}>
          {F.copyright}
        </span>
      </div>
      <style>{`@media (max-width:860px){ .nm-foot-grid{ grid-template-columns:1fr 1fr !important; } }`}</style>
    </footer>
  );
}
window.Footer = Footer;