// 39 Uchi — shared bits: drag-and-drop photo slot (original colour kept) + viewport hook
// Drop an image onto any slot; it fills the frame. Each slot needs a unique slotId.
function Photo({ label = "", h = "100%", ratio, slotId, fit = "cover", style }) {
  const id = "uchi-" + (slotId || (label || "x").toString().replace(/\s+/g, "-").toLowerCase());
  return (
    <div style={{
      position: "relative", overflow: "hidden",
      height: ratio ? "auto" : h, aspectRatio: ratio || "auto",
      background: "var(--noir-850)",
      border: "1px solid var(--border)", borderRadius: "var(--r-md)",
      ...style,
    }}>
      <image-slot
        id={id}
        shape="rounded"
        radius="4"
        fit={fit}
        placeholder={label ? "Kéo ảnh vào · " + label : "Kéo ảnh vào đây"}
        style={{ display: "block", width: "100%", height: "100%" }}
      ></image-slot>
    </div>
  );
}

// Re-renders the caller when the window width crosses, so inline-style layouts
// (which CSS media queries can't reach) can switch by breakpoint.
function useViewport() {
  const get = () => (typeof window !== "undefined" ? window.innerWidth : 1280);
  const [w, setW] = React.useState(get());
  React.useEffect(() => {
    let raf = 0;
    const on = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setW(get())); };
    window.addEventListener("resize", on);
    return () => { window.removeEventListener("resize", on); cancelAnimationFrame(raf); };
  }, []);
  return w;
}

Object.assign(window, { Photo, useViewport });