(function() {
  const { useState, useRef, useEffect, useCallback } = React;

  function ARSlider() {
    const wrapRef  = useRef(null);
    const dragging = useRef(false);
    const lastTick = useRef(50);
    const [pct, setPct] = useState(50);
    const ref = useRef(null);
    window.useReveal(ref);

    const clamp = v => Math.max(2, Math.min(98, v));

    const onMouseMove = useCallback(e => {
      if (!dragging.current || !wrapRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      const v = clamp(((e.clientX - r.left) / r.width) * 100);
      setPct(v);
      // Ratchet tick every ~6% of travel — feels like a physical slider
      if (Math.abs(v - lastTick.current) >= 6) {
        lastTick.current = v;
        window.CBSfx && window.CBSfx.play('tick');
      }
    }, []);

    const onMouseUp = () => { dragging.current = false; };

    useEffect(() => {
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('mouseup',   onMouseUp);
      return () => {
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('mouseup',   onMouseUp);
      };
    }, [onMouseMove]);

    const clipRight = (100 - pct).toFixed(1) + '%';

    return (
      <div ref={ref} style={{ background:'var(--bg-mid)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)' }}>
        <div className="section" style={{ maxWidth:1200 }}>
          <div style={{ textAlign:'center', marginBottom:48 }}>
            <div className="eyebrow reveal" style={{ justifyContent:'center' }}>AR Showcase</div>
            <h2 className="heading-lg reveal rd1">Drag to See the <span className="gradient-text">Transformation</span></h2>
            <p className="reveal rd2" style={{ color:'var(--text-dim)', marginTop:16, fontSize:16 }}>
              West Square Reimagined — Before &amp; After AI Enhancement
            </p>
          </div>

          <div className="ar-wrap reveal rd1" ref={wrapRef}
            onMouseDown={e => {
              dragging.current = true; e.preventDefault(); document.body.classList.add('clk');
              window.CBGame && window.CBGame.award('ar-slider', 20, 'Time Traveler');
            }}
            onMouseEnter={() => document.body.classList.add('hov')}
            onMouseLeave={() => { document.body.classList.remove('hov'); document.body.classList.remove('clk'); }}>
            <div className="ar-before" style={{ background:'linear-gradient(135deg, oklch(0.12 0.02 270), oklch(0.18 0.02 270))' }}>
              <span>🏚️</span>
              <div style={{ position:'absolute', inset:0, background:'linear-gradient(135deg, oklch(0.08 0.015 270 / 0.8), transparent)' }} />
            </div>
            <div className="ar-after" style={{ background:'linear-gradient(135deg, oklch(0.12 0.04 280), oklch(0.20 0.05 290))', clipPath:`inset(0 ${clipRight} 0 0)` }}>
              <span>🏛️</span>
              <div style={{ position:'absolute', inset:0, background:'linear-gradient(135deg, oklch(0.68 0.28 295 / 0.15), oklch(0.88 0.24 135 / 0.10))' }} />
            </div>
            <div className="ar-divider" style={{ left: pct + '%' }}
              onMouseDown={e => { dragging.current = true; e.preventDefault(); }}>
              <div className="ar-handle" style={{ color: 'var(--violet)' }}><window.CBIcon name="move-horizontal" size={18} /></div>
            </div>
            <div className="ar-lbl ar-lbl-l">Before</div>
            <div className="ar-lbl ar-lbl-r">After AI ✦</div>
            <div className="ar-hint">← Drag to compare →</div>
          </div>

          <div className="reveal rd2" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginTop:24 }}>
            {[
              { icon:'zap',    label:'AI Processing Time', val:'12.4 seconds', color:'var(--violet)' },
              { icon:'target', label:'Geometric Accuracy',  val:'99.2% faithful', color:'var(--lime)'   },
              { icon:'eye',    label:'AR Viewers Today',   val:'31,842 live',    color:'var(--cyan)'   },
            ].map(s => (
              <window.UserHoverCard key={s.label}>
                <div style={{ display:'flex', gap:14, alignItems:'center' }}>
                  <span className="ps-icon" style={{ color: s.color, marginBottom: 0 }}><window.CBIcon name={s.icon} size={22} /></span>
                  <div>
                    <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:s.color, marginBottom:4 }}>{s.label}</div>
                    <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:24, letterSpacing:'.02em', color:'var(--text)' }}>{s.val}</div>
                  </div>
                </div>
              </window.UserHoverCard>
            ))}
          </div>
        </div>
      </div>
    );
  }

  window.UserARSlider = ARSlider;
})();