const navStyles = {
  wrap:{
    position:"sticky", top:0, zIndex:50,
    background:"rgba(251,248,242,0.82)",
    backdropFilter:"saturate(140%) blur(12px)",
    WebkitBackdropFilter:"saturate(140%) blur(12px)",
    borderBottom:"1px solid var(--line)"
  },
  inner:{
    display:"flex", alignItems:"center", justifyContent:"space-between",
    padding:"18px 40px", maxWidth:1440, margin:"0 auto", gap:32,
  },
  logo:{display:"flex", alignItems:"center", gap:10, fontWeight:800, letterSpacing:"0.02em"},
  links:{display:"flex", alignItems:"center", gap:28, fontSize:14, fontWeight:500},
  a:{opacity:0.75, transition:"opacity .15s"},
  cta:{display:"flex", gap:10, alignItems:"center"},
  login:{padding:"10px 16px", fontSize:14, fontWeight:600, color:"var(--ink)", borderRadius:999},
  signup:{padding:"10px 18px", fontSize:14, fontWeight:600, background:"var(--ink)", color:"#fff", borderRadius:999, display:"inline-flex", gap:8, alignItems:"center", transition:"background .18s, color .18s"}
};

function Logomark({size=28}){
  return (
    <svg width={size} height={size*0.78} viewBox="0 0 100 78" fill="none" aria-hidden>
      <g fill="currentColor">
        <path d="M18 6 L76 6 L62 22 L4 22 Z"/>
        <path d="M14 26 L70 26 L56 42 L0 42 Z" opacity="0.85"/>
        <path d="M10 46 L64 46 L50 62 L-4 62 Z" opacity="0.6"/>
        <path d="M6 66 L58 66 L46 78 L-6 78 Z" opacity="0.35"/>
      </g>
    </svg>
  );
}

function Nav(){
  const items = [
    {label:"Products", href:"index.html#products"},
    {label:"Why us", href:"Why Us.html"},
    {label:"About", href:"About Us.html"},
    {label:"Contact", href:"Contact Us.html"},
  ];
  const [open, setOpen] = React.useState(false);

  // Lock background scroll while drawer is open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close drawer on resize back to desktop
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 720) setOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const handleClick = (e, href) => {
    const hashIdx = href.indexOf("#");
    if (hashIdx === -1) { setOpen(false); return; }
    const [path, hash] = [href.slice(0, hashIdx), href.slice(hashIdx + 1)];
    const here = window.location.pathname.split("/").pop() || "index.html";
    if (path === "" || path === here || decodeURIComponent(path) === decodeURIComponent(here)) {
      const target = document.getElementById(hash);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({behavior:"smooth", block:"start"});
        history.replaceState(null, "", "#" + hash);
      }
    }
    setOpen(false);
  };

  const header = (
    <header style={navStyles.wrap} data-iuw-nav>
      <div style={navStyles.inner}>
        <a href="index.html" style={navStyles.logo}>
          <span style={{color:"var(--ink)"}}><Logomark/></span>
          <span style={{fontFamily:'"Work Sans"', fontSize:15, letterSpacing:"0.02em"}}>
            INSTANT <span style={{fontWeight:400, opacity:0.7}}>UNDERWRITING</span>
          </span>
        </a>
        <nav style={navStyles.links} className="iuw-desktop-links">
          {items.map(i => (
            <a key={i.label} href={i.href} style={navStyles.a}
               onClick={e=>handleClick(e, i.href)}
               onMouseEnter={e=>e.currentTarget.style.opacity=1}
               onMouseLeave={e=>e.currentTarget.style.opacity=0.75}>{i.label}</a>
          ))}
        </nav>
        <div style={navStyles.cta}>
          <a href="#login" style={navStyles.login} className="iuw-cta-login">Log in</a>
          <a href="#signup" style={navStyles.signup} className="iuw-cta-signup"
             onMouseEnter={e=>{e.currentTarget.style.background="var(--accent)"; e.currentTarget.style.color="var(--ink)";}}
             onMouseLeave={e=>{e.currentTarget.style.background="var(--ink)"; e.currentTarget.style.color="#fff";}}>
            Sign up
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <button
            type="button"
            className="iuw-mobile-toggle"
            aria-label="Open menu"
            aria-expanded={open}
            onClick={()=>setOpen(true)}
          >
            <svg viewBox="0 0 16 16" fill="none" aria-hidden>
              <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </div>
    </header>
  );

  // Portal the drawer to document.body so it isn't trapped by the header's
  // backdrop-filter stacking context.
  const drawer = ReactDOM.createPortal(
    <div className={"iuw-mobile-drawer" + (open ? " open" : "")} aria-hidden={!open}>
      <div className="iuw-drawer-top">
        <a href="index.html" style={navStyles.logo} onClick={()=>setOpen(false)}>
          <span style={{color:"var(--ink)"}}><Logomark/></span>
          <span style={{fontFamily:'"Work Sans"', fontSize:15, letterSpacing:"0.02em"}}>
            INSTANT <span style={{fontWeight:400, opacity:0.7}}>UNDERWRITING</span>
          </span>
        </a>
        <button
          type="button"
          className="iuw-mobile-toggle"
          aria-label="Close menu"
          onClick={()=>setOpen(false)}
        >
          <svg viewBox="0 0 16 16" fill="none" aria-hidden>
            <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
      <div className="iuw-drawer-links">
        {items.map(i => (
          <a key={i.label} href={i.href} onClick={e=>handleClick(e, i.href)}>{i.label}</a>
        ))}
      </div>
      <div className="iuw-drawer-cta">
        <a href="#login"
           style={{...navStyles.login, border:"1px solid var(--line-strong)", textAlign:"center", padding:"14px 18px", fontSize:15}}
           onClick={()=>setOpen(false)}>
          Log in
        </a>
        <a href="#signup"
           style={{...navStyles.signup, justifyContent:"center", padding:"14px 18px", fontSize:15}}
           onClick={()=>setOpen(false)}>
          Sign up
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </div>,
    document.body
  );

  return <>{header}{drawer}</>;
}

window.Nav = Nav;
window.Logomark = Logomark;