/* menus.jsx, interactive hidden menus (click wordmark / "Menu" to drop down) */
const { useState: useMenuState } = React;

const MK = {
  ink: "#282828", soft: "#7d7669", faint: "#ada595", paper: "#ebeae4", line: "#cdc7b9", clay: "#818F9B",
};

/* one dropdown link */
function MenuLink({ children, align = "left", soft }) {
  const [hov, setHov] = useMenuState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      className="serif"
      style={{
        fontSize: 18, lineHeight: 1.42, color: hov ? MK.clay : (soft ? MK.soft : MK.ink),
        cursor: "pointer", textAlign: align, transition: "color 0.25s ease",
        letterSpacing: "0.01em", fontWeight: 400,
      }}>
      {children}
    </div>
  );
}

/* LEFT menu, wordmark, click drops Projects / Services / Contact */
function MenuLeft({ defaultOpen = true }) {
  const [open, setOpen] = useMenuState(defaultOpen);
  const items = ["Projects", "Services", "Contact"];
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "flex-start", userSelect: "none" }}>
      <button
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{ background: "none", border: "none", padding: 0, cursor: "pointer", display: "block" }}>
        <Wordmark size={30} color={MK.ink} />
      </button>
      <div style={{
        overflow: "hidden", transition: "max-height 0.5s cubic-bezier(.5,0,.1,1), opacity 0.4s ease",
        maxHeight: open ? 220 : 0, opacity: open ? 1 : 0, marginTop: open ? 22 : 0,
      }}>
        {items.map(i => <MenuLink key={i} align="left">{i}</MenuLink>)}
      </div>
    </div>
  );
}

/* RIGHT menu, "Menu" label, click drops method / schedule a call (right-aligned) */
function MenuRight({ defaultOpen = true }) {
  const [open, setOpen] = useMenuState(defaultOpen);
  const items = ["method", "schedule a call"];
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "flex-end", userSelect: "none" }}>
      <button
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        className="serif"
        style={{
          background: "none", border: "none", padding: 0, cursor: "pointer",
          fontSize: 30, color: MK.ink, letterSpacing: "0.04em", fontWeight: 400,
          display: "flex", alignItems: "center", gap: 14,
        }}>
        Menu
        <span style={{ display: "inline-flex", flexDirection: "column", gap: 5,
          transform: open ? "rotate(0deg)" : "rotate(0deg)", transition: "transform 0.3s" }}>
          <span style={{ width: 26, height: 1.4, background: MK.ink, transition: "transform 0.35s",
            transform: open ? "translateY(3.2px) rotate(7deg)" : "none" }} />
          <span style={{ width: 26, height: 1.4, background: MK.ink, transition: "transform 0.35s",
            transform: open ? "translateY(-3.2px) rotate(-7deg)" : "none" }} />
        </span>
      </button>
      <div style={{
        overflow: "hidden", transition: "max-height 0.5s cubic-bezier(.5,0,.1,1), opacity 0.4s ease",
        maxHeight: open ? 180 : 0, opacity: open ? 1 : 0, marginTop: open ? 22 : 0,
        display: "flex", flexDirection: "column", alignItems: "flex-end",
      }}>
        {items.map(i => <MenuLink key={i} align="right">{i}</MenuLink>)}
      </div>
    </div>
  );
}

/* Full header bar, wordmark menu left, Menu right (a real site header) */
function MenuHeaderBar() {
  return (
    <div className="mk" style={{ width: "100%", height: "100%", background: MK.paper, position: "relative", padding: "52px 72px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <MenuLeft defaultOpen={true} />
        <MenuRight defaultOpen={true} />
      </div>
      <div className="label" style={{ position: "absolute", left: 72, bottom: 30, fontSize: 9, color: MK.faint, letterSpacing: "0.22em" }}>
        Click the wordmark or “Menu” to toggle
      </div>
    </div>
  );
}

/* maps a menu label to its live page (undefined = not yet a page) */
const MENU_HREF = {
  "Projects": "projects.html", "Services": "services.html", "About": "about.html",
  "Method": "method.html", "Schedule a call": "index.html?from=enter#book", "Contact": "about.html",
};
function menuHref(label) { return MENU_HREF[label]; }

/* HOVER menu for the home hero, items reveal when cursor is over "Menu" (top-right) */
function HoverMenu({ color = "#f4efe5", items = ["Projects", "Method", "Schedule a call"] }) {
  const [open, setOpen] = useMenuState(false);
  return (
    <div
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
      style={{ position: "relative", display: "inline-flex", flexDirection: "column", alignItems: "flex-end", userSelect: "none", cursor: "pointer" }}>
      {/* trigger */}
      <div onClick={() => setOpen(o => !o)} style={{ display: "flex", alignItems: "center", gap: 11, justifyContent: "flex-end" }}>
        <span className="label" style={{ fontSize: 13, color }}>Menu</span>
        <span style={{ display: "inline-flex", flexDirection: "column", gap: 4 }}>
          <span style={{ width: 22, height: 1, background: color, transition: "transform 0.35s",
            transform: open ? "translateY(2.5px) rotate(8deg)" : "none" }} />
          <span style={{ width: 22, height: 1, background: color, transition: "transform 0.35s",
            transform: open ? "translateY(-2.5px) rotate(-8deg)" : "none" }} />
        </span>
      </div>
      {/* revealed items */}
      <div style={{
        position: "absolute", top: "100%", right: 0, paddingTop: 14, zIndex: 30,
        textAlign: "right",
        transition: "opacity 0.3s ease, transform 0.3s ease",
        opacity: open ? 1 : 0, transform: open ? "none" : "translateY(-6px)", pointerEvents: open ? "auto" : "none",
        display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 9,
      }}>
        {["Projects", "Services", "About"].filter(x => !items.includes(x)).map(i => (
          <a key={i} href={menuHref(i)} className="label" style={{ fontSize: 13, letterSpacing: "0.2em", color, textDecoration: "none" }}>{i}</a>
        ))}
        {items.map(i => {
          const href = menuHref(i);
          return href
            ? <a key={i} href={href} className="label" style={{ fontSize: 13, letterSpacing: "0.2em", color, textDecoration: "none" }}>{i}</a>
            : <span key={i} className="label" style={{ fontSize: 13, letterSpacing: "0.2em", color }}>{i}</span>;
        })}
      </div>
    </div>
  );
}

/* Wordmark as a plain home link, no dropdown. All nav lives under the right "Menu". */
function HoverMenuLeft({ color = "#f4efe5", logoSize = 37, homeHref = "index.html" }) {
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "flex-start", userSelect: "none" }}>
      <a href={homeHref} style={{ textDecoration: "none", display: "inline-block" }}><Wordmark size={logoSize} color={color} /></a>
    </div>
  );
}

Object.assign(window, { MenuLeft, MenuRight, MenuHeaderBar, HoverMenu, HoverMenuLeft });