// FireTail portfolio — Case study overlay (opens from a GameCard)
const { Tag, Badge, Button, IconButton, StatBlock } = window.FireTailDesignSystem_df7a18;

function CaseStudy({ project, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  if (!project) return null;
  const p = project;

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", justifyContent: "center", overflowY: "auto", background: "var(--surface-overlay)", backdropFilter: "blur(10px)", animation: "ftFade var(--dur-base) var(--ease-out)" }} onClick={onClose}>
      <article onClick={(e) => e.stopPropagation()} style={{
        position: "relative", width: "min(900px, 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)",
      }}>
        {/* Hero band */}
        <div style={{ position: "relative", height: 240, overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, background: `radial-gradient(120% 130% at 25% 10%, ${p.accent}66, transparent 58%), var(--ink-600)` }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, var(--bg-raised) 2%, transparent 60%)" }} />
          <div style={{ position: "absolute", top: 16, right: 16 }}>
            <IconButton label="Close" variant="solid" onClick={onClose}>✕</IconButton>
          </div>
          <div style={{ position: "absolute", left: "clamp(24px,4vw,44px)", bottom: 22, right: 24 }}>
            <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 14 }}>
              <Badge status={p.status} />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.1em", color: "var(--paper-300)" }}>{p.year} · {p.role}</span>
            </div>
            <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(32px,5vw,52px)", letterSpacing: "-0.02em", color: "var(--text-strong)", lineHeight: 1 }}>{p.title}</h2>
          </div>
        </div>

        <div style={{ padding: "clamp(24px,4vw,44px)" }}>
          <p style={{ margin: "0 0 24px", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(19px,2.4vw,26px)", lineHeight: 1.4, color: "var(--text-body)", maxWidth: 620 }}>
            {p.tagline}
          </p>

          {/* metrics */}
          <div style={{ display: "flex", gap: "clamp(24px,5vw,52px)", padding: "24px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", flexWrap: "wrap", marginBottom: 28 }}>
            {p.metrics.map(([v, l]) => <StatBlock key={l} value={v} label={l} />)}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 28, maxWidth: 660 }}>
            <div>
              <h3 style={sectionH}>Overview</h3>
              <p style={bodyP}>{p.summary}</p>
            </div>
            <div>
              <h3 style={sectionH}>What I built</h3>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                {p.contributions.map((c, i) => (
                  <li key={i} style={{ display: "flex", gap: 12, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-body)" }}>
                    <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 13, paddingTop: 2 }}>{String(i + 1).padStart(2, "0")}</span>
                    <span>{c}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 style={sectionH}>Stack</h3>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {p.stack.map((s, i) => <Tag key={s} tone={i === 0 ? "accent" : "neutral"}>{s}</Tag>)}
              </div>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 4 }}>
              <Button as="a" href="#" iconRight={<span style={{ fontFamily: "var(--font-mono)" }}>↗</span>}>Play / store page</Button>
              <Button variant="ghost" onClick={onClose}>Back to work</Button>
            </div>
          </div>
        </div>
      </article>
    </div>
  );
}

const sectionH = { margin: "0 0 12px", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)" };
const bodyP = { margin: 0, fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.66, color: "var(--text-body)" };

window.CaseStudy = CaseStudy;