// Nav.jsx — sticky header with scroll-triggered styling + mobile menu
function Nav({ onBook, onContact }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body scroll when menu open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const close = () => setOpen(false);

  return (
    <React.Fragment>
      <nav className={`dt-nav ${scrolled ? "scrolled" : ""}`}>
        <div className="container dt-nav-inner">
          <a className="dt-brand" href="#top" onClick={close}>
            <img src="assets/logo-mark.png" alt="DuckTask" />
            <span className="dt-brand-word">DuckTask</span>
          </a>
          <div className="dt-nav-links">
            <a href="#services">Services</a>
            <a href="#why">Why us</a>
            <a href="#process">Process</a>
            <a href="#cases">Work</a>
            <a href="#pricing">Pricing</a>
            <a href="#contact">Contact</a>
          </div>
          <div className="dt-nav-cta">
            <button className="btn ghost desktop-only" onClick={onContact}>
              Get pricing
            </button>
            <button className="btn primary" onClick={onBook}>
              Book a consultation
              <i data-lucide="arrow-right" className="ic"></i>
            </button>
            <button className="dt-nav-burger" onClick={() => setOpen((o) => !o)} aria-label="Menu">
              <i data-lucide={open ? "x" : "menu"} style={{ width: 22, height: 22 }}></i>
            </button>
          </div>
        </div>
      </nav>

      <div className={`dt-mobile-menu ${open ? "open" : ""}`}>
        <a href="#services" onClick={close}>Services</a>
        <a href="#why" onClick={close}>Why DuckTask</a>
        <a href="#process" onClick={close}>Process</a>
        <a href="#cases" onClick={close}>Work</a>
        <a href="#pricing" onClick={close}>Pricing</a>
        <a href="#contact" onClick={close}>Contact</a>
        <div className="actions">
          <button className="btn secondary" onClick={() => { close(); onContact(); }}>Get pricing</button>
          <button className="btn primary" onClick={() => { close(); onBook(); }}>Book a consultation</button>
        </div>
      </div>
    </React.Fragment>
  );
}
window.Nav = Nav;