// Shared top navigation for every page. Links point to real pages (multi-page site).
// "Our Expertise" / "Our Awards" are sections on the home page, so they deep-link to index.html#....
const NAV_ITEMS = [
  { label: "Home", href: "/" },
  { label: "Our Story", href: "/our-story" },
  {
    label: "Our Work",
    href: "/our-work",
    children: [
      { label: "Web Design", href: "/web-design" },
      { label: "Music Videos", href: "/music-videos" },
      { label: "Commercial", href: "/commercial" },
      { label: "Documentary & BTS", href: "/documentary" },
      { label: "Corporate & Live Events", href: "/events" },
      { label: "Personal & Life Events", href: "/personal-events" },
      { label: "Editorial", href: "/editorial" },
      { label: "Lifestyle & Fashion", href: "/lifestyle" },
    ],
  },
  { label: "Our Expertise", href: "/our-expertise" },
  { label: "Our Originals", href: "/our-originals" },
  { label: "Blog", href: "/blog" },
  { label: "Our Awards", href: "/our-awards" },
  { label: "Contact Us", href: "/contact" },
];

function Nav() {
  const { HandDrawnMenuIcon } = window.JMK;
  const [open, setOpen] = React.useState(false);
  const [expandWork, setExpandWork] = React.useState(false);
  const [solid, setSolid] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const lastY = React.useRef(0);

  // Home only: search + menu icons are white over the dark hero, dark once the
  // nav turns solid white on scroll (so they stay visible). Other pages unchanged.
  const isHome = typeof window !== "undefined" &&
    (function () { const p = window.location.pathname; return p === "/" || p === "" || /\/index\.html?$/i.test(p); })();
  const iconColor = isHome && !solid ? "var(--white)" : "#111111";

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setSolid(y > 40);
      setHidden(y > lastY.current && y > 120);
      lastY.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const linkBase = {
    fontFamily: "var(--font-editorial)",
    color: "var(--white)",
    textDecoration: "none",
    lineHeight: 1.05,
  };

  return (
    <React.Fragment>
      <div
        style={{
          position: "fixed", top: 0, left: 0, right: 0, zIndex: 500,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "18px clamp(20px, 5vw, 64px)",
          background: solid ? "rgba(255,255,255,0.92)" : "transparent",
          backdropFilter: solid ? "blur(10px)" : "none",
          borderBottom: solid ? "1px solid var(--color-border)" : "1px solid transparent",
          transform: hidden && !open ? "translateY(-100%)" : "translateY(0)",
          transition: "background var(--duration-base) var(--ease-confident), border-color var(--duration-base) var(--ease-confident), transform var(--duration-base) var(--ease-confident)",
        }}
      >
        <a href="/" data-cursor="link" style={{ display: "flex", alignItems: "center" }}>
          <img src="assets/logo-full-colour.png" alt="JMK Studios" style={{ height: 42 }} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 8, color: iconColor, transition: "color var(--duration-base) var(--ease-confident)" }}>
          <window.JMK.AISearch />
          <button
            data-cursor="link"
            onClick={() => setOpen(!open)}
            style={{ background: "none", border: "none", cursor: "pointer", color: iconColor, padding: 6, transition: "color var(--duration-base) var(--ease-confident)" }}
            aria-label="Menu"
          >
            <HandDrawnMenuIcon open={open} />
          </button>
        </div>
      </div>

      <div
        style={{
          position: "fixed", inset: 0, zIndex: 490,
          background: "#111111",
          transform: open ? "translateY(0)" : "translateY(-100%)",
          transition: "transform 520ms var(--ease-confident)",
          display: "flex", flexDirection: "column", justifyContent: "center",
          padding: "96px clamp(24px, 8vw, 96px) 48px",
          overflowY: "auto",
        }}
      >
        <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {NAV_ITEMS.map((item, i) => (
            <div key={item.label}>
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <a
                  href={item.href}
                  data-cursor="link"
                  onClick={() => setOpen(false)}
                  style={{
                    ...linkBase,
                    fontSize: "clamp(30px, 6.4vw, 66px)",
                    opacity: open ? 1 : 0,
                    transform: open ? "translateX(0)" : "translateX(-24px)",
                    transition: `opacity 420ms var(--ease-confident) ${i * 45}ms, transform 420ms var(--ease-confident) ${i * 45}ms, color 150ms`,
                  }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = "var(--color-primary)")}
                  onMouseLeave={(e) => (e.currentTarget.style.color = "var(--white)")}
                >
                  {item.label}
                </a>
                {item.children && (
                  <button
                    data-cursor="link"
                    onClick={() => setExpandWork((v) => !v)}
                    aria-label="Toggle work categories"
                    style={{
                      background: "none", border: "1px solid rgba(255,255,255,0.35)", color: "var(--white)",
                      width: 30, height: 30, borderRadius: "50%", cursor: "pointer", flexShrink: 0,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--font-ui)", fontSize: 18, lineHeight: 1,
                      opacity: open ? 1 : 0, transition: `opacity 420ms var(--ease-confident) ${i * 45}ms`,
                    }}
                  >
                    {expandWork ? "−" : "+"}
                  </button>
                )}
              </div>
              {item.children && (
                <div style={{
                  overflow: "hidden",
                  maxHeight: expandWork ? 520 : 0,
                  transition: "max-height 420ms var(--ease-confident)",
                  paddingLeft: 6,
                }}>
                  <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: expandWork ? "10px 0 14px" : 0 }}>
                    {item.children.map((c) => (
                      <a
                        key={c.label}
                        href={c.href}
                        data-cursor="link"
                        onClick={() => setOpen(false)}
                        style={{
                          fontFamily: "var(--font-ui)", fontSize: "clamp(14px,2.4vw,18px)",
                          color: "rgba(255,255,255,0.6)", textDecoration: "none", padding: "4px 0",
                          transition: "color 150ms",
                        }}
                        onMouseEnter={(e) => (e.currentTarget.style.color = "var(--color-primary)")}
                        onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.6)")}
                      >
                        {c.label}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </nav>
      </div>
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.Nav = Nav;