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

  function GlassTabBar(props) {
    // Resolve at render time — Babel-standalone loads these <script type=
    // text/babel> files asynchronously, so capturing window.GlassSurface at
    // module scope can grab a stale value before forwardRef is registered.
    var GlassSurface = window.GlassSurface;
    var items = props.items || [];
    var activeKey = props.activeKey;
    var onSelect = props.onSelect;
    var className = props.className || '';

    var innerRef = useRef(null);
    var pillRef = useRef(null);
    var morphTimer = useRef(null);
    var _ready = useState(false);
    var ready = _ready[0], setReady = _ready[1];
    var _pressed = useState(null);
    var pressed = _pressed[0], setPressed = _pressed[1];
    var _bounce = useState(null);
    var bounce = _bounce[0], setBounce = _bounce[1];
    var glassRef = useRef(null);

    useEffect(function() {
      function layoutPill(animate) {
        var inner = innerRef.current;
        var pill = pillRef.current;
        if (!inner || !pill) return;
        var activeBtn = inner.querySelector('.glass-tabbar-item.act');
        if (!activeBtn) return;

        // Accent Create stays in-bar; still show the liquid pill under it.
        pill.style.opacity = '';

        var innerRect = inner.getBoundingClientRect();
        var btnRect = activeBtn.getBoundingClientRect();
        // Position with `left`, not `transform`: `.glass-chrome { transform: none !important }`
        // would freeze a transform-based pill at the Home slot.
        pill.style.width = btnRect.width + 'px';
        pill.style.left = (btnRect.left - innerRect.left) + 'px';

        if (animate && ready) {
          pill.classList.add('is-morphing');
          if (morphTimer.current) clearTimeout(morphTimer.current);
          morphTimer.current = setTimeout(function() {
            if (pill) pill.classList.remove('is-morphing');
          }, 520);
        }

        if (!ready) setReady(true);
      }

      layoutPill(true);
      function onResize() { layoutPill(false); }
      window.addEventListener('resize', onResize);
      return function() {
        window.removeEventListener('resize', onResize);
        if (morphTimer.current) clearTimeout(morphTimer.current);
      };
    }, [activeKey, ready]);

    function flashBar() {
      var g = glassRef.current;
      if (!g) return;
      g.classList.remove('tap-flash');
      void g.offsetWidth;
      g.classList.add('tap-flash');
      setTimeout(function() { if (g) g.classList.remove('tap-flash'); }, 420);
    }

    function select(key) {
      if (onSelect) onSelect(key);
      setBounce(key);
      flashBar();
      setTimeout(function() { setBounce(null); }, 580);
    }

    return React.createElement('nav', { className: 'glass-tabbar-shell ' + className, 'aria-label': 'Main navigation', 'data-tour': 'mobile-nav' },
      React.createElement(GlassSurface, {
        elevation: 0,
        radius: 'pill',
        chrome: true,
        className: 'glass-tabbar',
        ref: glassRef
      },
        React.createElement('div', { className: 'glass-tabbar-inner', ref: innerRef },
          React.createElement(GlassSurface, {
            elevation: 0,
            radius: 'pill',
            chrome: true,
            className: 'glass-tabbar-pill' + (ready ? ' ready' : ''),
            ref: pillRef,
            style: { position: 'absolute', top: 2, bottom: 2, opacity: ready ? 1 : 0 }
          }),
          items.map(function(it) {
            var act = activeKey === it.key;
            return React.createElement('button', {
              key: it.key,
              type: 'button',
              'data-key': it.key,
              className: 'glass-tabbar-item'
                + (act ? ' act' : '')
                + (it.accent ? ' glass-tabbar-item--accent' : '')
                + (it.key === 'quests' ? ' glass-tabbar-item--mission' : '')
                + (pressed === it.key ? ' pressed' : '')
                + (bounce === it.key ? ' bounce' : ''),
              onClick: function() { select(it.key); },
              onTouchStart: function() { setPressed(it.key); },
              onTouchEnd: function() { setPressed(null); },
              onMouseDown: function() { setPressed(it.key); },
              onMouseUp: function() { setPressed(null); },
              onMouseLeave: function() { setPressed(null); },
              'aria-current': act ? 'page' : undefined,
              'aria-label': it.label
            },
              React.createElement('span', { className: 'mobile-nav-icon', 'aria-hidden': true }, it.icon),
              React.createElement('span', { className: 'mobile-nav-label glass-tabbar-label' }, it.label),
              it.badge != null && React.createElement('span', { className: 'mobile-nav-dot' }, it.badge > 9 ? '9+' : it.badge)
            );
          })
        )
      )
    );
  }

  window.GlassTabBar = GlassTabBar;
})();