// ────────────────────────────────────────────────────────────────────────
//  door.jsx — Temple-door portal (portrait, mobile-first).
//  z1  door-full   : brightened closed temple door (complete scene)
//  z2  reveal      : the Mandir wedding scene, masked to the arched doorway,
//                    sitting at the SAME transform as door-full so the
//                    opening lines up exactly. Fades in as the doors crack
//                    open — so behind the doors you see a NEW bright scene,
//                    never the frozen closed-door image.
//  z3  leaves      : two arched door panels (JPEG + CSS arch-mask) that swing
//                    open on their outer hinges.
//
//  Image refs go through window.asset() so the same source works when served
//  as separate files (preview) AND when inlined as data URIs (offline file).
// ────────────────────────────────────────────────────────────────────────

const DOOR_RATIO = 941 / 1672; // ≈ 0.5628
const A = (p) => window.asset ? window.asset(p) : p;

// leaf placement as % of the fixed-aspect box (matches the crop geometry)
const LEAF = {
  left: { left: 26.04, top: 22.01, w: 23.91, h: 64.0 },
  right: { left: 49.95, top: 22.01, w: 24.02, h: 64.0 }
};

function DoorScene({ angle, push, reveal, zoom, opacity }) {
  const leafFilter = (a) => `brightness(${1 - 0.18 * Math.min(1, a / 90)})`;
  return (
    <div style={{
      position: 'absolute', left: '50%', top: '50%',
      transform: `translate(-50%,-50%) scale(${zoom})`,
      width: `max(100vw, calc(100vh * ${DOOR_RATIO}))`, aspectRatio: '941 / 1672',
      perspective: '1900px', opacity, transition: 'opacity .15s linear', zIndex: 10
    }}>
      <div style={{ position: 'absolute', inset: 0, transformStyle: 'preserve-3d' }}>

        {/* z1 — full closed temple door (brightened) */}
        <img src={A('assets/door-full.jpg')} alt="" draggable="false" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'fill', zIndex: 1
        }} />

        {/* z2 — revealed Mandir scene, masked to the arched doorway */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2, opacity: reveal,
          transition: 'opacity .12s linear', pointerEvents: 'none',
          WebkitMaskImage: `url(${A('assets/reveal-mask.png')})`, maskImage: `url(${A('assets/reveal-mask.png')})`,
          WebkitMaskSize: '100% 100%', maskSize: '100% 100%',
          WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat'
        }}>
          <img src={A('assets/reveal.jpg')} alt="" draggable="false" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'fill'
          }} />
          {/* soft inner-jamb shadow so the doorway reads with depth */}
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'linear-gradient(90deg, rgba(60,30,8,0.30) 0%, rgba(60,30,8,0) 14%, rgba(60,30,8,0) 86%, rgba(60,30,8,0.30) 100%)' }} />
        </div>

        {/* z3 — left leaf (JPEG masked to the arch) */}
        <div style={{
          position: 'absolute', zIndex: 3, left: `${LEAF.left.left}%`, top: `${LEAF.left.top}%`,
          width: `${LEAF.left.w}%`, height: `${LEAF.left.h}%`,
          transformOrigin: 'left center', backfaceVisibility: 'hidden', transformStyle: 'preserve-3d',
          transform: `translateX(${-push}%) rotateY(${-angle}deg)`, filter: leafFilter(angle),
          WebkitMaskImage: `url(${A('assets/mask-left.png')})`, maskImage: `url(${A('assets/mask-left.png')})`,
          WebkitMaskSize: '100% 100%', maskSize: '100% 100%',
          WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat'
        }}>
          <img src={A('assets/door-left.jpg')} alt="" draggable="false"
          style={{ width: '100%', height: '100%', objectFit: 'fill', display: 'block' }} />
        </div>

        {/* z3 — right leaf */}
        <div style={{
          position: 'absolute', zIndex: 3, left: `${LEAF.right.left}%`, top: `${LEAF.right.top}%`,
          width: `${LEAF.right.w}%`, height: `${LEAF.right.h}%`,
          transformOrigin: 'right center', backfaceVisibility: 'hidden', transformStyle: 'preserve-3d',
          transform: `translateX(${push}%) rotateY(${angle}deg)`, filter: leafFilter(angle),
          WebkitMaskImage: `url(${A('assets/mask-right.png')})`, maskImage: `url(${A('assets/mask-right.png')})`,
          WebkitMaskSize: '100% 100%', maskSize: '100% 100%',
          WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat'
        }}>
          <img src={A('assets/door-right.jpg')} alt="" draggable="false"
          style={{ width: '100%', height: '100%', objectFit: 'fill', display: 'block' }} />
        </div>
      </div>
    </div>);

}

Object.assign(window, { DoorScene });