const { MicroText, Timecode } = window.DASKINODesignSystem_5a312e;

function SiteStills() {
  const [open, setOpen] = React.useState(null);
  return (
    <div style={{ padding: "clamp(40px,5vw,72px) clamp(20px,4vw,56px) clamp(56px,7vw,100px)" }} data-screen-label="Stills">
      <window.Head label="STILLS" count={window.STILLS.length} right={<MicroText size="xs" tone="ghost">FOTOGRAFIA DE SET E DE CAMPO</MicroText>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(min(100%,240px),1fr))", gap: 14 }}>
        {window.STILLS.map((s, i) => (
          <button key={i} onClick={() => setOpen(i)} style={{ background: "none", border: "none", padding: 0, cursor: "zoom-in", display: "block", lineHeight: 0 }}>
            <window.Shot src={s} idx={i} ratio={i % 3 === 0 ? "4:5" : "1:1"} overlay={0.12}>
              <div style={{ position: "absolute", left: 0, bottom: 0 }}><MicroText size="xs" tone="dim">{"ST " + String(i + 1).padStart(2, "0")}</MicroText></div>
            </window.Shot>
          </button>
        ))}
      </div>
      {open != null && (
        <div onClick={() => setOpen(null)} style={{ position: "fixed", inset: 0, zIndex: 60, background: "rgba(0,0,0,.94)", display: "flex", alignItems: "center", justifyContent: "center", padding: "clamp(20px,5vw,64px)", cursor: "zoom-out" }}>
          <div style={{ position: "relative", maxWidth: 1100, width: "100%" }} onClick={e => e.stopPropagation()}>
            <window.Shot src={window.STILLS[open]} idx={open} ratio="3:2" overlay={0}>
              <div style={{ position: "absolute", left: 0, top: 0 }}><Timecode value={"00:00:0" + (open % 9) + ":12"} size={10} /></div>
              <div style={{ position: "absolute", right: 0, bottom: 0 }}><MicroText size="xs" tone="dim">{"ST " + String(open + 1).padStart(2, "0")} — DAS KINO</MicroText></div>
            </window.Shot>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SiteStills });