/* ===== Menu popup (Confluence × Outlaw) ===== */
const BEEHIIV = "https://confluencevcweekly.beehiiv.com/p/introducing-outlaw";
const BEEHIIV_HOME = "https://confluencevcweekly.beehiiv.com/";

/* ── EMAIL CAPTURE EMBED ──────────────────────────────────────────────
   Paste your own email-capture embed HTML between the backticks below
   (e.g. the beehiiv "Embed" iframe snippet, Mailchimp form, etc).
   When this is non-empty it replaces the built-in fallback form.
   Example:
   const EMAIL_EMBED = `<iframe src="https://embeds.beehiiv.com/XXXX" ...></iframe>`;
*/
const EMAIL_EMBED = ``;

function MenuOverlay({ open, onClose, onHome }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);

  if (!open) return null;

  const nav = [
    { label: "Home", active: true, action: () => { onHome(); onClose(); } },
    { label: "Directory", action: () => { onHome(); onClose(); } },
    { label: "Writing", href: BEEHIIV_HOME },
    { label: "Manifesto", href: BEEHIIV },
  ];

  return (
    <div className="menu" role="dialog" aria-modal="true">
      <button className="menu__backdrop" onClick={onClose} aria-label="Close menu" />
      <div className="menu__sheet">
        <button className="menu__close" onClick={onClose} aria-label="Close">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
        </button>

        <nav className="menu__nav">
          {nav.map((item) => (
            item.href ? (
              <a key={item.label} className="menu__link" href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</a>
            ) : (
              <button key={item.label} className={"menu__link" + (item.active ? " is-active" : "")} onClick={item.action}>{item.label}</button>
            )
          ))}
        </nav>

        <aside className="menu__aside">
          <p className="menu__pitch">
            Architecture lessons from studying the firms that built venture capital — their funds, their people, and the structural decisions behind the returns. In your inbox.
          </p>

          {EMAIL_EMBED ? (
            <div className="menu__embed" dangerouslySetInnerHTML={{ __html: EMAIL_EMBED }} />
          ) : (
            <div className="menu__form">
              <SubscribeForm />
            </div>
          )}

          <p className="menu__note">A project presented by Outlaw, in partnership with Confluence.</p>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { MenuOverlay, BEEHIIV, BEEHIIV_HOME });