(function () {
// Personal portfolio — Published Work overview.
// Shares GameCard's cover-tile visual shell with the personal Work grid — cover
// image, click-to-open modal (PublishedWorkDetail.jsx) — plus a company logo
// badge on the cover. The badge is clickable and filters the grid by company,
// same mechanism as the company filter row (mirrors ProfessionalWork.jsx) —
// clicking an unfamiliar logo highlights its matching text label in the filter
// row, so the two stay linked without needing readable company text on every
// card.
const {
  GameCard,
  Tag
} = window.FireTailDesignSystem_df7a18;

// Straddles the seam between the cover image and GameCard's own footer —
// bottom offset is an estimate of the footer's height (GameCard is a compiled
// design-system component we can't reach inside, so this can't be measured
// directly; nudge the offset if the footer's actual height drifts from this).
// Synced to the same translateY lift GameCard applies to itself on hover (its
// own internal hover state, not this wrapper's) — otherwise this badge stays
// put while the card visually rises out from under it.
function CompanyMark({
  company,
  onFilter,
  lifted
}) {
  const logo = (window.COMPANY_LOGOS || {})[company];
  if (!logo) return null;
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    "aria-label": "Filter by " + company,
    onClick: e => {
      e.stopPropagation();
      onFilter(company);
    },
    style: {
      position: "absolute",
      right: 14,
      bottom: 58,
      zIndex: 1,
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      width: 48,
      height: 48,
      borderRadius: "50%",
      padding: 9,
      background: "radial-gradient(circle at 35% 30%, #ffffff 0%, #e9edf2 100%)",
      boxShadow: "var(--shadow-sm), 0 0 0 1px rgba(0,0,0,0.06)",
      border: "none",
      cursor: "pointer",
      transform: lifted ? "translateY(-4px)" : "translateY(0)",
      transition: "transform var(--dur-base) var(--ease-out)"
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: logo,
    alt: company + " logo",
    loading: "lazy",
    style: {
      width: "100%",
      height: "100%",
      objectFit: "contain",
      display: "block",
      pointerEvents: "none"
    }
  }));
}

// Accent divider at the seam between the cover image and GameCard's own
// footer, scaling in from the left on hover, full card width edge-to-edge.
// Same translateY sync as CompanyMark above — GameCard's internal hover state
// isn't exposed, so hover (and the lift it drives) is tracked independently
// on the wrapper instead. Positioned by matching GameCard's own cover box
// (same aspect-ratio, full card width) rather than guessing a pixel offset
// from the bottom — the cover's height never varies, unlike the footer below
// it, which can grow to a second line of tags, so anchoring from the top
// tracks the real seam regardless of how much footer content there is.
function HoverSeamLine({
  visible
}) {
  return /*#__PURE__*/React.createElement("div", {
    "aria-hidden": "true",
    style: {
      position: "absolute",
      left: 0,
      right: 0,
      top: 0,
      aspectRatio: "16 / 10",
      zIndex: 0,
      pointerEvents: "none"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      left: 0,
      right: 0,
      bottom: 0,
      height: 2,
      background: "var(--accent)",
      boxShadow: "var(--glow-ember)",
      transform: visible ? "translateY(-4px) scaleX(1)" : "translateY(0) scaleX(0)",
      transformOrigin: "left",
      transition: "transform var(--dur-base) var(--ease-out)"
    }
  }));
}

// Accent glow ring around the whole card on hover — GameCard's own hover
// state only shifts neutral border/shadow values, so this sits on top as a
// sibling overlay to give hover an on-brand blue-flame "lit up" moment,
// matching the glow language already used elsewhere (nav theme toggle, social
// dock). Can't suppress GameCard's own shadow/border shift from outside it,
// so this is additive, not a replacement. Uses the theme-aware
// var(--card-hover-glow) (tokens/colors.css), shared with CaseStudyCard and
// ProjectGrid so all card hovers look the same — the translateY sync below
// is what actually fixes the "gap" (GameCard lifts itself on hover, this
// overlay didn't move with it), independent of which shadow value is used.
// Must render AFTER <GameCard> in the JSX below, not before: GameCard always
// has a `transform` set (even translateY(0) counts), which pulls it into the
// same paint layer as positioned siblings, ordered by DOM position. Placed
// before GameCard, GameCard's own neutral hover border paints over this
// glow's accent border at the shared edge, masking the crisp ring and leaving
// only the soft outer blur visible — reads as much fainter than intended.
function HoverGlow({
  visible
}) {
  return /*#__PURE__*/React.createElement("div", {
    "aria-hidden": "true",
    style: {
      position: "absolute",
      inset: 0,
      zIndex: 0,
      pointerEvents: "none",
      borderRadius: "var(--radius-lg)",
      boxShadow: "var(--card-hover-glow)",
      border: "1px solid var(--accent-line)",
      opacity: visible ? 1 : 0,
      transform: visible ? "translateY(-4px)" : "translateY(0)",
      transition: "opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)"
    }
  });
}
function PublishedWorkCard({
  item,
  onOpen,
  onFilter
}) {
  const [hover, setHover] = React.useState(false);
  return /*#__PURE__*/React.createElement("div", {
    id: "published-" + item.id,
    style: {
      position: "relative",
      scrollMarginTop: 96
    },
    onMouseEnter: () => {
      setHover(true);
      window.FT_CARD_HOVERED = true;
    },
    onMouseLeave: () => {
      setHover(false);
      window.FT_CARD_HOVERED = false;
    }
  }, /*#__PURE__*/React.createElement(GameCard, {
    title: item.title,
    cover: item.cover,
    accent: item.accent,
    platforms: item.platforms || [],
    onClick: () => onOpen(item)
  }), /*#__PURE__*/React.createElement(HoverGlow, {
    visible: hover
  }), /*#__PURE__*/React.createElement(HoverSeamLine, {
    visible: hover
  }), /*#__PURE__*/React.createElement(CompanyMark, {
    company: item.company,
    onFilter: onFilter,
    lifted: hover
  }));
}
function PublishedWork({
  onOpen
}) {
  const items = window.FT_PUBLISHED_WORK || [];
  const allCompanies = ["All", ...Array.from(new Set(items.map(item => item.company)))];
  const [filter, setFilter] = React.useState("All");
  const shown = filter === "All" ? items : items.filter(item => item.company === filter);
  if (!items.length) return null;
  return /*#__PURE__*/React.createElement("section", {
    id: "published-work",
    style: {
      padding: "clamp(40px,6vw,80px) clamp(20px,5vw,48px)",
      borderTop: "1px solid var(--border)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: "var(--container)",
      margin: "0 auto"
    }
  }, /*#__PURE__*/React.createElement("div", {
    "data-reveal": true,
    style: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "flex-end",
      gap: 24,
      flexWrap: "wrap",
      marginBottom: 36
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    style: {
      fontFamily: "var(--font-mono)",
      fontSize: 14,
      letterSpacing: "0.16em",
      textTransform: "uppercase",
      color: "var(--accent)"
    }
  }, "01 / Shipped & live"), /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: "12px 0 0",
      fontFamily: "var(--font-display)",
      fontWeight: 500,
      fontSize: "clamp(30px,4.5vw,62px)",
      letterSpacing: "-0.02em",
      color: "var(--text-strong)",
      lineHeight: 1.05
    }
  }, "Real, playable work.")), allCompanies.length > 2 && /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 8,
      flexWrap: "wrap"
    }
  }, allCompanies.map(c => /*#__PURE__*/React.createElement(Tag, {
    key: c,
    active: filter === c,
    onClick: () => setFilter(c)
  }, c)))), /*#__PURE__*/React.createElement("div", {
    "data-reveal": true,
    style: {
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
      gap: 24,
      alignItems: "start"
    }
  }, shown.map(item => /*#__PURE__*/React.createElement(PublishedWorkCard, {
    key: item.id,
    item: item,
    onOpen: onOpen,
    onFilter: setFilter
  })))));
}
window.PublishedWork = PublishedWork;
})();