// site.jsx — responsive mount + scale controller for the multi-page site.
// Each page sets window.SITE_PAGE = { d: "WorkDesktop", m: "WorkMobile", props: {...} }.
// This file is loaded LAST (after all page-component scripts) so every window.* component exists.
// It picks the desktop (1440) or mobile (390) layout by viewport width and scales it to fit,
// letterboxing on the dark page background. Real, navigable, no horizontal scroll.
(function () {
  var BP = 768;            // < BP → mobile layout, else desktop
  var DESK = 1440, MOB = 390;
  var stage, scaler, lastMobile = null;

  function isMobile() { return window.innerWidth < BP; }

  function element() {
    var P = window.SITE_PAGE || {};
    var name = isMobile() ? P.m : P.d;
    var C = window[name];
    if (!C) return React.createElement("div", { style: { color: "#fff", fontFamily: "monospace", padding: 40 } }, "Missing component: " + name);
    return React.createElement(C, P.props || null);
  }

  function render() {
    ReactDOM.render(element(), scaler);
    lastMobile = isMobile();
  }

  function applyScale() {
    var mobile = isMobile();
    var base = mobile ? MOB : DESK;
    var w = window.innerWidth;
    var s = mobile ? Math.min(w / MOB, 1.6) : Math.min(w / DESK, 1);
    if (scaler.style.width !== base + "px") scaler.style.width = base + "px";
    var left = Math.max(0, (w - base * s) / 2);
    scaler.style.transform = "translateX(" + left + "px) scale(" + s + ")";
    stage.style.height = (scaler.scrollHeight * s) + "px";
  }

  function boot() {
    stage = document.getElementById("stage");
    scaler = document.getElementById("scaler");
    render();
    applyScale();
    // Recompute height as images (galleries, reels, gifs) finish loading.
    if (window.ResizeObserver) new ResizeObserver(applyScale).observe(scaler);
    window.addEventListener("load", applyScale);
    window.addEventListener("resize", function () {
      if (isMobile() !== lastMobile) render();
      applyScale();
    });
  }

  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
  else boot();
})();