const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener("scroll", onScroll, { passive:true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    ["Sobre", "#sobre"],
    ["Metodologia", "#metodologia"],
    ["Para quem é", "#paraquem"],
    ["Contato", "#contato"],
  ];
  return (
    <header style={{
      position:"fixed", top:0, left:0, right:0, zIndex:100,
      transition:"all .3s ease",
      background: scrolled ? "rgba(11,14,15,.72)" : "transparent",
      backdropFilter: scrolled ? "blur(16px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(16px)" : "none",
      borderBottom: `1px solid ${scrolled ? "var(--line)" : "transparent"}`,
    }}>
      <div className="wrap" style={{display:"flex",alignItems:"center",justifyContent:"space-between",height:74}}>
        <a href="#home" style={{display:"flex",alignItems:"center",gap:11}}>
          <Icon name="logo" size={30}/>
          <span style={{fontWeight:800,fontSize:21,letterSpacing:"-0.03em"}}>Pixarte Aura</span>
        </a>

        <nav style={{display:"flex",gap:32}} className="aria-navlinks">
          {items.map(([l,h]) => (
            <a key={h} href={h} style={{fontSize:14.5,color:"var(--ink-dim)",fontWeight:400,transition:"color .2s"}}
               onMouseEnter={e=>e.currentTarget.style.color="var(--ink)"}
               onMouseLeave={e=>e.currentTarget.style.color="var(--ink-dim)"}>{l}</a>
          ))}
        </nav>

        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <a href="#contato" className="btn btn-primary" style={{padding:"11px 20px",fontSize:14}}>
            Solicitar avaliação
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){ .aria-navlinks{ display:none !important; } }
      `}</style>
    </header>
  );
};
window.Nav = Nav;