// Scroll-to-top button — appears once the page is long enough to need it.
// Sits above the pricing configurator's sticky bar when both are visible
// (offset comes from --qb-sticky-bar-offset, set by Pricing.jsx).

const { useState: _stUseS, useEffect: _stUseE } = React;

function ScrollTop() {
  const [visible, setVisible] = _stUseS(false);

  _stUseE(() => {
    const h = () => setVisible(window.scrollY > window.innerHeight * 1.1);
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  const handleClick = () => window.scrollTo({ top: 0, behavior: 'smooth' });

  return (
    <button
      onClick={handleClick}
      aria-label="Scroll to top"
      style={{
        position: 'fixed', right: 20, zIndex: 55,
        bottom: 'calc(20px + var(--qb-sticky-bar-offset, 0px))',
        width: 44, height: 44, borderRadius: 999, padding: 0,
        display: 'grid', placeItems: 'center', cursor: 'pointer',
        background: 'var(--ink-900)', color: '#fff',
        border: '1px solid rgba(255,255,255,0.14)',
        boxShadow: '0 12px 28px rgba(6,8,15,0.35)',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(12px)',
        pointerEvents: visible ? 'auto' : 'none',
        transition: 'opacity .25s var(--ease-out), transform .25s var(--ease-out), bottom .2s var(--ease-out)',
      }}
    >
      <span style={{ display: 'inline-flex', transform: 'rotate(-90deg)' }}>
        <window.QBIcon name="arrow" size={16} stroke={2.4} />
      </span>
    </button>
  );
}

window.QBScrollTop = ScrollTop;