(function () {
// Personal portfolio — Case study detail overlay for Professional Work entries.
// Parallel to CaseStudy.jsx (which handles data.js/ProjectGrid entries) but for
// the case-studies-data.js shape: company/role/dates + an ordered `sections` mix
// of text/code/diagram/glossary/concept/note blocks instead of a fixed field set.
// Section-type rendering itself lives in CaseStudySections.jsx, shared with CaseStudy.jsx.
const {
  Tag,
  Button,
  IconButton,
  StatBlock
} = window.FireTailDesignSystem_df7a18;
const {
  Sections,
  renderRich,
  sectionH,
  PROSE_MAX
} = window.CaseStudySections;

// Visually hidden but still in the DOM — keeps "Stack" available to screen
// readers and search-engine text extraction without spending visual space
// on a label the pills beneath it already make obvious.
const srOnly = {
  position: "absolute",
  width: 1,
  height: 1,
  padding: 0,
  margin: -1,
  overflow: "hidden",
  whiteSpace: "nowrap",
  border: 0,
  clip: "rect(0,0,0,0)"
};
function Endorsements({
  items
}) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 16
    }
  }, items.map((e, i) => /*#__PURE__*/React.createElement("blockquote", {
    key: i,
    style: {
      margin: 0,
      padding: "16px 20px",
      borderLeft: "3px solid var(--accent)",
      background: "var(--surface-card)",
      borderRadius: "0 var(--radius-md) var(--radius-md) 0"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "0 0 10px",
      fontFamily: "var(--font-display)",
      fontStyle: "italic",
      fontSize: 19,
      color: "var(--text-body)",
      lineHeight: 1.6
    }
  }, "\u201C", e.quote, "\u201D"), /*#__PURE__*/React.createElement("footer", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 14,
      color: "var(--text-faint)"
    }
  }, e.link ? /*#__PURE__*/React.createElement("a", {
    href: e.link,
    target: "_blank",
    rel: "noreferrer",
    style: {
      color: "var(--text-faint)"
    }
  }, e.name) : e.name, e.role ? ", " + e.role : "", e.relationship ? " — " + e.relationship : ""))));
}
function CaseStudyDetail({
  cs,
  onClose,
  isDark
}) {
  React.useEffect(() => {
    if (!cs) return;
    const onKey = e => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [cs, onClose]);

  // Stack and Links go side by side only once there's genuinely enough
  // width to spare — squeezed side by side is worse than just stacking,
  // which is what narrower desktop windows, tablets, and mobile fall back to.
  const [wide, setWide] = React.useState(() => window.innerWidth >= 1180);
  React.useEffect(() => {
    const mq = window.matchMedia("(min-width: 1180px)");
    const fn = e => setWide(e.matches);
    mq.addEventListener("change", fn);
    return () => mq.removeEventListener("change", fn);
  }, []);
  if (!cs) return null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    "aria-hidden": "true",
    style: {
      position: "fixed",
      inset: 0,
      zIndex: 99,
      pointerEvents: "none",
      background: "var(--surface-overlay)",
      backdropFilter: "blur(10px)",
      animation: "ftFade var(--dur-base) var(--ease-out)"
    }
  }), /*#__PURE__*/React.createElement("div", {
    onClick: onClose,
    style: {
      position: "fixed",
      inset: 0,
      zIndex: 100,
      display: "flex",
      justifyContent: "center",
      overflowY: "auto"
    }
  }, /*#__PURE__*/React.createElement("article", {
    onClick: e => e.stopPropagation(),
    style: {
      position: "relative",
      width: "min(820px, 94vw)",
      margin: "48px 0 64px",
      background: "var(--bg-raised)",
      border: "1px solid var(--border-strong)",
      borderRadius: "var(--radius-xl)",
      overflow: "hidden",
      height: "fit-content",
      boxShadow: "var(--shadow-lg)",
      animation: "ftRise var(--dur-slow) var(--ease-out)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      padding: "clamp(24px,4vw,44px) 64px 0 clamp(24px,4vw,44px)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      top: 16,
      right: 16
    }
  }, /*#__PURE__*/React.createElement(IconButton, {
    label: "Close",
    variant: "solid",
    onClick: onClose
  }, "\u2715")), /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 14,
      letterSpacing: "0.1em",
      color: "var(--accent)"
    }
  }, cs.company, " \xB7 ", cs.role, " \xB7 ", cs.dates), /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: "10px 0 0",
      fontFamily: "var(--font-display)",
      fontWeight: 600,
      fontSize: "clamp(28px,4.5vw,53px)",
      letterSpacing: "-0.02em",
      color: "var(--text-strong)",
      lineHeight: 1.05,
      maxWidth: 760
    }
  }, cs.title)), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "clamp(20px,3vw,32px) clamp(24px,4vw,44px) clamp(24px,4vw,44px)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "0 0 24px",
      fontFamily: "var(--font-display)",
      fontStyle: "italic",
      fontSize: "clamp(18px,2.2vw,28px)",
      lineHeight: 1.45,
      color: "var(--text-body)",
      maxWidth: PROSE_MAX
    }
  }, renderRich(cs.hook)), (() => {
    const hasMetrics = cs.metrics && cs.metrics.length > 0;
    const hasStack = cs.stack && cs.stack.length > 0;
    const hasLinks = cs.links && cs.links.length > 0;
    const hasFacts = hasStack || hasLinks;
    const metricsRow = hasMetrics && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: "clamp(20px,4vw,44px)",
        flexWrap: "wrap"
      }
    }, cs.metrics.map(([v, l]) => /*#__PURE__*/React.createElement(StatBlock, {
      key: l,
      value: v,
      label: l
    })));
    const stackBlock = hasStack && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
      style: srOnly
    }, "Stack"), /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: 8,
        flexWrap: "wrap"
      }
    }, cs.stack.map((s, i) => /*#__PURE__*/React.createElement(Tag, {
      key: s,
      tone: i === 0 ? "accent" : "neutral"
    }, s))));
    const linksBlock = hasLinks && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: 12,
        flexWrap: "wrap",
        justifyContent: wide ? "flex-end" : "flex-start"
      }
    }, cs.links.map(l => /*#__PURE__*/React.createElement(Button, {
      key: l.label,
      size: "lg",
      as: "a",
      href: l.href,
      target: "_blank",
      rel: "noreferrer",
      iconRight: /*#__PURE__*/React.createElement("span", {
        style: {
          fontFamily: "var(--font-mono)"
        }
      }, "\u2197")
    }, l.label)));

    // Quick-glance facts — a skimmer shouldn't have to scroll past
    // every deep-dive section and endorsement to find "what tech" or
    // "is there a live link." Sits above the metrics, not beside them —
    // a side-by-side band grew as tall as its taller half whenever a
    // case study had more than a couple of metrics, wasting the
    // shorter half's space. Stack/Links go 2-up only once there's both
    // of them and genuine width to spare; the Links column is sized to
    // its own content (not matched 1:1 with Stack) and right-anchored,
    // so Stack's pills get whatever room Links doesn't need.
    const factsBlock = hasFacts && (wide && hasStack && hasLinks ? /*#__PURE__*/React.createElement("div", {
      style: {
        display: "grid",
        gridTemplateColumns: "1fr auto",
        gap: 32,
        alignItems: "center"
      }
    }, stackBlock, linksBlock) : /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        flexDirection: "column",
        gap: 20
      }
    }, stackBlock, linksBlock));
    const mainContent =
    /*#__PURE__*/
    // minWidth: 0 — a code section's unwrappable long line would
    // otherwise blow this flex column's width out past the modal's
    // own bounds instead of scrolling internally (see CodeBlock).
    React.createElement("div", {
      style: {
        display: "flex",
        flexDirection: "column",
        gap: 28,
        minWidth: 0
      }
    }, /*#__PURE__*/React.createElement(Sections, {
      sections: cs.sections,
      isDark: isDark
    }), cs.endorsements && cs.endorsements.length > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
      style: sectionH
    }, "Endorsements"), /*#__PURE__*/React.createElement(Endorsements, {
      items: cs.endorsements
    })));
    return /*#__PURE__*/React.createElement(React.Fragment, null, (factsBlock || hasMetrics) && /*#__PURE__*/React.createElement("div", {
      style: {
        padding: "22px 0",
        borderTop: "1px solid var(--border)",
        borderBottom: "1px solid var(--border)",
        marginBottom: 28,
        display: "flex",
        flexDirection: "column",
        gap: 24
      }
    }, factsBlock, factsBlock && hasMetrics && /*#__PURE__*/React.createElement("div", {
      style: {
        borderTop: "1px solid var(--border)"
      }
    }), hasMetrics && metricsRow), mainContent);
  })(), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 32
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    onClick: onClose
  }, "Back to work"))))));
}
window.CaseStudyDetail = CaseStudyDetail;
})();