// Top navigation — minimal, sticky, with subtle scroll behavior
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["About", "about"],
    ["Bridal Makeup", "bridal-makeup"],
    ["Makeup Team", "makeup-team"],
    ["Masterclasses", "masterclasses"],
  ];

  const go = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? "rgba(244,242,236,0.88)" : "transparent",
      backdropFilter: scrolled ? "blur(12px) saturate(120%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px) saturate(120%)" : "none",
      borderBottom: scrolled ? "1px solid var(--marfil)" : "1px solid transparent",
      transition: "all .4s ease",
    }}>
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: "1fr auto 1fr",
        alignItems: "center",
        padding: scrolled ? "14px 0" : "22px 0",
        transition: "padding .4s ease",
      }}>
        <nav className="nav-left" style={{ display: "flex", gap: 28, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--coffee)", fontWeight: 300 }}>
          {links.slice(0, 2).map(([l, id]) => (
            <button key={id} onClick={() => go(id)} className="nav-link"
              style={{ color: "inherit", fontFamily: "var(--sans)", padding: "4px 0", borderBottom: "1px solid transparent", transition: "border-color .3s, color .3s" }}
              onMouseEnter={(e)=>{ e.currentTarget.style.borderBottomColor="var(--coffee)"; }}
              onMouseLeave={(e)=>{ e.currentTarget.style.borderBottomColor="transparent"; }}>
              {l}
            </button>
          ))}
        </nav>

        <button onClick={() => go("hero")} style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: "center" }}>
          <img
            src="assets/logo/logo-main-2-nav.png"
            alt="Ana Paula Celis logo"
            style={{ width: 240, height: 70, objectFit: "contain" }}
          />
        </button>

        <nav className="nav-right" style={{ display: "flex", gap: 28, justifyContent: "flex-end", alignItems: "center", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--coffee)", fontWeight: 300 }}>
          {links.slice(2).map(([l, id]) => (
            <button key={id} onClick={() => go(id)}
              style={{ color: "inherit", fontFamily: "var(--sans)", padding: "4px 0", borderBottom: "1px solid transparent", transition: "border-color .3s" }}
              onMouseEnter={(e)=>{ e.currentTarget.style.borderBottomColor="var(--coffee)"; }}
              onMouseLeave={(e)=>{ e.currentTarget.style.borderBottomColor="transparent"; }}>
              {l}
            </button>
          ))}
        </nav>
      </div>
    </header>
  );
}

window.Nav = Nav;