(function () {
// Personal portfolio — Published Work detail overlay (opens from a PublishedWorkCard).
// Lighter than CaseStudyDetail on purpose — one hero image, no diagrams/code blocks.
// This is breadth-with-a-bit-of-depth, not the full case-study treatment. When a
// caseStudyId exists, offers a way to jump into that deeper writeup instead of
// duplicating it here.
const {
  Tag,
  Button,
  IconButton,
  StatBlock
} = window.FireTailDesignSystem_df7a18;

// 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 PublishedWorkDetail({
  item,
  onClose,
  onOpenCaseStudy
}) {
  React.useEffect(() => {
    if (!item) return;
    const onKey = e => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [item, onClose]);

  // Stack and Links go side by side only once there's genuinely enough
  // width to spare — see CaseStudyDetail.jsx for the full rationale, mirrored here.
  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 (!item) return null;
  const readCaseStudy = () => {
    onOpenCaseStudy(item.caseStudyId);
    onClose();
  };
  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", {
    style: {
      position: "fixed",
      inset: 0,
      zIndex: 100,
      display: "flex",
      justifyContent: "center",
      overflowY: "auto"
    },
    onClick: onClose
  }, /*#__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",
      height: 220,
      overflow: "hidden"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      inset: 0,
      background: item.cover ? `${item.coverPosition || "center 20%"}/cover no-repeat url(${item.cover})` : "var(--ink-600)"
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      inset: 0,
      background: `radial-gradient(120% 130% at 25% 10%, ${item.accent}66, transparent 58%)`
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      inset: 0,
      background: "linear-gradient(to top, var(--bg-raised) 2%, transparent 60%)"
    }
  }), /*#__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("div", {
    style: {
      position: "absolute",
      left: "clamp(24px,4vw,40px)",
      bottom: 8,
      right: 64
    }
  }, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      fontFamily: "var(--font-display)",
      fontWeight: 600,
      fontSize: "clamp(26px,4vw,48px)",
      letterSpacing: "-0.02em",
      color: "var(--text-strong)",
      lineHeight: 1.05,
      textShadow: "0 1px 2px var(--surface-overlay), 0 2px 14px var(--surface-overlay)"
    }
  }, item.title), /*#__PURE__*/React.createElement("span", {
    style: {
      display: "block",
      margin: "8px 0 0",
      fontFamily: "var(--font-mono)",
      fontSize: 14,
      letterSpacing: "0.1em",
      color: "var(--text-muted)",
      textShadow: "0 1px 2px var(--surface-overlay), 0 2px 10px var(--surface-overlay)"
    }
  }, item.company, " \xB7 ", item.role))), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "clamp(22px,3.5vw,36px)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "0 0 22px",
      fontFamily: "var(--font-display)",
      fontStyle: "italic",
      fontSize: "clamp(17px,2vw,25px)",
      lineHeight: 1.45,
      color: "var(--text-body)"
    }
  }, item.tagline), (() => {
    const hasMetrics = item.metrics && item.metrics.length > 0;
    const hasStack = item.stack && item.stack.length > 0;
    const hasStoreLinks = item.links && (item.links.android || item.links.ios || item.links.website);
    const hasCaseStudy = !!item.caseStudyId;
    const hasLinksBlock = hasStoreLinks || hasCaseStudy;
    const hasFacts = hasStack || hasLinksBlock;
    const metricsRow = hasMetrics && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: "clamp(20px,4vw,40px)",
        flexWrap: "wrap"
      }
    }, item.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"
      }
    }, item.stack.map((s, i) => /*#__PURE__*/React.createElement(Tag, {
      key: s,
      tone: i === 0 ? "accent" : "neutral"
    }, s))));

    // Case-study link lives here, below the store links, rather
    // than in its own row at the very bottom of the modal — it's
    // a link like the others, just an internal one.
    const linksBlock = hasLinksBlock && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        flexDirection: "column",
        alignItems: wide ? "flex-end" : "flex-start",
        gap: 12
      }
    }, hasStoreLinks && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: 12,
        flexWrap: "wrap",
        justifyContent: wide ? "flex-end" : "flex-start"
      }
    }, item.links.android && /*#__PURE__*/React.createElement(Button, {
      size: "lg",
      as: "a",
      href: item.links.android,
      target: "_blank",
      rel: "noreferrer",
      iconRight: /*#__PURE__*/React.createElement("span", {
        style: {
          fontFamily: "var(--font-mono)"
        }
      }, "\u2197")
    }, "Android"), item.links.ios && /*#__PURE__*/React.createElement(Button, {
      size: "lg",
      as: "a",
      href: item.links.ios,
      target: "_blank",
      rel: "noreferrer",
      iconRight: /*#__PURE__*/React.createElement("span", {
        style: {
          fontFamily: "var(--font-mono)"
        }
      }, "\u2197")
    }, "iOS"), item.links.website && /*#__PURE__*/React.createElement(Button, {
      size: "lg",
      as: "a",
      href: item.links.website,
      target: "_blank",
      rel: "noreferrer",
      iconRight: /*#__PURE__*/React.createElement("span", {
        style: {
          fontFamily: "var(--font-mono)"
        }
      }, "\u2197")
    }, "Visit site")), hasCaseStudy && /*#__PURE__*/React.createElement(Button, {
      size: "sm",
      variant: "ghost",
      onClick: readCaseStudy
    }, "Case Studies \u2192"));

    // Quick-glance facts — see CaseStudyDetail.jsx for the full
    // rationale, mirrored here: sits above the metrics instead of
    // buried after contributions/images. Goes 2-up with Links only
    // once there's genuine width to spare — the Links column is
    // sized to its own content and right-anchored, so Stack's
    // pills get whatever room Links doesn't need.
    const factsBlock = hasFacts && (wide && hasStack && hasLinksBlock ? /*#__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));
    return (factsBlock || hasMetrics) && /*#__PURE__*/React.createElement("div", {
      style: {
        padding: "20px 0",
        borderTop: "1px solid var(--border)",
        borderBottom: "1px solid var(--border)",
        marginBottom: 26,
        display: "flex",
        flexDirection: "column",
        gap: 22
      }
    }, factsBlock, factsBlock && hasMetrics && /*#__PURE__*/React.createElement("div", {
      style: {
        borderTop: "1px solid var(--border)"
      }
    }), hasMetrics && metricsRow);
  })(), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 24
    }
  }, item.contributions && item.contributions.length > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    style: sectionH
  }, "What I contributed"), /*#__PURE__*/React.createElement("ul", {
    style: {
      margin: 0,
      padding: 0,
      listStyle: "none",
      display: "flex",
      flexDirection: "column",
      gap: 12
    }
  }, item.contributions.map((c, i) => /*#__PURE__*/React.createElement("li", {
    key: i,
    style: {
      display: "flex",
      gap: 12,
      fontFamily: "var(--font-sans)",
      fontSize: 18,
      lineHeight: 1.6,
      color: "var(--text-body)"
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: "var(--accent)",
      fontFamily: "var(--font-mono)",
      fontSize: 16,
      paddingTop: 2
    }
  }, String(i + 1).padStart(2, "0")), /*#__PURE__*/React.createElement("span", null, window.CaseStudySections.renderRich(c)))))), item.images && item.images.length > 0 && /*#__PURE__*/React.createElement(ImageCarousel, {
    images: item.images
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 4
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    onClick: onClose
  }, "Back to work")))))));
}
const sectionH = {
  margin: "0 0 12px",
  fontFamily: "var(--font-mono)",
  fontSize: 14,
  letterSpacing: "0.14em",
  textTransform: "uppercase",
  color: "var(--text-muted)"
};
window.PublishedWorkDetail = PublishedWorkDetail;
})();