// Header.jsx — sticky nav bar with mobile menu toggle
const { useState: useStateH, useEffect: useEffectH } = React;

function Header() {
  const [scrolled, setScrolled] = useStateH(false);
  const [menuOpen, setMenuOpen] = useStateH(false);
  const [hidden, setHidden] = useStateH(false);
  const [lastScroll, setLastScroll] = useStateH(0);

  useEffectH(() => {
    const onScroll = () => {
      const curr = window.scrollY;
      setScrolled(curr > 24);
      // Hide on scroll down, show on scroll up
      if (curr > lastScroll && curr > 100) {
        setHidden(true);
      } else {
        setHidden(false);
      }
      setLastScroll(curr);
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [lastScroll]);

  const links = [
    ["What I Do", "#services"],
    ["How I Think", "#approach"],
    ["Where I've Been", "#experience"],
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "var(--gm-paper)" : "rgba(242,239,232,0)",
      borderBottom: scrolled ? "var(--stroke) solid var(--gm-ink)" : "var(--stroke) solid transparent",
      transition: "background .25s, border-color .25s, transform .3s ease-out",
      transform: hidden ? "translateY(-100%)" : "translateY(0)"
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", height: 76, gap: 24 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
          <Wordmark height={34} />
          <span style={{ fontSize: 11, fontFamily: "var(--font-body)", fontWeight: 500, color: "var(--gm-ink)", marginTop: 2, letterSpacing: ".05em" }}>By Bryce Liggins</span>
        </div>
        <nav style={{ marginLeft: "auto", display: "flex", gap: 28 }} className="gm-desktop-nav">
          {links.map(([label, href]) => (
            <a key={href} href={href} className="navlink" style={{
              fontFamily: "var(--font-display)", fontWeight: 600, textTransform: "uppercase",
              fontSize: 16, letterSpacing: ".04em", color: "var(--gm-ink)", textDecoration: "none"
            }}>{label}</a>
          ))}
        </nav>
        <div className="gm-desktop-nav">
          <Btn variant="dark" size="sm" href="#contact" icon="lightning">Let's Grow</Btn>
        </div>
        <button className="gm-burger" aria-label="Menu" onClick={() => setMenuOpen(o => !o)} style={{
          marginLeft: "auto", display: "none", background: "var(--gm-ink)", border: "none",
          width: 44, height: 44, color: "var(--gm-paper)", cursor: "pointer", fontSize: 22,
          alignItems: "center", justifyContent: "center"
        }}>
          <i className={"ph-bold ph-" + (menuOpen ? "x" : "list")}></i>
        </button>
      </div>

      {menuOpen && (
        <div className="gm-mobile-menu" style={{
          borderTop: "var(--stroke) solid var(--gm-ink)", background: "var(--gm-paper)", padding: "16px 32px 24px"
        }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setMenuOpen(false)} style={{
              display: "block", padding: "12px 0", borderBottom: "1px solid var(--border-soft)",
              fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase",
              fontSize: 22, color: "var(--gm-ink)", textDecoration: "none"
            }}>{label}</a>
          ))}
          <div style={{ marginTop: 18 }}>
            <Btn variant="primary" href="#contact" icon="lightning" onClick={() => setMenuOpen(false)}>Let's Grow</Btn>
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Header });