// 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>
        {/* Social icons */}
        <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
          <a href="https://www.linkedin.com/company/111023915/" target="_blank" rel="noopener noreferrer"
            aria-label="LinkedIn" style={{ color: "var(--fg-on-dark-2)", display: "flex", opacity: .7, transition: "opacity .18s" }}
            onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
            onMouseLeave={(e) => e.currentTarget.style.opacity = .7}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
              <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
              <rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
            </svg>
          </a>
          <a href="https://www.instagram.com/nomadplantco/" target="_blank" rel="noopener noreferrer"
            aria-label="Instagram" style={{ color: "var(--fg-on-dark-2)", display: "flex", opacity: .7, transition: "opacity .18s" }}
            onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
            onMouseLeave={(e) => e.currentTarget.style.opacity = .7}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
            </svg>
          </a>
        </div>
      </div>
      <style>{`@media (max-width:860px){ .nm-foot-grid{ grid-template-columns:1fr 1fr !important; } }`}</style>
    </footer>
  );
}
window.Footer = Footer;