const { Dialog, Button, Readout, Badge, IconButton, Toast } = window.JabberwockeeDesignSystem_646027;
function ProjectDialog({ index, onClose, onStep, onRequest }) {
  const D = window.JW_DATA;
  const p = index === null ? null : D.projects[index];
  if (!p) return null;
  return (
    <Dialog open onClose={onClose} width={900} index={<span style={{ display: "inline-flex", gap: 14, alignItems: "center" }}><IconButton name="chevron-left" label="Previous" size="sm" variant="ghost" onClick={() => onStep(-1)} />{String(index + 1).padStart(2, "0")} / {String(D.projects.length).padStart(2, "0")}<IconButton name="chevron-right" label="Next" size="sm" variant="ghost" onClick={() => onStep(1)} /></span>} footer={<><Button variant="ghost" onClick={onClose}>Close</Button><Button arrow onClick={onRequest}>Request screener</Button></>}>
      <div style={{ position: "relative", overflow: "hidden", aspectRatio: "21 / 9", background: "var(--ink-800)" }}>
        <img src={p.image} alt={p.alt} style={{ width: "100%", height: "100%", objectFit: "cover", filter: "var(--img-filter)" }} />
        <div className="jw-grain" aria-hidden />
        {p.badge && <div style={{ position: "absolute", right: 16, top: 16 }}><Badge tone="paper">{p.badge}</Badge></div>}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)", gap: 32, alignItems: "start" }}>
        <div>
          <h2 style={{ font: "var(--type-display-md)", color: "var(--text-display)", margin: 0 }}>{p.title}{p.aka && <em style={{ color: "var(--text-body)" }}> — {p.aka}</em>}</h2>
          <p style={{ font: "var(--type-body-lg)", marginTop: 16, maxWidth: "var(--measure-narrow)" }}>{p.logline}</p>
        </div>
        <dl style={{ margin: 0, display: "grid", gap: 12, borderLeft: "1px solid var(--line)", paddingLeft: 24 }}>
          {[["Status", p.badge || (p.kind === "short" ? "Short film" : "Feature")], p.director && ["Director", p.director], p.year && ["Year", p.year], ["Recognition", p.meta.join(" • ")]].filter(Boolean).map(([k, v]) => <div key={k} style={{ display: "grid", gridTemplateColumns: "110px 1fr", gap: 12, alignItems: "baseline" }}><dt style={{ font: "var(--type-body-sm)", color: "var(--text-muted)" }}>{k}</dt><dd style={{ margin: 0 }}><Readout tone="display">{v}</Readout></dd></div>)}
        </dl>
      </div>
    </Dialog>
  );
}
window.ProjectDialog = ProjectDialog;