function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const links = [
    { label: "Leistungen", href: "#leistungen" },
    { label: "Partner", href: "#partner" },
    { label: "Online-Rechner", href: "#rechner" },
    { label: "Über uns", href: "#ueber" },
    { label: "Kontakt", href: "#kontakt" },
    { label: "Erstinformation", href: (typeof window !== 'undefined' && window.__resources?.erstinfo) || "assets/AK_Erstinformation.pdf", external: true },
  ];

  return (
    <header className="site-nav" style={{
      position:"fixed", top:0, left:0, right:0, zIndex:50,
      background: scrolled ? "rgba(251,248,242,0.94)" : "rgba(251,248,242,0.7)",
      backdropFilter: "blur(12px)",
      borderBottom: scrolled ? "1px solid rgba(184,146,74,0.25)" : "1px solid transparent",
      transition: "all .35s ease",
    }}>
      <div className="site-nav-inner" style={{maxWidth:1320, margin:"0 auto", padding:"18px 40px", display:"flex", alignItems:"center", gap: 56}}>
        <Wordmark light={false} />
        <nav className="site-nav-links" style={{display:"flex", alignItems:"center", gap: 28, flex: 1}}>
          {links.map(l => (
            <a key={l.href} href={l.href}
              target={l.external ? "_blank" : undefined}
              rel={l.external ? "noopener" : undefined}
              className="sans" style={{
              fontSize: 13, letterSpacing:"0.12em", textTransform:"uppercase",
              color: "var(--navy)",
              fontWeight: 500, transition:"color .2s",
            }}>{l.label}</a>
          ))}
          <a href="#kontakt" onClick={(e)=>{e.preventDefault(); window.dispatchEvent(new Event('open-contact'));}} className="sans" style={{
            marginLeft:"auto",
            fontSize: 12, letterSpacing:"0.16em", textTransform:"uppercase",
            padding:"12px 22px",
            color: "var(--paper)",
            background: "var(--navy)",
            fontWeight: 600,
          }}>Anfrage stellen</a>
        </nav>

        {/* Mobile burger */}
        <button className="site-nav-burger" onClick={()=>setOpen(o=>!o)} aria-label="Menü"
          style={{
            display:"none", marginLeft:"auto", padding: 10, background:"transparent",
            border:"1px solid var(--navy)", color:"var(--navy)",
            width: 44, height: 44, alignItems:"center", justifyContent:"center", cursor:"pointer",
          }}>
          <svg width="20" height="14" viewBox="0 0 20 14" fill="none">
            {open ? (
              <g stroke="currentColor" strokeWidth="1.5">
                <line x1="3" y1="3" x2="17" y2="11"/>
                <line x1="17" y1="3" x2="3" y2="11"/>
              </g>
            ) : (
              <g stroke="currentColor" strokeWidth="1.5">
                <line x1="2" y1="3" x2="18" y2="3"/>
                <line x1="2" y1="7" x2="18" y2="7"/>
                <line x1="2" y1="11" x2="18" y2="11"/>
              </g>
            )}
          </svg>
        </button>
      </div>

      {/* Mobile drawer — drops down below the nav, no scroll */}
      {open && (
      <div className="site-nav-drawer" style={{
        position:"absolute", top: "100%", left: 0, right: 0,
        background:"#0e2440",
        zIndex: 100,
        borderTop:"1px solid rgba(245,241,234,0.16)",
        boxShadow:"0 16px 40px -12px rgba(0,0,0,0.45)",
      }}>
        <div style={{
          padding:"10px 20px 18px",
          display:"flex", flexDirection:"column",
          color:"#f5f1ea",
        }}>
          {links.map((l, i) => (
            <a key={l.href} href={l.href}
              target={l.external ? "_blank" : undefined}
              rel={l.external ? "noopener" : undefined}
              onClick={()=>setOpen(false)}
              className="serif" style={{
                fontSize: 18, color:"#f5f1ea", fontWeight: 500,
                padding: "12px 0",
                borderBottom: "1px solid rgba(245,241,234,0.14)",
                display:"flex", alignItems:"center", justifyContent:"space-between",
                lineHeight: 1.1, letterSpacing:"-0.005em",
                textDecoration:"none",
              }}>
              <span style={{display:"flex", alignItems:"baseline", gap: 10}}>
                <span className="serif" style={{fontSize: 11, fontStyle:"italic", color:"var(--gold)", fontWeight: 400, minWidth: 18}}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                {l.label}
              </span>
              <span style={{fontFamily:"'Cormorant Garamond',serif", fontStyle:"italic", color:"var(--gold)", fontSize: 18, lineHeight:1}}>→</span>
            </a>
          ))}

          <a href="#kontakt" onClick={(e)=>{e.preventDefault(); setOpen(false); window.dispatchEvent(new Event('open-contact'));}} className="sans" style={{
            marginTop: 14, padding:"13px 22px",
            background:"var(--gold)", color:"#0e2440",
            fontSize: 12, letterSpacing:"0.16em", textTransform:"uppercase", fontWeight: 700,
            textAlign:"center",
            display:"inline-flex", alignItems:"center", justifyContent:"center", gap: 10,
            textDecoration:"none",
          }}>
            Anfrage stellen
            <span style={{fontSize: 15}}>→</span>
          </a>
        </div>
      </div>
      )}
    </header>
  );
}
window.Nav = Nav;