(function () {
// FireTail portfolio — Case study overlay (opens from a GameCard)
const {
  Tag,
  Badge,
  Button,
  IconButton,
  StatBlock
} = window.FireTailDesignSystem_df7a18;
const {
  Sections,
  sectionH,
  bodyP
} = 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 CaseStudy({
  project,
  onClose,
  isDark
}) {
  React.useEffect(() => {
    const onKey = e => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  // Stack and the link 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 (!project) return null;
  const p = project;
  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: 240,
      overflow: "hidden"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      inset: 0,
      background: p.cover ? `center 20%/cover no-repeat url(${p.cover})` : "var(--ink-600)"
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      inset: 0,
      background: `radial-gradient(120% 130% at 25% 10%, ${p.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,44px)",
      bottom: 10,
      right: 64
    }
  }, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      fontFamily: "var(--font-display)",
      fontWeight: 600,
      fontSize: "clamp(32px,5vw,62px)",
      letterSpacing: "-0.02em",
      color: "var(--text-strong)",
      lineHeight: 1,
      textShadow: "0 1px 2px var(--surface-overlay), 0 2px 14px var(--surface-overlay)"
    }
  }, p.title), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      gap: 10,
      alignItems: "center",
      marginTop: 14
    }
  }, /*#__PURE__*/React.createElement(Badge, {
    status: p.status
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      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)"
    }
  }, p.year, " \xB7 ", p.role)))), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "clamp(24px,4vw,44px)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "0 0 24px",
      fontFamily: "var(--font-display)",
      fontStyle: "italic",
      fontSize: "clamp(19px,2.4vw,31px)",
      lineHeight: 1.4,
      color: "var(--text-body)",
      maxWidth: 620
    }
  }, p.tagline), (() => {
    const hasMetrics = p.metrics && p.metrics.length > 0;
    const hasStack = p.stack && p.stack.length > 0;
    const hasLink = !!p.link;
    const hasFacts = hasStack || hasLink;
    const metricsRow = hasMetrics && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: "clamp(24px,5vw,52px)",
        flexWrap: "wrap"
      }
    }, p.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"
      }
    }, p.stack.map((s, i) => /*#__PURE__*/React.createElement(Tag, {
      key: s,
      tone: i === 0 ? "accent" : "neutral"
    }, s))));
    const linkBlock = hasLink && /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        gap: 12,
        flexWrap: "wrap",
        justifyContent: wide ? "flex-end" : "flex-start"
      }
    }, /*#__PURE__*/React.createElement(Button, {
      size: "lg",
      as: "a",
      href: p.link,
      target: "_blank",
      rel: "noreferrer",
      iconRight: /*#__PURE__*/React.createElement("span", {
        style: {
          fontFamily: "var(--font-mono)"
        }
      }, "\u2197")
    }, "Play"));

    // Quick-glance facts — see CaseStudyDetail.jsx for the full
    // rationale, mirrored here: sits above the metrics instead of
    // buried after Overview/What-I-built. Goes 2-up with the link
    // only once there's genuine width to spare — the link's column
    // is sized to its own content and right-anchored, so Stack's
    // pills get whatever room the link doesn't need.
    const factsBlock = hasFacts && (wide && hasStack && hasLink ? /*#__PURE__*/React.createElement("div", {
      style: {
        display: "grid",
        gridTemplateColumns: "1fr auto",
        gap: 32,
        alignItems: "center"
      }
    }, stackBlock, linkBlock) : /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        flexDirection: "column",
        gap: 20
      }
    }, stackBlock, linkBlock));
    return (factsBlock || hasMetrics) && /*#__PURE__*/React.createElement("div", {
      style: {
        padding: "24px 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);
  })(), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "grid",
      gridTemplateColumns: "minmax(0, 1fr)",
      gap: 28,
      maxWidth: 660
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    style: sectionH
  }, "Overview"), /*#__PURE__*/React.createElement("p", {
    style: bodyP
  }, p.summary)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    style: sectionH
  }, "What I built"), /*#__PURE__*/React.createElement("ul", {
    style: {
      margin: 0,
      padding: 0,
      listStyle: "none",
      display: "flex",
      flexDirection: "column",
      gap: 12
    }
  }, p.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, c))))), p.sections && p.sections.length > 0 && /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 28,
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement(Sections, {
    sections: p.sections,
    isDark: isDark
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    onClick: onClose
  }, "Back to work")))))));
}
window.CaseStudy = CaseStudy;
})();