{ if(e.target===e.currentTarget) setPinSel(null); }}
style={{ position:'absolute', inset:0, overflow:'hidden', touchAction:'none',
background:'transparent', // the full-bleed backdrop layer behind shows through
cursor: zoom>1 ? (g.current.mode==='mouse'?'grabbing':'grab') : 'default' }}>
setImgAR(e.target.naturalWidth/Math.max(1,e.target.naturalHeight))}
onClick={(e)=>{ if(e.target===e.currentTarget) setPinSel(null); }}
style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'contain', display:'block',
userSelect:'none', pointerEvents:'none',
// all plans pushed right-of-centre to clear the library panel & balance the screen
padding:'40px 80px 40px 600px', objectPosition:'right center',
filter: markers.length ? 'none' : 'drop-shadow(0 20px 50px rgba(60,44,18,0.16))' }}/>
{/* ── ANIMATED CIRCULATION ARROWS — colour-extracted overlay that pulses/glows ── */}
{CIRC[sel] && (
)}
{/* ── INTERACTIVE PINS ── anchored to the image's ACTUAL contain-fit rect
(so pins land exactly on plan features regardless of plan aspect ratio) */}
{(()=>{ const { rx,ry,rw,rh } = fitRect();
return (
)}
{/* ════════ BLOCK MASSING — live 3D viewer ════════ */}
{/* Iframe stays at canvas bounds so the camera framing (tuned for 16:10) is
preserved on every device. The transparent scene lets the full-bleed
backdrop behind it fill the letterbox — no top/bottom bars. */}
{isMassing && (
{/* ── INTERACTIVE MARKERS — glow on each highlighted zone + numbered pointer ── */}
{markers.map((m, i)=>{
const c = MK_COLOR[m.color] || MK_COLOR.red;
const on = activeMk===i;
const cx = m.box.x + m.box.w/2, cy = m.box.y + m.box.h/2 + mkDY;
const k = 1/zoom; // counter-scale so the pointer keeps screen size
return (
{/* glowing highlight box */}
{/* numbered pointer */}
);
})}
{pins.map((p, i)=>{
const col = MPX_KIND[p.kind] || 'var(--gold)';
const on = pinSel===i;
const k = 1/zoom; // counter-scale so pins keep screen size
return (
); })()}
{ e.stopPropagation(); easeToMarker(m, i); }}
style={{ position:'absolute', left:cx+'%', top:cy+'%',
transform:`translate(-50%,-50%) scale(${k})`, transformOrigin:'center',
pointerEvents:'auto', cursor:'pointer', zIndex:on?9:7,
opacity:appear?1:0,
animation:appear?`mpxPinIn 460ms cubic-bezier(0.22,1,0.36,1) ${i*60}ms both`:'none' }}>
{m.num}
{ e.stopPropagation(); easeToPin(p, i); }}
style={{ position:'absolute', left:p.x+'%', top:p.y+'%',
transform:`translate(-50%,-50%) scale(${k})`, transformOrigin:'center',
pointerEvents:'auto', cursor:'pointer', zIndex:on?6:5,
opacity:appear?1:0,
animation:appear?`mpxPinIn 460ms cubic-bezier(0.22,1,0.36,1) ${i*40}ms both`:'none' }}>
{/* pulse ring */}
{/* gold disc */}
{p.kind==='tower'
? {p.tower}
: }
{/* ── POPOVER ── anchored above the pin */}
{on && (
);
})}
e.stopPropagation()} style={{ position:'absolute', left:'50%', bottom:'calc(100% + 16px)',
transform:'translateX(-50%)', width:380, zIndex:9, cursor:'default',
...MPX_GLASS, borderRadius:20, padding:'20px 22px 18px',
animation:'mpxPop 240ms cubic-bezier(0.22,1,0.36,1) both' }}>
)}
{p.kind==='tower'
? {p.tower}
: }
{(p.detail||[]).map((d,j)=>(
{p.label}
{(p.sub||'').toUpperCase()}
{d}
))}
{/* caret */}