// Site header for the Jasmin Haas website.
function JHNav({ current, onNav, onInk }) {
  const { IconButton } = window.JasminHaasDesignSystem_416321;
  const [scrolled, setScrolled] = React.useState(false);
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    const sc = containerRef.current && containerRef.current.closest("[data-scroll]");
    const target = sc || window;
    const onScroll = () => {
      const y = sc ? sc.scrollTop : window.scrollY;
      setScrolled(y > 40);
    };
    target.addEventListener("scroll", onScroll);
    onScroll();
    return () => target.removeEventListener("scroll", onScroll);
  }, []);

  const solid = scrolled || !onInk;
  const links = [
    { id: "home", label: "Home" },
    { id: "portfolio", label: "Verkaufsportfolio" },
    { id: "sold", label: "Verkaufte Werke" },
    { id: "news", label: "Aktuelles" },
    { id: "contact", label: "Kontakt" },
  ];

  const textColor = solid ? "var(--ink-800)" : "var(--linen-100)";

  return (
    <header
      ref={containerRef}
      style={{
        position: "sticky", top: 0, zIndex: 50,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 var(--gutter)",
        height: scrolled ? "70px" : "86px",
        background: solid ? "rgba(251,248,242,0.86)" : "transparent",
        backdropFilter: solid ? "var(--blur-overlay)" : "none",
        WebkitBackdropFilter: solid ? "var(--blur-overlay)" : "none",
        borderBottom: solid ? "1px solid var(--line)" : "1px solid transparent",
        transition: "all var(--dur-base) var(--ease-gallery)",
      }}
    >
      {/* Brand */}
      <button onClick={() => onNav("home")} style={{ background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "baseline", gap: "12px", padding: 0 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "1.6rem", letterSpacing: "0.02em", color: textColor }}>Jasmin Haas</span>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.56rem", fontWeight: 600, letterSpacing: "0.34em", textTransform: "uppercase", color: solid ? "var(--text-gold)" : "var(--gold-300)" }}>Würzburg</span>
      </button>

      {/* Links */}
      <nav style={{ display: "flex", alignItems: "center", gap: "30px" }} className="jh-nav-links">
        {links.map((l) => {
          const active = current === l.id;
          return (
            <button key={l.id} onClick={() => onNav(l.id)}
              style={{
                background: "none", border: "none", cursor: "pointer", padding: "6px 0",
                fontFamily: "var(--font-sans)", fontSize: "0.72rem", fontWeight: 600,
                letterSpacing: "0.14em", textTransform: "uppercase",
                color: active ? (solid ? "var(--text-gold)" : "var(--gold-300)") : textColor,
                position: "relative", opacity: active ? 1 : 0.82,
                transition: "color var(--dur-base) var(--ease-gallery), opacity var(--dur-base)",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.opacity = 1)}
              onMouseLeave={(e) => (e.currentTarget.style.opacity = active ? 1 : 0.82)}
            >
              {l.label}
              <span style={{ position: "absolute", left: 0, bottom: 0, height: "1px", width: active ? "100%" : "0%", background: "var(--gold-leaf)", transition: "width var(--dur-base) var(--ease-gallery)" }} />
            </button>
          );
        })}
      </nav>

      {/* Lang + social */}
      <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.1em", color: textColor }}>
          <span style={{ color: solid ? "var(--text-gold)" : "var(--gold-300)" }}>DE</span>
          <span style={{ opacity: 0.4 }}> / EN</span>
        </span>
        <IconButton label="Instagram" variant={solid ? "outline" : "on-ink"} round size="sm" onClick={() => window.open((window.JH_SETTINGS||{}).instagram_url || "#", "_blank")}>
          <i data-lucide="instagram" style={{ width: 16, height: 16 }}></i>
        </IconButton>
      </div>
    </header>
  );
}
window.JHNav = JHNav;