(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;
  var useRef    = React.useRef;

  function isIOS() {
    return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
  }
  function isMobile() {
    return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
  }

  var OrbitStage = React.memo(function OrbitStage(props) {
    return React.createElement('div', {
      className: 'cb-walk-orbit-stage',
      ref: props.stageRef,
    });
  }, function() { return true; });

  /**
   * Walk In — Mode 1 professional 3D walkthrough (DEFAULT on every device).
   * No fake camera AR / gyro wallpaper. True World AR is optional (WebXR) only.
   *
   * Modes:
   *   • screen → first-person walkthrough (drag / WASD / joystick) — DEFAULT
   *   • ar     → optional WebXR immersive-ar (ARCore/ARKit devices only)
   *   • vr     → magic-window / Cardboard stereo
   *   • 360    → DEPRECATED pseudo showroom (hidden from primary CTA)
   */
  function ARWalkthroughViewer(props) {
    var shellSrc   = props.shellSrc;
    var parts      = props.parts || [];
    var dimensions = props.dimensions || null;
    var iosSrc     = props.iosSrc || null;
    var alt        = props.alt || 'Building walkthrough';
    var projectId  = props.projectId || null;
    var tourPlan   = props.tourPlan && Array.isArray(props.tourPlan.stops) ? props.tourPlan : null;
    var tourStops  = tourPlan ? tourPlan.stops.filter(function(stop) {
      return stop && stop.title && stop.narration;
    }) : [];
    var tourKey    = tourStops.length ? JSON.stringify(tourStops) : '';
    var dimKey     = dimensions
      ? [dimensions.width || 0, dimensions.depth || 0, dimensions.height || 0].join('x')
      : '';

    function isCapacitorNative() {
      try {
        return !!(window.CITYBUILDR_IS_NATIVE
          || (window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform()));
      } catch (e) {
        return false;
      }
    }

    var hostRef    = useRef(null);
    var orbitRef   = useRef(null);
    var apiRef     = useRef(null);
    var orbitApiRef = useRef(null);
    var joyRef     = useRef(null);
    var overlayRef = useRef(null);
    var sessionRef = useRef(null);
    var pausedRef  = useRef(false);
    var streamPromiseRef = useRef(null);
    var xrPromiseRef = useRef(null);
    var autoWalkTried = useRef(false);

    var _open   = useState(false);      var open = _open[0], setOpen = _open[1];
    var _mode   = useState('screen');   var mode = _mode[0], setMode = _mode[1];
    var _status = useState('');         var status = _status[0], setStatus = _status[1];
    var _xrOk   = useState(false);      var xrOk = _xrOk[0], setXrOk = _xrOk[1];
    var _err    = useState(null);       var err = _err[0], setErr = _err[1];
    var _phase  = useState('');         var phase = _phase[0], setPhase = _phase[1];
    var _pct    = useState(0);          var loadPct = _pct[0], setLoadPct = _pct[1];
    var _toast  = useState(false);      var placedToast = _toast[0], setPlacedToast = _toast[1];
    var _stereo = useState(false);      var stereo = _stereo[0], setStereo = _stereo[1];
    var _engine = useState('');         var engine = _engine[0], setEngine = _engine[1];
    var _tourIndex = useState(0);       var tourIndex = _tourIndex[0], setTourIndex = _tourIndex[1];
    var _tourStarted = useState(false); var tourStarted = _tourStarted[0], setTourStarted = _tourStarted[1];

    useEffect(function() {
      setTourIndex(0);
      setTourStarted(false);
    }, [tourKey]);

    useEffect(function() {
      if (navigator.xr && navigator.xr.isSessionSupported) {
        navigator.xr.isSessionSupported('immersive-ar')
          .then(function(ok) { setXrOk(!!ok); })
          .catch(function() { setXrOk(false); });
      }
    }, []);

    useEffect(function() {
      if (!open) return;
      function onVis() { pausedRef.current = document.hidden; }
      function onKey(e) {
        if (e.key === 'Escape') close();
      }
      document.addEventListener('visibilitychange', onVis);
      window.addEventListener('keydown', onKey);
      document.documentElement.classList.add('cb-360-open');
      document.body.classList.add('cb-360-open');
      var prevOverflow = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return function() {
        document.removeEventListener('visibilitychange', onVis);
        window.removeEventListener('keydown', onKey);
        document.documentElement.classList.remove('cb-360-open');
        document.body.classList.remove('cb-360-open');
        document.body.style.overflow = prevOverflow;
      };
    }, [open]);

    function disposeOrbit() {
      if (orbitApiRef.current) {
        try { orbitApiRef.current.dispose(); } catch (e) {}
        orbitApiRef.current = null;
      }
      if (orbitRef.current) orbitRef.current.innerHTML = '';
    }
    function disposeWalk() {
      if (apiRef.current) {
        try { apiRef.current.dispose(); } catch (e) {}
        apiRef.current = null;
      }
      if (hostRef.current) hostRef.current.innerHTML = '';
    }

    // Camera showroom mount (mode "360" = Walk In product path)
    useEffect(function() {
      if (!open || mode !== '360' || !shellSrc) return;
      var cancelled = false;
      var tries = 0;
      disposeWalk();
      setErr(null);
      setPhase('loading');
      setLoadPct(0);
      setStatus('Opening live camera…');
      setEngine('');

      function boot() {
        if (cancelled) return;
        if (!orbitRef.current) {
          tries += 1;
          if (tries < 60) window.requestAnimationFrame(boot);
          else {
            setErr('Could not load — refresh to retry.');
            setStatus('');
          }
          return;
        }
        if (!window.mountImmersive360 && !window.mountCameraShowroom) {
          setErr('Could not load — refresh to retry.');
          setStatus('');
          return;
        }
        var mountFn = window.mountImmersive360 || function(el, src, opts) {
          return window.mountCameraShowroom(el, src, opts).then(function(api) {
            return {
              engine: function() { return api.engine(); },
              dispose: function() { api.dispose(); },
              reset: function() { if (api.reset) api.reset(); },
            };
          });
        };
        mountFn(orbitRef.current, shellSrc, {
          iosSrc: iosSrc,
          alt: alt,
          dimensions: dimensions,
          // Never prefer WebXR as the only path — camera showroom is default
          preferWebXR: false,
          allowOrbitFallback: !isCapacitorNative(),
          streamPromise: streamPromiseRef.current,
          xrSessionPromise: null,
          shouldPause: function() { return cancelled || pausedRef.current; },
          onProgress: function(p) {
            if (cancelled) return;
            setLoadPct(p);
          },
          onStatus: function(msg) {
            if (!cancelled && msg) setStatus(msg);
          },
          onPhase: function(p) {
            if (cancelled || !p) return;
            setPhase(p);
            if (p === 'placed') {
              setPlacedToast(true);
              setTimeout(function() { if (!cancelled) setPlacedToast(false); }, 4000);
            }
          },
          onEngine: function(name) { if (!cancelled) setEngine(name); },
          onReady: function() {
            if (cancelled) return;
            setLoadPct(100);
            setPhase(function(prev) { return prev === 'placed' ? 'placed' : 'ready'; });
            try { console.info('[CityBuildRR] Walk In ready — camera showroom'); } catch (e0) {}
          },
          onError: function(msg) {
            if (cancelled) return;
            setErr(msg);
            setStatus('');
            setPhase('error');
          },
        }).then(function(api) {
          streamPromiseRef.current = null;
          xrPromiseRef.current = null;
          if (cancelled) {
            if (api && api.dispose) api.dispose();
            return;
          }
          orbitApiRef.current = api;
          if (api && api.engine) setEngine(api.engine());
        }).catch(function() {
          streamPromiseRef.current = null;
          xrPromiseRef.current = null;
        });
      }

      boot();
      return function() {
        cancelled = true;
        disposeOrbit();
      };
    }, [open, mode, shellSrc, iosSrc, alt, dimKey]);

    /** Prod bundle + file:// cannot resolve ../../services/*.js — use window / www-root URL. */
    function loadWalkthroughModule() {
      if (typeof window.mountWalkthroughScene === 'function') {
        return Promise.resolve({ mountWalkthroughScene: window.mountWalkthroughScene });
      }
      var href = 'src/user/services/arWalkthroughScene.js';
      try {
        href = new URL(href, window.location.href).href;
      } catch (e0) {}
      return import(href).then(function(mod) {
        if (mod && typeof mod.mountWalkthroughScene === 'function') {
          window.mountWalkthroughScene = mod.mountWalkthroughScene;
        }
        return mod;
      });
    }

    // First-person / AR / VR walkthrough mount
    useEffect(function() {
      if (!open) return;
      if (mode === '360') return;

      var cancelled = false;
      var tries = 0;

      function boot() {
        if (cancelled) return;
        if (!hostRef.current) {
          tries += 1;
          if (tries < 90) {
            window.requestAnimationFrame(boot);
            return;
          }
          setErr('Viewer failed to open — try again');
          return;
        }

        disposeOrbit();
        setErr(null);
        setStatus('Loading…');
        setPhase('');
        setLoadPct(0);
        setPlacedToast(false);
        setStereo(false);
        setEngine('');

        loadWalkthroughModule().then(function(mod) {
          if (cancelled || !hostRef.current) return;
          var mount = (mod && mod.mountWalkthroughScene) || window.mountWalkthroughScene;
          if (typeof mount !== 'function') {
            throw new Error('Walkthrough engine not loaded');
          }
          return mount(hostRef.current, {
            shellSrc: shellSrc,
            parts: parts,
            dimensions: dimensions,
            mode: mode,
            xrSession: mode === 'ar' ? sessionRef.current : null,
            tourPlan: tourPlan,
            onStatus: function(s) { if (!cancelled) setStatus(s); },
            onSessionEnd: function() { if (!cancelled) close(); },
            onPhase: function(p) {
              if (cancelled) return;
              setPhase(p);
              if (p === 'placed') {
                setPlacedToast(true);
                setTimeout(function() { if (!cancelled) setPlacedToast(false); }, 4500);
              }
            },
            onLoadProgress: function(pct) {
              if (cancelled) return;
              setLoadPct(pct);
              if ((mode === 'screen' || mode === 'vr') && pct < 100) {
                setStatus('Loading building… ' + pct + '%');
              }
            },
          }).then(function(api) {
            if (cancelled) { api.dispose(); return; }
            apiRef.current = api;
            if (tourPlan && tourPlan.startInstruction) setStatus(tourPlan.startInstruction);
          });
        }).catch(function(e) {
          if (cancelled) return;
          if (mode === 'ar') {
            setErr('Opening 3D walkthrough instead.');
            sessionRef.current = null;
            setMode('screen');
          } else {
            setErr((e && e.message) || 'Could not build walkthrough');
          }
        });
      }

      boot();
      return function() {
        cancelled = true;
        disposeWalk();
      };
    }, [open, mode, shellSrc, tourKey]);

    function requestCameraForShowroom() {
      // Keep getUserMedia inside the tap's user-activation window
      xrPromiseRef.current = null;
      streamPromiseRef.current = null;
      try {
        if (window.requestShowroomCamera) {
          streamPromiseRef.current = window.requestShowroomCamera();
        } else if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          streamPromiseRef.current = navigator.mediaDevices.getUserMedia({
            video: { facingMode: { ideal: 'environment' } },
            audio: false,
          });
        }
      } catch (e2) {
        streamPromiseRef.current = null;
      }
      if (streamPromiseRef.current) {
        streamPromiseRef.current.catch(function() { /* retry UI handles deny */ });
      }
    }

    /** Primary product path — Unity viewer in RN; else Mode 1 Three.js walkthrough */
    function launchWalkIn() {
      if (!shellSrc) {
        window.showUserToast && window.showUserToast('Generate 3D first, then tap Walk In', 'rose');
        return;
      }
      // React Native + Unity ready: open native viewer. Otherwise Mode 1 Three.js in WebView.
      if (
        window.CITYBUILDR_IS_RN &&
        window.CITYBUILDR_UNITY_READY &&
        typeof window.CITYBUILDR_OPEN_UNITY_VIEWER === 'function' &&
        projectId
      ) {
        try { console.info('[CityBuildRR] Walk In → Unity viewer (RN)'); } catch (e0) {}
        window.CITYBUILDR_OPEN_UNITY_VIEWER(projectId, 'auto');
        return;
      }
      try { console.info('[CityBuildRR] Walk In launch — 3D walkthrough (Mode 1, no fake AR)'); } catch (e) {}
      sessionRef.current = null;
      streamPromiseRef.current = null;
      xrPromiseRef.current = null;
      setMode('screen');
      setOpen(true);
    }

    // Auto-start Walk In from deep link citybuildr://ar/<id> or hash
    useEffect(function() {
      if (!shellSrc || !projectId || autoWalkTried.current) return;
      var want = window.__CB_AUTO_WALKIN;
      var hashWant = (window.location.hash || '').indexOf('walkin') !== -1;
      if (want && String(want) === String(projectId)) {
        autoWalkTried.current = true;
        window.__CB_AUTO_WALKIN = null;
        window.setTimeout(function() { launchWalkIn(); }, 350);
      } else if (hashWant) {
        autoWalkTried.current = true;
        window.setTimeout(function() { launchWalkIn(); }, 350);
      }
    }, [shellSrc, projectId]);

    function launchWalk() {
      if (!shellSrc) {
        window.showUserToast && window.showUserToast('Generate 3D first, then tap Walk In', 'rose');
        return;
      }
      if (isIOS() && iosSrc) {
        var a = document.createElement('a');
        a.setAttribute('rel', 'ar');
        a.setAttribute('href', iosSrc);
        a.appendChild(document.createElement('img'));
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        return;
      }

      if (xrOk && navigator.xr) {
        try {
          var init = {
            requiredFeatures: ['hit-test'],
            optionalFeatures: ['local-floor', 'bounded-floor', 'anchors'],
          };
          if (overlayRef.current) {
            init.optionalFeatures.push('dom-overlay');
            init.domOverlay = { root: overlayRef.current };
          }
          var p = navigator.xr.requestSession('immersive-ar', init);
          p.catch(function() {});
          sessionRef.current = p;
          setMode('ar');
          setOpen(true);
          return;
        } catch (e) {
          sessionRef.current = null;
        }
      }

      sessionRef.current = null;
      setMode('screen');
      setOpen(true);
    }

    function launchVR() {
      try {
        if (typeof DeviceOrientationEvent !== 'undefined' &&
            typeof DeviceOrientationEvent.requestPermission === 'function') {
          DeviceOrientationEvent.requestPermission().catch(function() {});
        }
      } catch (e) {}
      try {
        if (overlayRef.current && overlayRef.current.requestFullscreen) {
          overlayRef.current.requestFullscreen().catch(function() {});
        }
      } catch (e2) {}
      sessionRef.current = null;
      setMode('vr');
      setOpen(true);
    }

    function switchMode(next) {
      if (next === mode) return;
      if (next === 'ar') {
        launchWalk();
        return;
      }
      if (next === 'vr') {
        launchVR();
        return;
      }
      sessionRef.current = null;
      setErr(null);
      if (next === '360') requestCameraForShowroom();
      setMode(next);
      if (!open) setOpen(true);
    }

    function toggleStereo() {
      if (!apiRef.current) return;
      var next = !apiRef.current.isStereo();
      apiRef.current.setStereo(next);
      setStereo(next);
    }

    function selectTourStop(index) {
      if (!tourStops.length) return;
      var next = Math.max(0, Math.min(tourStops.length - 1, Number(index) || 0));
      var stop = tourStops[next];
      setTourIndex(next);
      setTourStarted(true);
      setStatus(stop.title + ' — ' + stop.narration);
      if (apiRef.current && apiRef.current.showTourStop) apiRef.current.showTourStop(next);
    }

    function close() {
      setOpen(false);
      disposeOrbit();
      disposeWalk();
      sessionRef.current = null;
      if (document.pointerLockElement) { try { document.exitPointerLock(); } catch (e) {} }
      if (document.fullscreenElement) { try { document.exitFullscreen().catch(function() {}); } catch (e2) {} }
    }

    function bindJoystick(el) {
      joyRef.current = el;
      if (!el) return;
      var active = false, cx = 0, cy = 0;
      function set(dx, dy) {
        var max = 42;
        var x = Math.max(-1, Math.min(1, dx / max));
        var y = Math.max(-1, Math.min(1, dy / max));
        if (apiRef.current) apiRef.current.setJoystick(x, y);
        var knob = el.firstChild;
        if (knob) knob.style.transform = 'translate(' + (x * max) + 'px,' + (y * max) + 'px)';
      }
      el.ontouchstart = function(e) {
        active = true;
        var r = el.getBoundingClientRect();
        cx = r.left + r.width / 2; cy = r.top + r.height / 2;
        e.preventDefault();
      };
      el.ontouchmove = function(e) {
        if (!active || !e.touches[0]) return;
        set(e.touches[0].clientX - cx, e.touches[0].clientY - cy);
        e.preventDefault();
      };
      el.ontouchend = function() { active = false; set(0, 0); };
    }

    function hovOn() { document.body.classList.add('hov'); }
    function hovOff() { document.body.classList.remove('hov'); }

    // True AR capability: WebXR immersive-ar (xrOk) OR the parent's detection
    // (iOS Quick Look / ARCore-ARKit). AR-capable devices get the AR experience
    // as the primary action; every other device gets the Walk In walkthrough.
    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
    var arCapable = xrOk || props.arCapable === true || (isIOS && !!iosSrc);

    // Launch the right AR path for the device: WebXR immersive-ar, else iOS
    // Quick Look via a rel="ar" anchor, else fall back to the walkthrough.
    function launchAR() {
      if (xrOk && navigator.xr) { launchWalk(); return; }
      if (isIOS && iosSrc) {
        var a = document.createElement('a');
        a.setAttribute('rel', 'ar');
        a.setAttribute('href', iosSrc);
        a.appendChild(document.createElement('img'));
        document.body.appendChild(a);
        try { a.click(); } catch (e) {}
        window.setTimeout(function(){ try { document.body.removeChild(a); } catch (e2) {} }, 1500);
        return;
      }
      launchWalkIn();
    }

    var inApp = isCapacitorNative();
    var primaryLabel = arCapable ? 'View in AR' : 'Walk In';
    var primaryHint = arCapable
      ? 'Place it in your space at real size.'
      : ((window.CITYBUILDR_IS_RN && window.CITYBUILDR_UNITY_READY)
          ? 'Opens the native walkthrough.'
          : 'Drag to look, joystick to move.');
    var activeTourStop = tourStops.length ? tourStops[Math.min(tourIndex, tourStops.length - 1)] : null;

    return React.createElement(React.Fragment, null,
      React.createElement('button', {
        type: 'button',
        className: 'studio-btn studio-btn--primary cb-walk-cta',
        style: { width: '100%', marginTop: 12, minHeight: 48 },
        onClick: arCapable ? launchAR : launchWalkIn,
        disabled: !shellSrc,
        onMouseEnter: hovOn,
        onMouseLeave: hovOff,
        'data-tour': 'walk-in',
      }, primaryLabel),
      React.createElement('p', {
        className: 'cb-showroom-hint',
      }, primaryHint),

      React.createElement('details', { className: 'cb-walk-more', style: { marginTop: 10 } },
        React.createElement('summary', {
          style: { cursor: 'pointer', fontSize: 12, opacity: 0.7, listStyle: 'none' },
        }, 'More modes'),
        React.createElement('div', { className: 'cb-walk-secondary', style: { marginTop: 8 } },
          React.createElement('button', {
            type: 'button',
            className: 'studio-btn studio-btn--ghost cb-walk-cta',
            style: { flex: 1, minHeight: 40 },
            onClick: launchWalk,
            disabled: !shellSrc,
            onMouseEnter: hovOn,
            onMouseLeave: hovOff,
          }, xrOk ? 'World AR (optional)' : 'Walk Inside'),
          React.createElement('button', {
            type: 'button',
            className: 'studio-btn studio-btn--ghost cb-walk-cta',
            style: { flex: 1, minHeight: 40 },
            onClick: launchVR,
            disabled: !shellSrc,
            onMouseEnter: hovOn,
            onMouseLeave: hovOff,
          }, 'VR Walkthrough')
        ),
      ),

      React.createElement('div', {
        className: 'cb-walk-overlay' + (mode === '360' ? ' cb-walk-overlay--360' : ''),
        ref: overlayRef,
        style: open ? undefined : { display: 'none' },
        role: 'dialog',
        'aria-modal': 'true',
        'aria-label': alt,
      },
        mode === '360' && React.createElement(OrbitStage, { stageRef: orbitRef }),

        mode !== '360' && React.createElement('div', {
          className: 'cb-walk-host',
          ref: hostRef,
          'aria-label': alt,
        }),

        React.createElement('div', { className: 'cb-walk-hud' },
          React.createElement('div', { className: 'cb-walk-hud-left' },
            React.createElement('div', { className: 'cb-walk-mode-tabs' },
              React.createElement('button', {
                type: 'button',
                className: 'cb-walk-mode-tab' + (mode === 'screen' ? ' is-active' : ''),
                onClick: function() { switchMode('screen'); },
              }, 'Walk'),
              React.createElement('button', {
                type: 'button',
                className: 'cb-walk-mode-tab' + (mode === 'vr' ? ' is-active' : ''),
                onClick: function() { switchMode('vr'); },
              }, 'VR'),
              xrOk && React.createElement('button', {
                type: 'button',
                className: 'cb-walk-mode-tab' + (mode === 'ar' ? ' is-active' : ''),
                onClick: function() { switchMode('ar'); },
              }, 'World AR')
            ),
            React.createElement('span', { className: 'cb-walk-status' }, status),
            activeTourStop && React.createElement('div', {
              className: 'cb-walk-tour',
              style: { marginTop: 10, maxWidth: 380, padding: '9px 10px', borderRadius: 10, background: 'rgba(14,14,28,.72)', border: '1px solid rgba(163,230,53,.35)' },
            },
              React.createElement('div', { style: { fontSize: 11, fontWeight: 700, color: '#d9ff8b' } },
                'Astra guide · Stop ' + (tourIndex + 1) + '/' + tourStops.length + ' · ' + activeTourStop.title),
              React.createElement('div', { style: { marginTop: 3, fontSize: 12, lineHeight: 1.35 } }, activeTourStop.narration),
              React.createElement('div', { style: { marginTop: 5, fontSize: 11, opacity: .8 } }, activeTourStop.visitorPrompt),
              React.createElement('div', { style: { display: 'flex', gap: 7, marginTop: 8 } },
                React.createElement('button', {
                  type: 'button', className: 'btn btn-o', style: { padding: '4px 9px', fontSize: 10 },
                  disabled: tourIndex === 0,
                  onClick: function() { selectTourStop(tourIndex - 1); },
                }, 'Back'),
                React.createElement('button', {
                  type: 'button', className: 'btn btn-v', style: { padding: '4px 9px', fontSize: 10 },
                  onClick: function() {
                    selectTourStop(tourStarted ? (tourIndex + 1) % tourStops.length : tourIndex);
                  },
                }, !tourStarted ? 'Start tour' : (tourIndex === tourStops.length - 1 ? 'Replay' : 'Next stop'))
              )
            )
          ),
          React.createElement('div', { className: 'cb-walk-hud-actions' },
            mode === '360' && engine && (phase === 'ready' || phase === 'placed' || phase === 'scanning' || phase === 'found') && React.createElement('span', {
              className: 'cb-360-engine',
            }, engine === 'webxr-showroom' ? 'Floor AR' : engine === 'camera-showroom' ? 'Camera' : engine === 'model-viewer' ? 'Orbit' : 'Compat'),
            mode === '360' && phase === 'placed' && React.createElement('button', {
              type: 'button', className: 'btn btn-o cb-walk-exit',
              onClick: function() {
                if (orbitApiRef.current && orbitApiRef.current.reset) orbitApiRef.current.reset();
              },
            }, 'Replace'),
            mode === 'vr' && React.createElement('button', {
              type: 'button', className: 'btn btn-o cb-walk-exit',
              onClick: function(){ if (apiRef.current) apiRef.current.recenter(); },
            }, 'Recenter'),
            mode === 'vr' && React.createElement('button', {
              type: 'button', className: 'btn ' + (stereo ? 'btn-v' : 'btn-o') + ' cb-walk-exit',
              onClick: toggleStereo,
            }, 'Stereo'),
            React.createElement('button', {
              type: 'button', className: 'btn btn-o cb-walk-exit',
              onClick: close,
            }, 'Exit')
          )
        ),

        mode === '360' && loadPct > 0 && loadPct < 100 && React.createElement('div', {
          className: 'cb-showroom-load',
        },
          React.createElement('div', { className: 'cb-showroom-load-track' },
            React.createElement('div', {
              className: 'cb-showroom-load-fill',
              style: { width: Math.max(loadPct, 6) + '%' },
            })
          )
        ),

        mode !== '360' && mode !== 'ar' && isMobile() && React.createElement('div', {
          className: 'cb-walk-joystick', ref: bindJoystick,
        }, React.createElement('div', { className: 'cb-walk-knob' })),

        (mode === 'ar' || mode === '360') && phase === 'scanning' && React.createElement('div', { className: 'cb-ar-coach' },
          React.createElement('div', { className: 'cb-ar-coach-title' }, 'Find the floor'),
          React.createElement('div', { className: 'cb-ar-coach-text' },
            'Point at the ground, then tap Place.'),
          React.createElement('div', { className: 'cb-ar-coach-dots' },
            React.createElement('span', null), React.createElement('span', null), React.createElement('span', null))
        ),
        (mode === 'ar' || mode === '360') && phase === 'found' && React.createElement('div', { className: 'cb-ar-coach cb-ar-coach--compact' },
          React.createElement('div', { className: 'cb-ar-tapdot' }),
          React.createElement('div', { className: 'cb-ar-coach-title' }, 'Floor found'),
          React.createElement('div', { className: 'cb-ar-coach-text' },
            loadPct < 100
              ? 'Tap to place — building ' + loadPct + '% loaded'
              : 'Tap Place — then look around')
        ),
        mode === 'ar' && phase === 'placed-waiting' && React.createElement('div', { className: 'cb-ar-coach cb-ar-coach--compact' },
          React.createElement('div', { className: 'cb-ar-coach-title' }, 'Spot locked'),
          React.createElement('div', { className: 'cb-ar-coach-text' }, 'Finishing your building… ' + loadPct + '%')
        ),
        mode === 'ar' && placedToast && React.createElement('div', { className: 'cb-ar-placed-toast' },
          'Placed — walk forward to step inside'),
        mode === '360' && placedToast && React.createElement('div', { className: 'cb-ar-placed-toast' },
          'Placed at real size — look around with your phone'),
        (mode === 'ar' || mode === '360') && loadPct > 0 && loadPct < 100 && phase !== 'placed-waiting' && phase !== 'placed' &&
          React.createElement('div', { className: 'cb-ar-loadchip' }, 'Building ' + loadPct + '%'),

        err && React.createElement('div', { className: 'cb-walk-err' },
          React.createElement('div', null, err),
          mode === '360' && React.createElement('button', {
            type: 'button',
            className: 'studio-btn studio-btn--ghost',
            style: { marginTop: 12 },
            onClick: function() {
              setErr(null);
              requestCameraForShowroom();
              setOpen(false);
              window.setTimeout(function() { setMode('360'); setOpen(true); }, 40);
            },
          }, 'Retry camera')
        )
      )
    );
  }

  window.ARWalkthroughViewer = ARWalkthroughViewer;
})();