/* global React */
const { useState, useEffect, useRef } = React;

// ============================================
// NAVBAR — minimal wordmark + menu button
// ============================================
function Navbar({ current = "home" }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const links = [
    { href: "index.html", label: "Work", key: "home" },
    { href: "about.html", label: "About", key: "about" },
    { href: "mailto:guilhermepiluski@gmail.com", label: "Contact", key: "contact" },
  ];

  return (
    <>
      <nav className={"navbar " + (scrolled ? "navbar--scrolled" : "")}>
        <div className="container navbar__inner">
          <a href="index.html" className="wordmark" aria-label="Home">
            <span className="wordmark__dot" />
            <span className="wordmark__name">Guilherme Piluski</span>
            <span className="wordmark__role">— Product Designer</span>
          </a>
          <button
            className="navbar__menu"
            onClick={() => setOpen(true)}
            aria-label="Open menu"
          >
            <span />
            <span className="navbar__menu-label">Menu</span>
          </button>
        </div>
      </nav>

      {/* Menu overlay */}
      <div
        className={"menu-overlay " + (open ? "menu-overlay--open" : "")}
        onClick={() => setOpen(false)}
      >
        <div className="menu-overlay__inner" onClick={(e) => e.stopPropagation()}>
          <div className="container menu-overlay__top">
            <a href="index.html" className="wordmark" aria-label="Home">
              <span className="wordmark__dot" />
              <span className="wordmark__name">Guilherme Piluski</span>
              <span className="wordmark__role">— Product Designer</span>
            </a>
            <button
              className="navbar__menu navbar__menu--close"
              onClick={() => setOpen(false)}
              aria-label="Close menu"
            >
              <span />
              <span className="navbar__menu-label">Close</span>
            </button>
          </div>
          <div className="container menu-overlay__content">
            <div className="menu-overlay__nav" data-stagger>
              {links.map((l, i) => (
                <a
                  key={l.key}
                  href={l.href}
                  className={"menu-link " + (current === l.key ? "menu-link--active" : "")}
                >
                  <span className="menu-link__num">0{i + 1}</span>
                  <span className="menu-link__label">{l.label}</span>
                  <svg className="menu-link__arrow" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H9M17 7V15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>
              ))}
            </div>
            <div className="menu-overlay__meta">
              <div>
                <span className="t-eyebrow">Case studies</span>
                <div className="menu-overlay__cases">
                  <a href="case-cro.html">Landing Page for my CRO Ebook</a>
                  <a href="case-pdp.html">CRO for PDP → Checkout</a>
                  <a href="case-opencare.html">Quick Booking Experience Redesign</a>
                  <a href="case-ecom.html">CRO for E-commerce Home</a>
                  <a href="case-b2b.html">B2B SaaS Product Discoveryr</a>
                </div>
              </div>
              <div>
                <span className="t-eyebrow">Elsewhere</span>
                <div className="menu-overlay__cases">
                  <a href="https://linkedin.com/in/guilherme-piluski" target="_blank" rel="noreferrer" onClick={() => window.track('external_link_click', { destination: 'linkedin' })}>LinkedIn ↗</a>
                  <a href="https://docs.google.com/document/d/1C-S2oFPjUkvW27eQRE0mrCZHvkYq6jN7z0WxMR2QURY/edit?usp=sharing" target="_blank" rel="noreferrer" onClick={() => window.track('external_link_click', { destination: 'resume' })}>Resumé ↗</a>
                  <a href="mailto:guilhermepiluski@gmail.com" onClick={() => window.track('contact_click', { location: 'navbar_menu' })}>Email ↗</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.Navbar = Navbar;