// Footer for the Jasmin Haas website (dark ink section).
function JHFooter({ onNav }) {
  const { IconButton } = window.JasminHaasDesignSystem_416321;
  const S = window.JH_SETTINGS || {};
  return (
    <footer style={{ background: "var(--bg-ink)", color: "var(--text-on-ink)", padding: "var(--space-24) var(--gutter) var(--space-12)" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: "48px", alignItems: "start" }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "2rem" }}>Jasmin Haas</div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.05rem", color: "var(--text-on-ink-dim)", marginTop: "8px" }}>
            {S.tagline || "Abstrakte Kunst, mit Blattgold veredelt."}
          </div>
          <div style={{ display: "flex", gap: "10px", marginTop: "24px" }}>
            <IconButton label="Instagram" variant="on-ink" round onClick={() => window.open(S.instagram_url || "#", "_blank")}><i data-lucide="instagram" style={{ width: 18, height: 18 }}></i></IconButton>
            <IconButton label="E-Mail" variant="on-ink" round onClick={() => (window.location.href = "mailto:" + (S.email || ""))}><i data-lucide="mail" style={{ width: 18, height: 18 }}></i></IconButton>
          </div>
        </div>

        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.64rem", fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-300)", marginBottom: "18px" }}>Atelier</div>
          {["Home","Verkaufsportfolio","Verkaufte Werke","Aktuelles","Kontakt"].map((l, i) => (
            <button key={l} onClick={() => onNav(["home","portfolio","sold","news","contact"][i])}
              style={{ display: "block", background: "none", border: "none", cursor: "pointer", padding: "5px 0", fontFamily: "var(--font-sans)", fontSize: "0.92rem", color: "var(--text-on-ink-dim)", textAlign: "left" }}
              onMouseEnter={(e)=>e.currentTarget.style.color="var(--gold-300)"}
              onMouseLeave={(e)=>e.currentTarget.style.color="var(--text-on-ink-dim)"}>
              {l}
            </button>
          ))}
        </div>

        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.64rem", fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-300)", marginBottom: "18px" }}>Kontakt</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.92rem", color: "var(--text-on-ink-dim)", lineHeight: 2 }}>
            <div>{S.email || ""}</div>
            <div>{S.instagram || ""}</div>
            <div>{S.location || ""}</div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: "var(--content-max)", margin: "var(--space-16) auto 0", paddingTop: "var(--space-6)", borderTop: "1px solid var(--line-on-ink)", display: "flex", justifyContent: "space-between", fontFamily: "var(--font-sans)", fontSize: "0.72rem", color: "var(--text-on-ink-dim)" }}>
        <span>© {new Date().getFullYear()} Jasmin Haas · ja-ha.art</span>
        <div style={{ display: "flex", gap: "22px" }}>
          <span style={{ cursor: "pointer" }}>Impressum</span>
          <span style={{ cursor: "pointer" }}>Datenschutz</span>
        </div>
      </div>
    </footer>
  );
}
window.JHFooter = JHFooter;