// Nav.jsx — Sticky top nav. Logo left, links center, pink CTA right.
// Below 900px the center links hide and a hamburger opens a full-screen overlay.
const NAV_ROUTES = {
  home: "index.html",
  work: "index.html#work",
  interviews: "interviews.html",
  animation: "animation.html",
  about: "about.html",
  "case-studies": "case-studies.html",
  contact: "index.html#contact",
};
const Nav = ({ onNav, active = "home" }) => {
  const [open, setOpen] = React.useState(false);

  const links = [
    { id: "work",        label: "Work",        em: "↓" },
    { id: "interviews",  label: "Interviews"   },
    { id: "animation",   label: "Animation"    },
    { id: "about",       label: "About"        },
    { id: "case-studies", label: "Case Studies" },
  ];

  React.useEffect(() => {
    document.body.classList.toggle("pc-nav-open", open);
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.classList.remove("pc-nav-open");
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const handle = (id) => (e) => {
    const href = NAV_ROUTES[id];
    if (onNav) onNav(id, e);
    setOpen(false);
    if (!href) return;
    e?.preventDefault?.();
    window.location.href = href;
  };

  return (
    <>
      <div className="pc-nav">
        <div className="pc-nav-inner">
          <a className="pc-nav-logo" href={NAV_ROUTES.home} onClick={handle("home")}>
            <img src="assets/logo-mark.png" alt="Poley Creative" />
            <span className="pc-wordmark">
              <em>Poley</em>Creative<sup>®</sup>
            </span>
          </a>
          <nav className="pc-nav-links">
            {links.map(l => (
              <a key={l.id}
                 href={NAV_ROUTES[l.id] || "#"}
                 onClick={handle(l.id)}
                 className={"pc-nav-link" + (active === l.id ? " is-active" : "")}>
                {l.label}
                {l.id === "work" && <span className="pc-caret">▾</span>}
              </a>
            ))}
          </nav>
          <button
            className="pc-nav-toggle"
            aria-label="Open menu"
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <span className="pc-nav-toggle-bars">
              <span/><span/><span/>
            </span>
          </button>
          <div className="pc-nav-cta">
            <Button size="sm" href="https://calendly.com/poleycreative/meeting-with-poley-creative" target="_blank" rel="noopener noreferrer">Schedule</Button>
          </div>
        </div>
      </div>

      {open && (
        <div className="pc-nav-overlay" role="dialog" aria-label="Site navigation">
          <div className="pc-nav-overlay-head">
            <span className="pc-nav-overlay-logo">Poley<em style={{fontStyle:'italic',fontWeight:400}}>Creative</em></span>
            <button className="pc-nav-overlay-close" aria-label="Close menu" onClick={() => setOpen(false)}>×</button>
          </div>
          <div className="pc-nav-overlay-links">
            {[{id:"home",label:"Home"}, ...links, {id:"contact",label:"Contact"}].map(l => (
              <a key={l.id}
                 href={NAV_ROUTES[l.id] || "#"}
                 onClick={handle(l.id)}
                 className={"pc-nav-overlay-link" + (active === l.id ? " is-active" : "")}>
                <span>{l.label}</span>
                <em>{String((["home","work","interviews","animation","about","case-studies","contact"].indexOf(l.id)+1)).padStart(2,"0")}</em>
              </a>
            ))}
          </div>
          <div className="pc-nav-overlay-foot">
            <a className="pc-nav-overlay-contact" href="mailto:hello@poleycreative.com">hello@poleycreative.com</a>
            <Button size="sm" href="https://calendly.com/poleycreative/meeting-with-poley-creative" target="_blank" rel="noopener noreferrer">Schedule</Button>
          </div>
        </div>
      )}
    </>
  );
};
window.Nav = Nav;