// Library3D — the scroll-locked State Library hero illustration.
// Two real PNG renders provided by the client are used:
//   long.png   — wide, head-on facade (1990×681).  Hero default.
//   short.png  — taller, foreshortened version (1504×1074).  Becomes the
//                "shrunk" target as the user scrolls down.
// As scroll progress grows the long view crossfades into the short view
// AND the whole building scales down toward the bottom of the viewport,
// so the building visibly "shrinks" away.

function Library3D({ rotation = 0, size = 680 }) {
  // We treat `rotation` (0..360) as an overall scroll-progress proxy:
  //   0   — fully head-on, full size (long)
  //   180 — mid-transition (both visible)
  //   360 — fully shrunk to the short variant
  const t = Math.max(0, Math.min(1, rotation / 360));

  // Crossfade weights — short fades in over the second half.
  const longOpacity  = 1 - Math.max(0, (t - 0.15) / 0.55);   // 1 → 0 across 0.15..0.70
  const shortOpacity = Math.max(0, (t - 0.30) / 0.55);       // 0 → 1 across 0.30..0.85

  // Overall scale: starts at 1 and shrinks to ~0.32 by full scroll.
  const scale = 1 - t * 0.68;

  // Subtle vertical drift downward so it reads as "settling" into the page.
  const drift = t * 60;

  return (
    <div
      className="lib-stage"
      style={{
        position: 'relative',
        width: '100%', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transform: `translateY(${drift}px) scale(${scale})`,
        transformOrigin: '50% 60%',
        transition: 'transform 80ms linear',
      }}
    >
      {/* Long, wide head-on facade */}
      <img
        src="assets/library-long.png"
        alt="State Library of Victoria — full facade"
        className="lib-img lib-long"
        style={{
          opacity: longOpacity,
        }}
      />
      {/* Short / taller foreshortened version */}
      <img
        src="assets/library-short.png"
        alt="State Library of Victoria — compressed view"
        className="lib-img lib-short"
        style={{
          opacity: shortOpacity,
        }}
      />
    </div>
  );
}

window.Library3D = Library3D;