/* ============================================================
   MenuOverlay — full-screen navigation (AIR меню.PNG pattern)
   Floating chrome + centred grey panel:
   · left  : big primary nav  +  small secondary list (bottom)
   · right : two stacked CTA cells split by a hairline
   ============================================================ */

/* small grey "+" cell button (the AIR expand square) */
function PlusSquare({ onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ width: 48, height: 48, borderRadius: 4, border: "none", cursor: "pointer",
        display: "grid", placeItems: "center", color: "var(--ink)",
        background: hover ? "var(--surface-2)" : "#E7E7E3",
        transition: "background var(--dur) var(--ease), transform var(--dur-fast) var(--ease)",
        transform: hover ? "translateY(-1px)" : "none" }}>
      <Plus size={18} weight={1.5} />
    </button>
  );
}

/* one big primary nav line */
function NavLine({ label, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", background: "none", border: "none", padding: 0, cursor: "pointer",
        textAlign: "left", textTransform: "uppercase",
        fontFamily: "var(--font-sans)", fontWeight: 500, letterSpacing: "-0.005em",
        fontSize: "clamp(26px, 3vw, 44px)", lineHeight: 1.16,
        color: hover ? "var(--ink-3)" : "var(--ink)",
        transition: "color var(--dur) var(--ease)" }}>{label}</button>
  );
}

/* one small secondary nav line */
function SubLine({ label, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", background: "none", border: "none", padding: 0, cursor: "pointer",
        textAlign: "left", textTransform: "uppercase",
        fontFamily: "var(--font-sans)", fontWeight: 500, letterSpacing: "0.04em",
        fontSize: 13, lineHeight: 2.0,
        color: hover ? "var(--ink-3)" : "var(--ink)",
        transition: "color var(--dur) var(--ease)" }}>{label}</button>
  );
}

/* red YouTube play-button mark (lucide build lacks a youtube glyph) */
function YouTubeMark({ size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden style={{ flexShrink: 0, display: "block" }}>
      <path fill="#FF0000" d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8z" />
      <path fill="#fff" d="M9.6 15.6V8.4l6.4 3.6-6.4 3.6z" />
    </svg>
  );
}

/* right-column CTA cell: label top-left, plus square bottom-right */
function CtaCell({ label, onClick, divider, icon, iconColor }) {
  return (
    <div style={{ position: "relative", padding: "26px 28px",
      borderTop: divider ? "1px solid var(--hairline)" : "none" }}>
      <button onClick={onClick} style={{ background: "none", border: "none", padding: 0, cursor: "pointer",
        display: "flex", alignItems: "center", gap: 9,
        textTransform: "uppercase", fontFamily: "var(--font-sans)", fontWeight: 500,
        letterSpacing: "0.04em", fontSize: 13, lineHeight: 1.3, color: "var(--ink)", textAlign: "left" }}>
        {icon === "youtube"
          ? <YouTubeMark size={18} />
          : icon && <Icon name={icon} style={{ width: 18, height: 18, strokeWidth: 1.8,
              color: iconColor || "var(--ink)", flexShrink: 0 }} />}
        {label}
      </button>
      <div style={{ position: "absolute", right: 22, bottom: 22 }}>
        <PlusSquare onClick={onClick} />
      </div>
    </div>
  );
}

function MenuOverlay({ open, onClose, onNav, onContact }) {
  const { t } = useT();
  const go = (id) => { onNav(id); onClose(); };
  const goPage = (url) => { window.location.href = url; };
  const openExt = (url) => { window.open(url, "_blank", "noopener"); onClose(); };
  const CH = window.CHANNELS || {};

  const primary = [
    { label: t("menu.story"), page: "about.html" },
    { label: t("menu.program"), page: "course.html" },
    { label: t("menu.pricing"), id: "pricing" },
    { label: t("menu.results"), id: "results" },
    { label: t("menu.channels"), id: "contact" },
  ];
  const secondary = [
    { label: t("menu.webinarFree"), page: "webinar.html" },
    { label: t("common.enrollPay"), page: "enroll.html" },
  ];

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 60, background: "var(--paper)",
      opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none",
      transition: "opacity var(--dur) var(--ease)",
      display: "flex", flexDirection: "column", overflow: "hidden",
    }}>
      {/* ambient greyscale form bleeding from the right edge */}
      <div aria-hidden style={{ position: "absolute", right: "-6%", top: "4%", width: "46vw", height: "92vh",
        background: "radial-gradient(60% 50% at 60% 45%, #e9e9e6 0%, #f3f3f1 45%, rgba(255,255,255,0) 72%)",
        filter: "grayscale(1)", pointerEvents: "none" }} />

      {/* floating chrome (matches Header; menu → close) */}
      <div className="menu-chrome" style={{ position: "relative", zIndex: 2, display: "flex", alignItems: "flex-start",
        justifyContent: "space-between", padding: "20px 28px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <IconButton icon="x" variant="ink" onClick={onClose} />
          <LangSwitcher tone="out" menuAlign="left" />
          <img src="logo-mark-ink.png" alt={t("brand")} style={{ height: 34, width: "auto", display: "block" }} />
        </div>
        <span className="ds-wordmark" style={{ fontSize: 17, letterSpacing: "0.22em", marginTop: 4 }}>{t("brand")}</span>
        <Pill variant="primary" icon="plus" onClick={() => goPage("course.html#enroll")}>{t("common.enroll")}</Pill>
      </div>

      {/* centred panel */}
      <div style={{ position: "relative", zIndex: 1, flex: 1, display: "flex",
        alignItems: "center", justifyContent: "center", padding: "0 28px 48px", minHeight: 0 }}>
        <div className="menu-panel" style={{ position: "relative", width: "min(1040px, 95vw)", height: "min(620px, 74vh)",
          background: "var(--surface)", borderRadius: 4, overflow: "hidden",
          display: "grid", gridTemplateColumns: "1.55fr 1fr" }}>

          {/* ambient smoke inside the panel */}
          <Smoke style={{ width: 360, height: 300, left: "28%", bottom: "2%" }} />

          {/* left column */}
          <div style={{ position: "relative", padding: "clamp(30px,3.6vw,46px)",
            display: "flex", flexDirection: "column", justifyContent: "space-between", minWidth: 0 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {primary.map((it) => <NavLine key={it.label} label={it.label}
                onClick={() => it.page ? goPage(it.page) : go(it.id)} />)}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {secondary.map((it) => <SubLine key={it.label} label={it.label}
                onClick={() => it.page ? goPage(it.page) : go(it.id)} />)}
            </div>
          </div>

          {/* right column — two CTA cells */}
          <div className="menu-right" style={{ position: "relative", borderLeft: "1px solid var(--hairline)",
            display: "grid", gridTemplateRows: "repeat(3, 1fr)" }}>
            <CtaCell label={t("menu.youtubeChannel")} icon="youtube" iconColor="#FF0000" onClick={() => openExt(CH.youtube || "#")} />
            <CtaCell label={t("menu.telegramChannel")} icon="send" iconColor="#229ED9" onClick={() => openExt(CH.telegramOpen || "#")} divider />
            <CtaCell label={t("menu.secret")} icon="lock" iconColor="#229ED9" onClick={() => goPage("secret.html")} divider />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MenuOverlay });