const { MicroText, Frame, Timecode } = window.DASKINODesignSystem_5a312e;

/**
 * Photo with a candidate chain: `src` may be one path or an ordered list. It
 * walks the list on load failure and lands on the local placeholder. So a
 * project can name its local file FIRST and the remote original second — the
 * day the real file is dropped in assets/photos/ it silently takes over.
 */
function Shot({ src, idx = 0, ratio = "16:9", width = "100%", overlay = 0.34, children, ...rest }) {
  const key = Array.isArray(src) ? src.join("|") : String(src);
  const list = React.useMemo(() => {
    const a = (Array.isArray(src) ? src : [src]).filter(Boolean);
    a.push(window.LOCAL[idx % window.LOCAL.length]);
    return a;
  }, [key, idx]);
  const [n, setN] = React.useState(0);
  React.useEffect(() => { setN(0); }, [key]);
  React.useEffect(() => {
    if (n >= list.length - 1) return;
    const i = new Image();
    i.onerror = () => setN(v => Math.min(v + 1, list.length - 1));
    i.src = list[n];
  }, [list, n]);
  return <Frame ratio={ratio} width={width} image={list[n]} overlay={overlay} inset="5%" {...rest}>{children}</Frame>;
}

/** Section header: micro label left, count right, hairline under. */
function Head({ label, count, right }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24, paddingBottom: 14, borderBottom: "1px solid var(--rule)", marginBottom: 28 }}>
      <MicroText size="md" tone="dim">{label}</MicroText>
      {right || (count != null && <MicroText size="sm" tone="ghost">{String(count).padStart(2, "0")}</MicroText>)}
    </div>
  );
}

const PAD = "0 clamp(20px,4vw,56px)";

Object.assign(window, { Shot, Head, PAD });